Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>Untitled Document</title>
- <style type="text/css">
- body{
- margin:0;
- padding:0;
- }
- ul{
- margin-top:0px;
- margin-left:25px;
- margin-right:25px;
- padding-top:0px;
- }
- ul li{
- list-style:none;
- overflow:hiden;
- height:500px;
- }
- .parallax-background{
- height:600px;
- }
- .image1{
- background-image:url(images/image1.jpg);
- background-position:50% 20%;
- background-size:cover;
- }
- .image2{
- background-image:url(images/image2.jpg);
- background-size:cover;
- background-position:50% 10%;
- }
- .image3{
- background-image:url(images/image3.jpg);
- background-size:cover;
- }
- .image4{
- background-image:url(images/image4.jpg);
- background-size:cover;
- background-position:50% 10%;
- }
- </style>
- </head>
- <body>
- <ul class="parallax">
- <li>
- <div class="parallax-background image1" ></div>
- </li>
- <li>
- <div class="parallax-background image2">asdfasdfasdf</div>
- </li>
- <li>
- <div class="parallax-background image3"></div>
- </li>
- <li>
- <div class="parallax-background image4"></div>
- </li>
- </ul>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" >
- </script>
- <script>
- $(document).ready(function(){
- var $container=$(".parallax");
- var $divs = $container.find("parallax-background");
- var thingBeingScrolled= document.body;
- var liHeight=$divs.eq(0).closest("li").height();
- var diffHeight=$divs.eq(0).height - liHeight;
- var i,len,div,li,offset,myScroll,top;
- var render=function(){
- //loop thur divs
- top=thingBeingScrolled.scrollTop;
- for(i=0,len-$divs.length;i<len;i++){
- //get one div
- div =$divs[i];
- //get the parent li
- li=div.parentNode;
- //calcute the offset top of div
- offset=$(div).offset().top;
- //calculate the amount to scroll
- myScroll=Math.round(((top - offset)/ liHeight)* diffHeight);
- //apply the scroll amounth
- div.style.webkitTransform = "translate3d(0px,"+ myScroll+"px, 0px)";
- }
- };
- (function loop(){
- requestAnimationFrame(loop);
- render();
- });
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement