Terbiasa memakai plugin paralax dari luar untuk membuat pengaruh paralax? Jangan terlalu bergantung dengan itu, terutama jikalau proyek yang sedang Anda kerjakan hanya berupa proyek pembuatan pengaruh paralaks kecil, contohnya menyerupai di header situs GitHub atau sekedar ingin membuat pengaruh tiga dimensi dengan JavaScript. Saya sudah membuat versi plugin yang paling sederhana. Semoga bermanfaat:
// Simple parallax plugin by Taufik Nurrohman // https://plus.google.com/108949996304093815163/about (function($) { $.fn.paralax = function(container, speed) { var $window = container, t = speed || 1, $object = this; return $window.on("mousemove resize", function(e) { $object.css({ top: -(e.pageY-$window.height()/2-$window.offset().top)*t+$window.height()/2, left: -(e.pageX-$window.width()/2-$window.offset().left)*t+$window.width()/2 }); }); }; })(jQuery);Penggunaan
Setiap elemen paralaks setidaknya memerlukan satu buah elemen kontainer dan beberapa layer di dalamnya:
<div id="container"> <div id="layer-1">Konten...</div> <div id="layer-2">Konten...</div> <div id="layer-3">Konten...</div> </div>Untuk membuat pengaruh yang bagus, usahakan semoga layer-layer yang berada di dalamnya mempunyai ukuran yang lebih luas dibandingkan kontainernya, dan setiap layer setidaknya harus mempunyai deklarasi CSS posisi relatif atau absolut. Posisikan layer-layer di dalamnya semoga sempurna berada di tengah kontainer. Caranya? Pelajari di sini.
#container { display:block; width:80%; height:100%; background-color:black; margin:0 auto; position:relative; overflow:hidden; } /* Posisi elemen di tengah secara vertikal dan horizontal: pelajari di sini! */ #container div { width:1000px; height:1000px; position:absolute; top:50%; left:50%; margin-top:-500px; margin-left:-500px; text-align:center; cursor:default; } #layer-1 {} #layer-2 {} #layer-3 {}Eksekusi Plugin
Seleksi setiap layer di dalam kontainer dengan jQuery kemudian terapkan method .paralax(). Tentukan kontainer dan kecepatannya di dalam:
// $(layer).paralax($(container), speed); $('#layer-1').paralax($('#container'), 1);Kecepatan normalnya ialah 1. Perbesar nilainya untuk mempercepat gerakan. Sebagai contoh, di sini Saya menerapkan beberapa layer dengan kecepatan yang berbeda-beda untuk membuat pengaruh tiga dimensi:
var area = $('#container'); $('#layer-1').paralax(area, 1); $('#layer-2').paralax(area, 2); $('#layer-3').paralax(area, 3);Update : LOL. It should be “parallax”, not “paralax” :D