Freestyle Academy of Communication Arts & Technology

1299 Bryant Ave, Mt. View, CA 94040 T 650-940-4650 x5090

2 Required Classes: English and Digital Media 3rd/Elective Class: + Animation or Design or Film

Back to list of all examples

Useful Stuff About:

Implementing parallax effect when vertically scrolling

Choose a website example

Scripts needed (copy and paste inside <head>)



<script type="text/javascript" src="https://www.freestyleacademy.rocks/jquery/minified.js"></script>
<script type="text/javascript" src="javascriptFile.js"></script><!--adjust this as needed-->

Here's the javascript code



$(document).ready(function(e) {
    $(window).bind('scroll',function(e){
		parallaxScroll();
	});
	function parallaxScroll(){
		var scrolled = $(window).scrollTop();
		$('#box1').css('top',(0-(scrolled*.25))+'px');
		$('#box2').css('top',(0-(scrolled*2.5))+'px');
		$('#box3').css('top',(0-(scrolled*5))+'px');
	}
});