Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

Parallax Scroll Effects Tutorial Animation Programming

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>
thumb

JavaScript Videos

Scroll Programming

Peekaboo Box Tutorial Scroll Bottom CSS Transition AnimationParallax Scroll Effects Tutorial Animation ProgrammingMagic Header Scroll Page TutorialScroll Load Dynamic Content When User Reach Bottom AjaxSmooth Auto Scroll Tutorial