• Címkék:
  • kép
  • image
  • hover
  • egér
  • parallax

zLayer

Példa

A plugin működésének szemléltetéséhez mozgasd az egeret az alábbi kép fölött:

jQuery plugins - www.jquery-plugins.hu jQuery plugins - www.jquery-plugins.hu jQuery plugins - www.jquery-plugins.hu jQuery plugins - www.jquery-plugins.hu jQuery plugins - www.jquery-plugins.hu jQuery plugins - www.jquery-plugins.hu

Deklaráció

        $(document).ready(function(){
          $('.background').zlayer({ mass: 15, canvas: '#pelda' });
          $('.soldier1').zlayer({ mass: 8, force: 'push', canvas: '#pelda', rest: { rate: 700, method: 'easeOutQuad' } });
          $('.soldier2').zlayer({ mass: 11, force: 'push', canvas: '#pelda', rest: { rate: 700, method: 'easeOutQuad' } });
          $('.soldier3').zlayer({ mass: 13, force: 'push', canvas: '#pelda', rest: { rate: 700, method: 'easeOutQuad' } });
          $('.soldier4').zlayer({ mass: 15, force: 'push', canvas: '#pelda', rest: { rate: 700, method: 'easeOutQuad' } });
          $('.logoBf').zlayer({ mass: 6, force: 'push', canvas: '#pelda', rest: { rate: 700, method: 'easeOutQuad' } });
        });
      

HTML kód

        <div id="pelda">
          <img src="images/img1.jpg" class="background" width="924" height="600" alt="" />
          <img src="images/img2.png" class="logoBf" width="924" height="520" alt="" />
          <img src="images/img4.png" class="soldier1" width="924" height="520" alt="" />
          <img src="images/img6.png" class="soldier2" width="924" height="520" alt="" />
          <img src="images/img5.png" class="soldier3" width="924" height="520" alt="" />
          <img src="images/img3.png" class="soldier4" width="924" height="520" alt="" />
        </div>
      

CSS

        #pelda { width: 594px; height: 520px; border: 1px #ccc solid; position: relative; overflow: hidden }
        .background { margin-left: -80px; margin-top: -40px; z-index: 1; position: absolute }
        .logoBf {z-index: 6; position: absolute }
        .soldier1 {z-index: 5; position: absolute; margin-left: -200px; margin-top: 65px }
        .soldier2 {z-index: 4; position: absolute; margin-left: -150px; margin-top: 85px }
        .soldier3 {z-index: 3; position: absolute; margin-left: -150px; margin-top: 85px }
        .soldier4 {z-index: 2; position: absolute; margin-left: -230px; margin-top: 90px }
      

« bezár