We will again build a simple parallax simple site. This time a little more complex and fun. Check it out !
Here is the demo:Demo Parallax
Parallax is still a fairly popular technique in the web. If done right it feels awesome but there must be some things to consider first:
- Use properties that are easy for the browser to animate – translate3D, scale, rotation and opacity
- Use window.requestAnimationFrame(animateElements)
- Rounding the values – do not let the pixel value become 53.3325 px. Round the number
- Only animate absolute and fixed position elements
- <body> scroll – use JS to set an appropriate body height to get the height of scroll you need
- Avoid background-size:cover
- Don’t bind directly to scroll event – scroll is called “to often” and can impact performance, just update their position every 10 ms
- Don’t animate massive images or re-size them too much – re-sizing the image with browser from 3000 px to 1000 px and then animating it is not a good idea
- Animate fewer objects – 1 at the time has best performance
See you next time !