CODEWITHSUNDEEP
jqueryhtmlcssparallax.js
android211
android211

Reputation: 3

Parallax Scrolling effect

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.

Upvotes: 0

Views: 2824

Answers (1)

user3117575
user3117575

Reputation:

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.

Upvotes: 3

Related Questions