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>