Selam,

Mantığın nasıl ilerlediğini merak edenler için örnek parallax kodları. Bişey hazırken bunu kullanıyorum.

Demoyu görüntüle

<div class="wrapper">  
  <p>
    <h1>Başlık</h1>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos iste numquam officia ex aspernatur iure eos nihil ratione enim maxime assumenda recusandae culpa libero. Quia rerum iure assumenda ratione neque. <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis praesentium repellat quae dolor dolorum reprehenderit saepe id quam nesciunt aperiam temporibus ducimus fugiat laboriosam qui aut similique alias architecto consectetur.</span>
  <span>Sapiente quidem quaerat laborum illum saepe repellendus sequi temporibus fuga praesentium accusamus animi autem quae voluptatem explicabo voluptates cupiditate odio! Reprehenderit suscipit placeat tempore accusamus ad sunt nostrum quidem dolorem?</span>
  <span>Velit inventore eos eius nostrum cum minima odit assumenda tempora iusto nobis quo pariatur fugit cumque provident ipsa facilis sed nisi neque fugiat sit soluta esse praesentium sequi aut illum.</span>
  <span>Perferendis repudiandae deserunt error itaque totam vero voluptas. Nesciunt ipsum laborum reprehenderit neque aut qui ut eaque tenetur ea deserunt pariatur provident maiores in. Dolor nesciunt numquam amet maiores ipsam?</span>
  <span>Ducimus nostrum nemo asperiores doloremque quas eveniet beatae dolorum nulla ad ex nam molestias laborum! Asperiores deleniti amet qui aspernatur iste beatae nobis doloremque sapiente eveniet inventore eligendi quod placeat.</span></p>
  
  <div class="reveal"> 
    <img src="http://placekitten.com/g/900/1000" />
  </div>
  
    <h1>İkinci Başlık</h1>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos iste numquam officia ex aspernatur iure eos nihil ratione enim maxime assumenda recusandae culpa libero. Quia rerum iure assumenda ratione neque. <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis praesentium repellat quae dolor dolorum reprehenderit saepe id quam nesciunt aperiam temporibus ducimus fugiat laboriosam qui aut similique alias architecto consectetur.</span>
  <span>Sapiente quidem quaerat laborum illum saepe repellendus sequi temporibus fuga praesentium accusamus animi autem quae voluptatem explicabo voluptates cupiditate odio! Reprehenderit suscipit placeat tempore accusamus ad sunt nostrum quidem dolorem?</span>
  <span>Velit inventore eos eius nostrum cum minima odit assumenda tempora iusto nobis quo pariatur fugit cumque provident ipsa facilis sed nisi neque fugiat sit soluta esse praesentium sequi aut illum.</span>
  <span>Perferendis repudiandae deserunt error itaque totam vero voluptas. Nesciunt ipsum laborum reprehenderit neque aut qui ut eaque tenetur ea deserunt pariatur provident maiores in. Dolor nesciunt numquam amet maiores ipsam?</span>
  <span>Ducimus nostrum nemo asperiores doloremque quas eveniet beatae dolorum nulla ad ex nam molestias laborum! Asperiores deleniti amet qui aspernatur iste beatae nobis doloremque sapiente eveniet inventore eligendi quod placeat.</span></p>
  
  <div class="reveal"> 
    <img src="http://i55.tinypic.com/35012u1.jpg" />
  </div>    <h1>Üçüncü başlık</h1>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos iste numquam officia ex aspernatur iure eos nihil ratione enim maxime assumenda recusandae culpa libero. Quia rerum iure assumenda ratione neque. <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis praesentium repellat quae dolor dolorum reprehenderit saepe id quam nesciunt aperiam temporibus ducimus fugiat laboriosam qui aut similique alias architecto consectetur.</span>
  <span>Sapiente quidem quaerat laborum illum saepe repellendus sequi temporibus fuga praesentium accusamus animi autem quae voluptatem explicabo voluptates cupiditate odio! Reprehenderit suscipit placeat tempore accusamus ad sunt nostrum quidem dolorem?</span>
  <span>Velit inventore eos eius nostrum cum minima odit assumenda tempora iusto nobis quo pariatur fugit cumque provident ipsa facilis sed nisi neque fugiat sit soluta esse praesentium sequi aut illum.</span>
  <span>Perferendis repudiandae deserunt error itaque totam vero voluptas. Nesciunt ipsum laborum reprehenderit neque aut qui ut eaque tenetur ea deserunt pariatur provident maiores in. Dolor nesciunt numquam amet maiores ipsam?</span>
  <span>Ducimus nostrum nemo asperiores doloremque quas eveniet beatae dolorum nulla ad ex nam molestias laborum! Asperiores deleniti amet qui aspernatur iste beatae nobis doloremque sapiente eveniet inventore eligendi quod placeat.</span></p>
  
  <div class="reveal"> 
    <img src="http://placekitten.com/g/900/900" />
  </div>
</div>

.reveal{
  position:relative;
  background-position:50%;
  background-attachment:fixed;
  background-repeat:no-repeat;
  max-width: 100%;
  height:500px;  
}


.reveal img{
  max-width:100%;
}

body{ 
  margin:0; 
  padding:0;   
  font-family:"Helvetica Neue", sans-serif;
} 

.wrapper{
  margin:0 auto;
  padding:1em;
  max-width:900px;  
}

;(function($){
  var settings = {
    cssClass : 'item'
  };
  
  
  $.fn.scrollReveal = function(userSettings){    
    var $imgList = this,
           $head = $('head'),
           cache = new Array($imgList.length),
             css = '', 
           count = 0,
             opt = $.extend(userSettings, settings, {});
      
     
        $imgList.each(function(){
          var $r   = $(this),
              $img = $r.children('img'),
              src  = $img.attr('src'),
              sel  = opt.cssClass+"-"+count++;
          
          $img.hide();
          $r.addClass(sel);
          
          css += '.'+sel+"{background-image:url("+src+");}";
        });
        
        $head.append('<style>'+css+'</style>');
  }

})(jQuery);

console.timeStamp("Look here");
$('.reveal').scrollReveal();