Son zamanlarda  bu tarz bir çok örnek ve uygulama hazırlandı bazı geliştiriciler tarafından. Genel olarak hepsini mouse ile hareket eden  sayfa, banner,  arka plan diye ararız internette. Hepsinin genel adı Parallax  diye geçiyor. Parallax  diye arattırdığınızda bir çok eklenti bulabilirsiniz. jQuery Plax çalışması da  bu tarz örnekler hazırlamanız için Cameron McEfee  tarafından geliştirilmiş. Mouse ile hareket eden 3 boyutlu web sayfaları, 3 boyutlu banner yada resimler  hazırlayabilmek mümkün.

Bildiğiniz üzere png formatındaki resimlerin belirli yerlerini kesip bu alanların arkaplanının boş gözükmesini sağlayabiliyoruz. Plax uygulaması arka arkaya sıralanmış olan png formatında düzenlenmiş resimlerin  mouseye göre hareket etmesini sağlar. Plax’ın tek yaptığı da  budur ve asıl zor iş düzgün, uyumlu resimler hazırlamak. Şu an için aklıma gelen bir kaç tane örnek var  mesela dağlar, ağaçlar ve  yolları kesip png formatında kaydettikten sonra 3 boyutlu bir manzara oluşturabilirsiniz. Başlık için eklemiş olduğum resme dikkat ederseniz 3 tane yuvarlak resimden oluşuyor. Ortada büyük bir daire, önde ve arkada da küçük daire  bulunuyor. Bu daireler mouseye  göre sayfada hareket ediyorlar.

Kullanım

• Head etiketleri arasına eklemeniz gereken bölümler.

Js dosya adresleri : 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="../js/plax.js"></script>

Css :

    <style type="text/css">
      * {
        margin: 0px;
        padding: 0px;
      }
      body {
        background: #ebeae6 url(img/body_bg.png) top left repeat;
        position: relative;
      }
      div#shell {
        display: block;
        position: relative;
        margin: 100px auto;
        width: 318px;
        height: 318px;
      }
      div#shell{
        z-index: 1;
      }
      img#plax-logo {
        position: absolute;
        top: 125px;
        left: 90px;
        z-index: 3;
      }
      img#plax-sphere-1 {
        position: absolute;
        z-index: 4;
        top: 189px;
        left: 191px;
      }
      img#plax-sphere-2 {
        position: absolute;
        z-index: 2;
        top: 49px;
        left: 53px;
      }
      img#plax-sphere-3 {
        position: absolute;
        top: 35px;
        left: 32px;
        z-index: 1;
      }
    </style>

JavaScript : 

  <script type="text/javascript">
      $(document).ready(function () {
        $('#shell img').plaxify()
        $.plax.enable()
      })
    </script>

•  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

    <div id="shell">
      <img src="img/plax_logo.png" width="136" height="70" data-xrange="20" data-yrange="20" id="plax-logo"/>
      <img src="img/plax_sphere_small.png" width="93" height="92" data-xrange="40" data-yrange="40" id="plax-sphere-1"/>
      <img src="img/plax_sphere_large.png" width="215" height="215" data-xrange="10" data-yrange="10" id="plax-sphere-2"/>
      <img src="img/plax_sphere_small.png" width="93" height="92" data-xrange="40" data-yrange="40" data-invert="true" id="plax-sphere-3"/>
    </div>