Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  
  <style>
    
    body{
      height: 4000px;
    }
    
    .parallaxblock{
      position:fixed;
      background:#999;
      opacity:.5;
    }
  </style>
</head>
<body>
  <div class="parallaxblock" data-p-offset=100>Im A Block</div>
  <div class="parallaxblock" data-p-offset=200>Im Also Block</div>
  <div class="parallaxblock" data-p-offset=1500>Im Another Block</div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consequat est quis gravida scelerisque. Fusce ultricies, erat in efficitur euismod, lacus ante lacinia urna, ut volutpat odio lacus eget nisl. In at odio at nisi maximus cursus tristique non nisl. Quisque suscipit felis nisl, quis luctus nibh posuere sit amet. Aliquam erat volutpat. Nunc dapibus elit eget tortor vehicula scelerisque. Duis vel semper sapien, nec vestibulum augue. Duis volutpat rutrum ultrices. Nulla euismod sapien vitae sem dignissim pharetra. Nunc ex arcu, fringilla nec augue vitae, ullamcorper placerat nunc. 
​
Integer ut semper purus. Donec imperdiet efficitur diam ac cursus. Integer id leo augue. Fusce suscipit fringilla lorem in consectetur. Praesent nulla dolor, volutpat porttitor felis id, ornare luctus massa. Vestibulum sollicitudin, ligula ac condimentum blandit, erat massa tempus velit, nec pharetra turpis risus nec leo. In pharetra mauris dolor, sodales varius augue egestas ut. 
​
Donec sed leo luctus, vulputate metus at, sollicitudin lacus. Donec quis nunc aliquam, fermentum lectus ac, molestie nisi. Nulla vestibulum tincidunt ante bibendum luctus. Curabitur eu iaculis mi. Sed cursus vitae ante et dictum. Donec elit dolor, tincidunt ac elit eu, porta blandit sapien. Mauris in tempor quam. Cras quis ligula scelerisque felis porta sodales sit amet quis enim. Nam in ante ipsum. Quisque sed ipsum orci. Maecenas porta, ipsum et ornare bibendum, orci augue euismod lacus, eu gravida erat leo a dui. 
​
Donec sed risus ultrices, eleifend quam sit amet, tristique urna. Quisque enim ex, interdum non nunc at, sodales volutpat metus. Cras elementum nulla mollis convallis pretium. Nullam ut eleifend turpis, eu ultricies nisl. Nam consequat, est et accumsan faucibus, odio eros commodo mi, id volutpat turpis quam posuere ligula. Donec aliquet a enim sit amet pharetra. Sed bibendum pulvinar est malesuada dapibus. In rutrum ultricies nisl, sit amet fermentum erat pellentesque ac. Suspendisse et tellus tincidunt, rhoncus mi vitae, molestie odio. Aliquam tristique leo orci, et elementum enim ultricies eu. 
​
Aliquam suscipit nunc rhoncus nisl faucibus pellentesque. Morbi non est diam. Donec volutpat eget sapien in rhoncus. Phasellus blandit massa felis, at tincidunt est porttitor a. Sed odio felis, mattis eu ex vel, condimentum volutpat nisi. Cras viverra consectetur fringilla. Curabitur fermentum posuere neque ut euismod. 
​
Etiam nisl est, dignissim quis cursus tempus, scelerisque nec nisi. Pellentesque elementum sit amet mi ut interdum. Integer fermentum, ipsum sodales egestas semper, est ligula tempor magna, eu lobortis diam velit sed metus. In nec feugiat ex, sed fermentum ipsum. Phasellus scelerisque libero sed consequat rhoncus. Nullam rutrum, lorem ut sollicitudin gravida, risus neque iaculis sapien, ut vehicula nulla velit et purus. Quisque ac gravida neque. Nullam faucibus, quam ut ullamcorper porta, arcu mauris tincidunt quam, vitae scelerisque mauris nibh at lorem. Quisque non lorem vehicula, imperdiet metus vulputate, vehicula est. Nulla sed felis feugiat nibh ornare molestie. Integer nec erat nec nisi feugiat tincidunt. Donec sit amet justo ipsum. Pellentesque nisl mauris, auctor id tortor ultrices, dignissim lacinia felis. Integer fringilla nibh mollis arcu efficitur rhoncus. Fusce augue turpis, volutpat in quam quis, dapibus feugiat mauris. 
​
Mauris auctor dui et sapien malesuada, sit amet accumsan nisi accumsan. Donec ultricies posuere nisi sit amet aliquet. Fusce mi urna, gravida vitae ullamcorper eu, lacinia ut augue. Suspendisse potenti. Aliquam non magna rutrum, iaculis massa ut, vestibulum sapien. Vestibulum in rhoncus dui. Vivamus commodo id enim et vestibulum. Suspendisse mattis faucibus odio, nec feugiat enim blandit suscipit. Fusce felis justo, rutrum non tristique sed, auctor a leo. Vivamus eu tellus pharetra, bibendum diam nec, lacinia erat. Suspendisse a consequat risus, eu cursus est. Proin in arcu orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis iaculis auctor augue at interdum. Mauris sit amet sapien est. 
​
Sed sit amet ornare tellus. Quisque condimentum vehicula est, a tincidunt felis imperdiet eu. Sed eu nisi ac purus sagittis semper at vel turpis. Aenean tempus venenatis lectus, et hendrerit ante tincidunt sed. Mauris vestibulum accumsan sollicitudin. Sed et est a diam lacinia sagittis. Nam pharetra libero sed ipsum dapibus ullamcorper. 
​
Sed euismod lacus elementum neque commodo luctus. Pellentesque viverra leo ac lacinia blandit. Etiam sit amet elit in urna pulvinar volutpat et eu libero. Integer ultricies vulputate tellus, ut elementum augue condimentum ac. Sed consequat porttitor felis, vehicula posuere leo consequat at. Nullam id aliquet lorem. Mauris ut tellus diam. Donec eros nisl, cursus at felis vel, convallis tempus erat. Curabitur condimentum imperdiet convallis. Nunc ac arcu vitae sapien finibus vulputate in eu arcu. Nulla in nunc ultricies, commodo ipsum ut, convallis massa. In in interdum odio. 
​
Vivamus ornare odio eu nunc imperdiet tincidunt. Nam laoreet, velit in consequat mattis, metus massa porta velit, lacinia sagittis neque sapien a mauris. Vivamus ac semper sem, sed faucibus urna. Nullam id euismod metus. Nulla pulvinar ultrices ullamcorper. Donec molestie nibh in magna volutpat tristique. Pellentesque in tincidunt neque. Vivamus dignissim, lacus sit amet lacinia rhoncus, erat sapien pellentesque orci, sed pretium tortor sapien vitae felis. Duis fringilla metus facilisis purus efficitur, id pharetra nisl tempus. Nulla dui eros, sagittis ac dictum id, convallis quis ipsum. In vehicula imperdiet consectetur. Duis ac aliquam libero. Morbi lobortis feugiat ligula, vitae tincidunt augue sagittis facilisis. 
​
  </div>
  
</body>
</html>
 
var $Window = $(window),
    parallaxFactor = 2;
​
$('.parallaxblock').each(function(a,b){
    var element = $(b);
    element.css("top",element.data("pOffset") + "px");
​
    $Window.bind('scroll', function() {
        var pos = 
            // Base Offset
            element.data("pOffset") - ($Window.scrollTop() / parallaxFactor);
​
        pos = pos < 0 ? 0 : pos;
      
      
      
        element.animate({"transform":"translateY("+pos+"px)"});
        element.animate({"-webkit-transform":"translateY("+pos+"px)"});
        //element.css("top", pos + "px");
​
        return;
    });
​
});
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers