Parallax Effect With JQuery

http://alikarahisar.blogspot.com

by Ali Karahisar

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <div style="text-align:center; width:100%; height:100%;">
    <div id="parallaxEfekti" style="background: url('http://pngimg.com/upload/water_PNG3319.png'); background-repeat: no-repeat; width: 100%; height: 100%;">
      <div>
        <h1>Bu yazı burada sabit dururken arkaplan oynayacak. İşte bunun adı parallax.</h1><br/>
        <h2>
        Bu örnek <a href="http://alikarahisar.blogspot.com">Ali Karahisar </a> tarafından blog makalesi için yapılmıştır.
        </h2>
      </div>
    </div>
  </div>

JavaScript

$(document).ready(function(){
  $('#parallaxEfekti').mousemove(function(e){
      $(this).css('background-position',''+e.pageX/10+'px '+e.pageY/10+'px');
      });
    });