Arkadaşlar merhaba;
Şöyle bir site yapalım bugün: Demo Sayfa
Parallaks Nedir?: durağan nesnelerin farklı zamanda gözlenen doğrultuda ilerlemesi ile meydana gelen değişimlerdir.
İnternette Parallax diye arattığınızda çılgınlar gibi örnek bulabileceğiniz bir konu.
Boş bir html dosyasına aşağıdaki kod parçalarını sırasıyla yapıştırın ve img dosyalarınızı yerlerine koyun.
CSS KODLARI:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<style> body { padding: 0; margin: 0; overflow: hidden; } .arkaplan { position: absolute; top: -10%; left: -10%; width: 120%; height: 120%; z-index: 1; /*Görselin katman numarası 1*/ font-family: Courier; } .bulut { position: absolute; top: 0; left: 0; width: auto; height: auto; z-index: 2; /*Görselin katman numarası 2 yanı 1'in üstüne gelecek demek*/ opacity: 0.8; } </style> |
HTML KODLARI:
1 2 3 4 5 6 7 8 |
<body> <img src="images/background.jpg" alt="New York" class="arkaplan"> <img src="images/1.png" alt="Clouds" class="bulut bulut1"> <img src="images/2.png" alt="Clouds" class="bulut bulut2"> <img src="images/3.png" alt="Clouds" class="bulut bulut3"> </body> |
JAVASCRİPT KODLARI:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <!--/*TweenMax' asıl meseleyi sağlayan hazır Jquery */--> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script> <script> $( document ).mousemove( function( e ) { /*-30 10 gibi değerle farenin aksi yönünde giden görselin gitme mesafesini belirler. */ $( '.arkaplan' ).parallax( -30, e ); $( '.bulut1' ) .parallax( 10, e ); $( '.bulut2' ) .parallax( 20, e ); $( '.bulut3' ) .parallax( 70, e ); }); /*Aşağıdaki değerlerle oynamayın mousen kordinatları ve zıt yönde hareket ettirmeyle alakalı*/ $.fn.parallax = function ( resistance, mouse ) { $el = $( this ); TweenLite.to( $el, 0.2, { x : -(( mouse.clientX - (window.innerWidth/2) ) / resistance ), y : -(( mouse.clientY - (window.innerHeight/2) ) / resistance ) }); }; </script> |
kardeş bu lisanslımı
Ücretsiz açık kaynak. Lisans gerektirmez.
Teşekkür ederim güzel bir eklenti olmuş.
WORDPRESS üzerinde kullanmak mümkün mü ?