•  23-09-2022
  •  | 
  •  

Question

I trying to create a basic parallax scrolling example with text and color; no images. However the effect doesn't seem to work. Here is the code:

<!doctype html>
<html>
<head>
<title>Parallax Scrolling</title>
</head>
<style type="text/css">
body{
margin:0;
padding:0;
} 
#img1 { 
background: rgb(44,89,238) 50% 0 repeat fixed; 
height: 1000px;  
margin: 0 auto; 
width: 100%; 
max-width: 1920px; 
position: relative; 
box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
#img2 { 
background: rgb(252,151,20) 50% 0 repeat fixed; 
height: 1000px;
margin: 0 auto; 
width: 100%; 
max-width: 1920px; 
position: relative; 
box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
p {
height: 458px;
position: absolute;
top: 291px;
width: 100%;
font-size: 100px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

$(document).ready(function(){


     var $window = $(window); 

     $('section[data-type="background"]').each(function(){
     var $bgobj = $(this); // assigning the object
     $(window).scroll(function() {
     var yPos = -($window.scrollTop() / $bgobj.data('speed'));
     var coords = '50% '+ yPos + 'px';
     $bgobj.css({ backgroundPosition: coords });
     });
     });
     });

</script>
<body>
<section id="img1"><p>Hello</p></section>
<section id="img2"><p>Hello</p></section>
</body>
</html>

I have tried to edit the css but nothing seems to be working. Please help.

Was it helpful?

Solution

There are some handy Parallax scrolling JS libs out there they might help quite a bit, take a look:

Scrolling Effect:

http://markdalgleish.com/projects/stellar.js/

Stellar is helpful and easy, it can be as simple as adding data-stellar-ratio="" to a element, but it can be adjusted with jQuery, it is writen in jQuery, so jQuery will be needed in order to user it.

Gyroscope / Mouse movement Effect:

http://wagerfield.github.io/parallax/

Parallax.js is handy as well, and also very cool, although this isn't a Parallax scrolling like you mentioned, I think you would still like it. Parallax is written in jQuery and JavaScript, so jQuery is not needed.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top