Parallaxin – A WebGL JavaScript Parallax Effect Tutorial

Parallaxin – A WebGL JavaScript parallax effect tutorial to create a 3D parallax effects on website. In short, it is to create a parallax effect using fixed position canvas techniques or WebGL JavaScript. You can check the demo of this parallaxing effect here.

Parallaxin OpenGL Parallax JavaScript Tutorial

If you’re not familiar with them, they’re the sites where the visual structure of the page changes as you scroll. Normally elements within the page scale, rotate or move proportionally to the scroll position on the page.

Whether or not you like parallaxing sites is one thing, but what you can say pretty confidently is that they’re a black hole of performance. The reason for this is that browsers tend to be optimized for the case where new content appears at the top or bottom of the screen when you scroll (depending on your scroll direction) and, in general terms, the browsers work best when very little changes visually during a scroll. For a parallax site that’s rarely the case since many times large visual elements all over the page change, causing the browser to do a repaint of the whole page.

It is reasonable to generalize a parallaxing site like this:

  • Background elements which, as you scroll up and down, change their position, rotation and scale.
  • Page content, such as text or smaller images, which scrolls in the typical top-to-bottom fashion.


Vinod Suthersan is a enthusiastic web designer still learning new things on web designing. He loves designing, hunting new designs, blogging, and crazy about Internet. Know more

You may also like...