Here: http://www.ginventory.co/
I am not sure if this is also called parallax. If not, I'd like to know what is it called?
1
-
Please add some screenshots of the site, because the link may rot over time.– tohsterFeb 20, 2016 at 9:15
Add a comment
|
3 Answers
"Parallax" is a term for the optical effect we see when we change our position in relation to things at different distances:
Due to foreshortening, nearby objects have a larger parallax than more distant objects when observed from different positions, so parallax can be used to determine distances.
Technically, the effect on that site isn't parallax, but since the techniques employed to do that were originally used to create a true parallax effect (implying depth by moving things at different speeds on scroll) the term is now used as a blanket word for doing things other than simply scrolling when users scroll.
There's another word for this, though: scrolljacking. While the effect can be very flashy and allow for some really clever designs, it quickly lost its luster for a lot of designers because of how jarring it can be to users who expect...well, normal scrolling behavior.
Personally, I detest scrolljacking most of the time, as it seems to really slow down my use of the site when I'm using a mousewheel. A touch screen or Apple Magic Mouse isn't as bad, since the action of flicking through is smoother, but with a typical mousewheel, the designer's smooth, clever animations end up looking very stunted and twitchy since the wheel has detents. If the design has tight affordances for where I need to scroll to, I may not be able to see a particular "page" at all, since those detents prevent me from stopping except at regular intervals.
answered Feb 18, 2016 at 15:59
-
I would like to add a great example of actual parallax (as a gamedev, I am very aquainted with the effect). elpixelilustre.com/wp-content/uploads/2014/06/SotBgif.gif– speederFeb 19, 2016 at 21:06
Yep, this is a parallax design with scrolling animations. Parallax doesn't mean anything else as you have two or more layers and they move with different speed or in different ways. That's all ;)
-
2I don't know about this one, I'd say there are some parallax elements in the first and last transition but for the most part it is just animations and transitions. To be parallax there has to be some measure of depth created and in my opinion rotating panels and slideouts don't do that. So I'd say it depends on exactly what part of the site OP is asking about. Feb 18, 2016 at 13:18
As Niklas said, yes it is.
Just be careful about the weight of your site, this link you shared, has 2.5 mb. Parallax sites, in most of the cases, are gorgeous, but has too much weight.
-
2All of the files in the given screenshot have nothing to do with the parallax. I'd wager the .mp4 and .png are giving the bulk of that data usage, the analytics.js are from Google for user tracking, and I'm not sure what the collect param string is but likely has to do with in house user tracking. The files related to parallax are all-e524b70f.js and style-32341a87.css which are only around 320kb total, and thats ALL of their javascript/css, I didn't sift through too see if all of it (or any of it really) is parallax related. Feb 18, 2016 at 13:42
-
-
@DasBeasto Yep, it just the CSS and JS. My print was to show the weight of the site. Because normally a site with parallax is heavy, but you are right. And leaving by side the weight, there's some performance issues, but it needed to study case by case. Feb 23, 2016 at 20:52