Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
Apple's page for iPhoneX is stunning, and I would like to know how to replicate some features on the site. See the link (https://www.apple.com/iphone-xr/)
I have very little knowledge about web development. I know html and css are the most common languages used for web development. Is this the same for the Apple website?
I am particularly interested in how to create animations while scrolling, a feature I see in many websites. As the user scrolls, new images and moving text are displayed on screen.
The link used in the question as well as other regional websites of Apple Inc. are based on a typical HTML-CSS platform(primarily).
Please note that the animations are based on js (also css).
The animations look really nice as they have divided the pages into dedicated DIVs and have used plenty of effects like onHover ,mouseUP, visibilityChange, scrolling-related stuff and what not.
You can use Ctrl+Shift+I to inspect the elements on ANY wesite for that matter, that will give you the idea of what the contents of a site really are.... !!
What 'Inspect element' looks like
This effect can be achieved in the following ways:
Sorted from the most difficult:
Code it yourself using vanilla Javascript(see: https://css-tricks.com/lets-make-one-of-those-fancy-scrolling-animations-used-on-apple-product-pages/)
Code it yourself using a Javascript libraries
GSAP (see: https://youtu.be/wLUJ9VNzZXo)
ScrollMagic (see: https://scrollmagic.io/examples/expert/image_sequence.html )
or without coding:
Scrollsequence WordPress Plugin
(see: https://wordpress.org/plugins/scrollsequence/)
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 1 year ago.
Improve this question
I'm trying to choose a widget layout and I have come across:
gridstack: http://troolee.github.io/gridstack.js/
gridster: http://gridster.net/enter link description here
Any one used these before who can share the pros and cons and features?
Gridster is a great library built by Ducksboard who were acquired some time back. At this time, to the best of my understanding, they have ceased development and the fork community is not very active.
Gridstack is an active project at this time. It's openly states it was inspired by Gridster and so should offer much the same functionality, if not all, in time. Gridstack is not a rebuild of Gridster, however, and aims to improve upon the concept. For example, it supports responsive layouts, becoming a vertical stack of widgets on smaller format screens.
Gridstack is the way to go if you're looking for a library like this these days.
I have used Gridstack since .63 and like it very much. I built it using JQuery, and will be porting it to react soon. I would give this library a 9 out of ten.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I used dreamweaver for HTML editing so far and its fine for UI developer I think.
But most weak point is too heavy.
I wonder if I should upgrade to something more lighter with full-featured.
Anyone recommend me HTML editor tool?
Those features are what I'm looking for.
not heavy to load
split mode (code / view)
custom colors for element/attribue/values...
auto-complete tag (code hint)
auto-add close tag
changes code same time interactively (like multiple sections.)
html validation check
wysiwyg
For simple light weight code editor I would recommend Bracket , Simply nice for HTML and Javascript coding and for split mode you can always use developer tool of browsers. I find them much better.
Assuming that your work on Windows (if not, let me know)
You could take a look to (All of them are WYSIWYG):
Microsoft Expression Web 4 (Free Version) Developed by Microsoft. Not exactly WYSIWYG but quite close and quite similar to Dreamweaver for an easy transition.
BlueGriffon Open Source
Aloha Open Source
I like Brackets a lot, but It's not WYSIWYG as you are request for.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I noticed https://beta.icloud.com/ didn't use SVG which surprised me. Here Apple is on the cutting-edge using things like background: -webkit-canvas(animation) and they're not using SVG on what seems like a perfect place to use it. I want to delve deep into SVG but before I do I want to understand its limitations. When I see demos like this Mozilla demo it doesn't seem like it has major problems. What would be the reasons a large corporation, for example, would not use SVG?
There are relatively few "problems" with using SVG today. For the most part, it's a question of fit and familiarity - there are a lot of problems where the solution is to dynamically draw to a raster buffer. That is, canvas.
However, for Apple, the problem is that Safari has the worst of SVG compatibility of any major browser (at least, the last time I tested it). They want their sites to work in Safari.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
It seems that Indexhibit (www.indexhibit.org) is a sort of standard when it comes to building portfolio websites for artists. I just received a mail from an artist asking me whether I use Indexhibit. Beside the issues of the customer poking their nose into technical stuff, I need to know what's so special about Indexhibit?
I took a look at it and saw nothing more then a somewhat original CMS. I have my own system/libraries that I use to build simple websites and prefer sticking to these, but would like to know first... why does Indexhibit have this place among artists... and why do they say "an Indexhibit site" and not "a website built on Indexhibit"... what's the difference between an Indexhibit website and a plain website? Is there any advantage when using Indexhibit?
That's it, you got it, it's just a blank slate that makes it easy to pump out a small portfolio in a short amount of time. It's the helvetica of portfolio web design. Nothing fancy, but it's classic, the art can breath.
I come from a ASP.NET MVC and Django Background, and I've actually been having a bit of fun about working with Indexhibit. I got over my fear of PHP and there is some thing refreshing about just firing a query off, and building html straight out of it. Would never use it for a really custom job, but for things that fit the model, it gets quite out of your way for getting things done.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 13 years ago.
Improve this question
I am about to embark on a jquery journey I have not ever done. I will be developing a site that has one objective : to display over 300 uncategorized images (artwork). I'm just trying to think about the best way to go about displaying all these images in an easy to navigate, elegant way. I could use thumbnails and lightbox, but that's boring. I want to get inventive! Any cool ideas?
What's the objective of the people coming to view the images? Is it just browsing, or will they be looking for particular images? Are the images grouped into themes or artist or something? You have to build a navigation system that makes it easy for your users to achieve their goal!
Perhaps, if its more browsing some creative theme of images I wonder if you could come up with a scheme that lets users find their way between images naturally. Perhaps have several paths through the images, that when you view one you have a couple of options for where to 'go' next. Almost mimic the kind of browsing you might experience in an art gallery?
I wouldn't say that 300 images is a "ton" by any stretch.
Go visit photo sites like Flickr, SmugMug, and Picasa. Find the websites for wedding and journalist photographers. See what they're doing. If you can't figure out how to navigate their site in 10 seconds, stay away from similar site designs.