Parallax CSS

17th Feb 19
Thumbnail

This week I focused my learning on vue.js and animations using javascript.  

I have looked into and tried to understand the parallax style done in pure css.   This style gives an impression of distance between the background and foreground.  There are a few factors that give rise to this effect.  It is quite a complex topic to get your head around.  Firstly you apply an overflow-y to scroll to the parent element.  Scrolling is effectively a transform.  In a typical scroll without any perspective applied, the transform is on a 1:1 basis relative to its children.  So scrolling for 200px will move the children by 200px up.  However if you apply a perspective to the parent element and translateZ to the children, this messes up the 1:1 transform.  Like when objects in the distance perceive to go a slower speed than objects closer to you.  You also need to set the height to 100vh and along with the perspective which is set to 1px.  This will lock the perspective to the center.  The children elements are positioned absolute and fixed right: 0, left: 0, top: 0, and bottom: 0.  To give the effect of perspective you need to have two elements moving at different speeds.  So the two child element have different classes and one transforms 0 along the Z axis and other -1px.  As you are moving the child elements away you need to use scale to scale up the size.  Elements with negative Z transform will move slower than those with positive value.  Most parallax sites break the page into distinct sections. 

Things I have learnt in the process:

getBoundingClientRect() this javascript method returns the size of the element and its position relative to the viewport.  You can get the top, right, bottom, width and height. 

requestAnimationFrame() this javascript method tells the browser that you want to perform an animation

I have recently completed my apprenticeship.  I am currently building the API to a React JS site using Firebase.