Rik Rik - 4 months ago 6x
Javascript Question

What is a technique for making custom behavior on scroll in webpage?

I can't find a name for this technique nor any readings on topic. So i ask here.

Basically there are pages that us scrolling behavior that moves images/or parts of web in different timing or speed.

The example is http://areyousage.com - the page scrolls like turning pages upwards.

I don't want answer that does everything for me but at a name of this technique or set of techniques so i could research and code on my own.

Kind of direction for further research.


The basic mechanism is called parallax scrolling in which the different elements of the image / text / other layereed content are scrolled at different rates to give the illusion of depth of field or of altered perception.

This can also loosely be achieved by stacking background images, with different z-indexes and animating them with different speeds / directions / transitions etc and triggering the movement with the mouse movement or scroll wheel.

in teh example you provides there is a transition that triggers on scroll to move the image:

transition-duration: 0ms; transform: translate3d(0px, -316px, 0px);

The translate3d function takes three arguments - one for each axis, x,y, and z

This works because the image that is being transitioned is 316px , so the effect is that it moves up and out of hte viewport when you scroll. In reality it is displaced upwards by the same amount as its height so it seems to disappear.

Note that this is not parallax scrolling - this is a html5 / css mechanism making the images seem like they are moving and revealing the next image in the stack as they do.