Parallax, ya apa itu parallax ?
Menurut wikipedia, Parallax adalah perubahan kedudukan sudut dari dua titik diam, relatif satu sama lain, sebagaimana yang diamati oleh seorang pengamat yang bergerak. Secara sederhana, paralaks merupakan pergeseran yang tampak dari suatu objek (titik 1) terhadap latar belakang (titik 2) yang disebabkan oleh perubahan posisi pengamat.Baik, itu adalah pengertian parallax menurut wikipedia.
Jika kita melihat kutipan diatas, kita menemukan sebuah definisi singkat seperti yang saya tandai dengan tulisan cetak miring, iya saya harap melalui definisi singkat parallax tersebut kawan mendapatkan gambaran tentang effect parallax yang akan kita buat kali ini.
Parallax ini menurut saya adalah effect sederhana yang luar biasa keren, dengan parallax kita bisa membuat sebuah animasi saat scrolling, membuat sebuah animasi pada satu object yang akan bekerja pada saat scrolling itu sangat mungkin sekali dengan parallax. Jika masih penasaran apa itu parallax, cek demo berikut.
Bagaimana, keren bukan ?
Itu hanyalah satu dari sekian banyak effect yang bisa kita buat, dan itu adalah dasar parallalax yang saya buat supaya kawan dapat mengembangkan.
Effect parallax ini work dan kompatibel pada blogger pastinya, karena saya sudah menggunakannya pada blog saya yang lain, silahkan cek disini.
Praktek
Seperti yang tertulis pada judul, Membuat Effect Parallax Dengan Jquery Sederhana, ya tidak ada yang sulit disini. Letakkan jQuery ini diatas </body>
<script>
$(window).scroll(function(){
var jarak=$(this).scrollTop();
$('.UBAHCLASS-INI').css ({
transform : 'translate(0px,'+ jarak/1.3 +'%) rotate('+ jarak/5 +'deg)'
});
})
</script>
Nah, tidaklah sepanjang yang kawan pikirkan bukan ?. Oh ya, pastikan kawan sudah memasang library jQuery yah supaya effect ini dapat berjalan.
Didalam jquery sangat jelas kita menjalankan sebuah CSS pada object, yaitu transform translate yang memiliki fungsi menggeser secara vertikal & horizontal object, dan transform rotate yang memiliki fungsi memutar object dengan satuan deg. Dengan penghitungan yang dinamis yang mengacu pada angka yang dihasilkan variabel, transform dapat terlihat hidup. Sebagai informasi, kita sudah membuat sebuah variabel bernama jarak.
Penyesuaian
Untuk penyesuaian, silahkan ubah class diatas dengan class atau ID object yang ingin dibuat effect parallax.Oke itu saja, saya rasa cukup jelas
