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:

Some tips:

  • 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 !