JavaScript is disabled! Please enable JavaScript in your web browser!

Freestyle Academy of Communication Arts & Technology

1299 Bryant Ave, Mt. View, CA 94040 T 650-940-4680   F 650-961-1346
2 Required Classes: English and Digital Media 3rd/Elective Class:  + Animation or Design or Film

Font Size

+

-

Reset

Back to list of all examples

Useful Stuff About:

Implementing parallax effect when vertically scrolling

Choose a website example

  1. https://madebyfew.com/
  2. https://www.firewatchgame.com/
  3. https://gardenestudio.com.br
  4. https://jessandruss.us/
  5. Madwell

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');
}
});