Creating the Parallax Effect Using Javascript and CSS

The parallax effect, or scrolling parallax effect, has become popular on modern websites. My favorite example of the parallax effect is implemented on http://boy-coy.com/. You may be thinking to yourself that this looks difficult to implement, but actually it’s incredibly easy.

Programming the movement itself is very easy. They simply run on one mechanic, event listeners bound to the mouse scroll. All the event listeners do is invert the mouse scroll direction and divide to make it move slower. Dividing by 4 means your parallax image will move four time slower than your mouse scroll speed. So, when you scroll down the image will scroll up the page at a set rate.

The implementation may be found at http://legacy.jordanmclemore.com/labs/1.html. You’ll notice each parallax images is positioned as a background at a location. Each images is controlled by it’s own controller and function called by the controller.