API tools faq
paste
Advertisement
LivioBrunner

Parallax Scrolling

LivioBrunner
Oct 30th, 2013
51
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 5.63 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.   <head>
  4.   <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  5.   <meta name="generator" content="PSPad editor, www.pspad.com">
  6.   <title></title>
  7.   <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  8.   <script type="text/javascript">
  9.     paralaxId = new Array();
  10.     var counter = 0;
  11.     var paralaxLeft = new Array();
  12.     var paralaxTop = new Array();
  13.     function contains(a, obj) {
  14.     var i = a.length;
  15.     while (i--) {
  16.        if (a[i] === obj) {
  17.            return true;
  18.        }
  19.     }
  20.     return false;
  21. }
  22.     function addParallax(object, speed, direction){
  23.       if(contains(paralaxId,object ) == false){
  24.         paralaxId[counter] = object;
  25.         paralaxTop[counter] = $(object).position().top;
  26.         paralaxLeft[counter] = $(object).position().left;
  27.         console.log("Register object:'" + paralaxId[counter] + "' top:" + paralaxTop[counter] + "px left:" + paralaxLeft[counter] + "px");
  28.         counter++;
  29.       }
  30.        objectId =jQuery.inArray( object, paralaxId );
  31.  
  32.        if(direction == "up"){
  33.         $(object).css({
  34.                     top: -$(document).scrollTop() * speed + paralaxTop[objectId] +"px"
  35.         });
  36.        } else if (direction == "down"){
  37.  
  38.          $(object).css({
  39.                     top: $(document).scrollTop() * speed + paralaxTop[objectId] +"px"
  40.         });
  41.        } else if (direction == "left"){
  42.          $(object).css({
  43.                     left: -$(document).scrollTop() * speed + paralaxLeft[objectId] +"px"
  44.         });
  45.        } else if (direction == "right"){
  46.          $(object).css({
  47.                     left: $(document).scrollTop() * speed + paralaxLeft[objectId] +"px"
  48.         });
  49.        }
  50.     }
  51.              $( window ).scroll(function() {
  52.                      scroll = $(document).scrollTop();
  53.  
  54.                      addParallax("#object1", 0.3, "right");
  55.                      addParallax("#object1", 0.3, "down");
  56.                      
  57.                      addParallax("#object2", 0.2, "right");
  58.                      addParallax("#object2", 0.2, "up");
  59.                      
  60.                      addParallax("#object3", 0.8, "up");
  61.                      
  62.                      addParallax("#object4", 2, "down");
  63.                      
  64.                      addParallax("#object5", 1.5, "up");
  65.              });
  66.   </script>
  67.   <style>
  68.           *{
  69.             left:0px;
  70.             top:0px;          
  71.            }
  72.            #object1{
  73.             position:fixed;
  74.             top:280px;
  75.             left:30px;
  76.             width:150px;
  77.             height:100px;
  78.             font-family:arial;
  79.             background-color:green;
  80.             transition: 0.5s all;
  81.             -o-transition: 0.5s all;
  82.             -moz-transition: 0.5s all;
  83.             -webkit-transition: 0.5s all;
  84.            }
  85.            #object2{      
  86.             position:fixed;
  87.             top:250px;
  88.             left:90px;
  89.             width:100px;
  90.             height:75px;
  91.             font-family:arial;
  92.             background-color:red;
  93.             transition: 0.5s all;
  94.             -o-transition: 0.5s all;
  95.             -moz-transition: 0.5s all;
  96.             -webkit-transition: 0.5s all;
  97.            }
  98.            #object3{      
  99.             position:fixed;
  100.             top:190px;
  101.             left:200px;
  102.             width:60px;
  103.             height:55px;
  104.             font-family:arial;
  105.             background-color:blue;
  106.             transition: 0.5s all;
  107.             -o-transition: 0.5s all;
  108.             -moz-transition: 0.5s all;
  109.             -webkit-transition: 0.5s all;
  110.            }
  111.            #object4{      
  112.             position:fixed;
  113.             top:300px;
  114.             left:500px;
  115.             width:150px;
  116.             height:345px;
  117.             font-family:arial;
  118.             background-color:yellow;
  119.             transition: 0.5s all;
  120.             -o-transition: 0.5s all;
  121.             -moz-transition: 0.5s all;
  122.             -webkit-transition: 0.5s all;
  123.            }
  124.            #object5{      
  125.             position:fixed;
  126.             top:800px;
  127.             left:0px;
  128.             width:100%;
  129.             height:900px;
  130.             font-family:arial;
  131.             background-color:purple;
  132.             transition: 0.5s all;
  133.             -o-transition: 0.5s all;
  134.             -moz-transition: 0.5s all;
  135.             -webkit-transition: 0.5s all;
  136.             z-index:3;
  137.             opacity:0.5;
  138.            }
  139.   </style>
  140.   </head>
  141.   <body>
  142.         <div id="object1">
  143.           Hallo
  144.         </div>
  145.         <div id="object2">
  146.             Hallo2
  147.         </div>
  148.         <div id="object3">
  149.             Hallo3
  150.         </div>
  151.         <div id="object4">
  152.             Hallo4
  153.         </div>
  154.         <div id="object5">
  155.              Hallo5
  156.         </div>
  157.         <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  158.   </body>
  159. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!