FULL STACK   ·   UI   ·   UX   ·   GRAPHICS   ·   DEVELOPER   ·   INSTRUCTOR

Adam Khoury

Donate funds to show love and support

Click the button below to donate funds securely online. You can use your PayPal account or a credit card.

Your donations help free up my time to produce more content and assist in covering server costs. It's also a great way to say thanks for the content!

Application Configuration

Adam will be adding options here soon.

Parallax Scroll Effects Tutorial Animation Programming

Published :
Author :
Adam Khoury
When creating parallax effects the programming goal is to make different layers move at different speeds. It is sometimes programmed according to where the user mouse moves on the screen, and sometimes it's programmed into the scrolling of content on a web page. It is a similar concept to Disney's Multiplane Camera where different layers will move at different speeds to give the viewer a better sense of depth. We are going to use essentially just 1 line of JavaScript code to produce a parallax scrolling effect. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> body{ margin:0px; background:url(bg.jpg) fixed;} #prlx_lyr_1{ position:fixed; background: url(parallax_bg1.png) no-repeat 0px 200px; width:100%; height:800px; } #prlx_lyr_2{ position:fixed; background: url(parallax_bg1.png) no-repeat 600px 400px; width:100%; height:1000px; } #content_layer{ position:absolute; } </style> <script> function parallax(){ var prlx_lyr_1 = document.getElementById('prlx_lyr_1'); var prlx_lyr_2 = document.getElementById('prlx_lyr_2'); prlx_lyr_1.style.top = -(window.pageYOffset / 4)+'px'; prlx_lyr_2.style.top = -(window.pageYOffset / 8)+'px'; } window.addEventListener("scroll", parallax, false); </script> </head> <body> <div id="prlx_lyr_1"></div> <div id="prlx_lyr_2"></div> <div id="content_layer"> <script> for(var i=1; i < 50; i++){ document.write('<h1>This is dummy line '+i+'</h1>'); } </script> </div> </body> </html>