Membuat layout paralaks, jikalau Anda masih kesulitan untuk memahami bagaimana cara kerja dan cara membuatnya, di sini Saya akan menjelaskannya dengan rinci mengenai bagaimana layout tersebut tercipta. Pada dasarnya, sebuah layout paralaks hanyalah elemen HTML dengan beberapa tumpukan layer di dalamnya, dimana setiap layer tersebut akan dianimasikan posisinya dengan kecepatan yang sama namun dengan jarak yang berbeda untuk membuat pengaruh tiga dimensi dikala layer-layer tersebut bergerak.
Membuat Latar Paralaks
Kita mulai dengan elemen HTML menyerupai ini:
<div id="parallax-wrapper" class="parallax-wrapper"> <div class="layer layer-1"></div> <div class="layer layer-2"></div> <div class="layer layer-3"></div> ... ... </div>Saya membuat sebuah elemen HTML sebagai kontainer dengan beberapa layer di dalamnya. Elemen utamanya ialah #parallax-wrapper. Elemen ini berfungsi sebagai wadah dari semua elemen paralaks di dalamnya. Sedangkan elemen-elemen .layer nantinya akan kita gunakan sebagai penampil latar. Kita akan memposisikan layer-layer tersebut menjadi bertumpukan layaknya tumpukan kaca. Makara kita memerlukan ini untuk mengatur dimensi paralaks yang kita buat:
.parallax-wrapper { border:1px solid black; height:200px; /* Tentukan tinggi area paralaks, ukuran lebar tidak begitu penting */ position:relative; /* Penting! Posisi otoriter pada elemen induk */ overflow:hidden; } /* Buat semua layer paralaks sebagai elemen absolut, sehingga tampilannya akan bertumpuk satu sama lainnya */ .parallax-wrapper .layer { position:absolute; top:0; right:0; bottom:0; left:0; /* set beberapa pengaturan latar di sini, sebelum kita mendefinisikan latar gambar secara sepihak pada masing-masing layer */ background-position:0 0; background-color:transparent; background-repeat:repeat-x; }Setelah itu, gambar-gambar sanggup diterapkan pada masing-masing layer:
.parallax-wrapper .layer-1 {background-image:url('img/parallax-bg-1.png')} .parallax-wrapper .layer-2 {background-image:url('img/parallax-bg-2.png')} .parallax-wrapper .layer-3 {background-image:url('img/parallax-bg-3.png')}Navigasi Paralaks
Navigasi ini dipakai untuk menggerakkan latar paralaks —dan konten di dalamnya tentunya, biar paralaks tidak hanya berfungsi sebagai hiasan. Navigasi terdiri dari elemen <span> dengan beberapa tautan di dalamnya. Anda sanggup membuatnya memakai elemen apa saja, tapi di sini Saya mencoba untuk membuatnya seminimalis mungkin:
<span id="parallax-navigation" class="parallax-navigation"> <a href="#1">1</a> <a href="#2">2</a> <a href="#3">3</a> <a href="#4">4</a> ... ... </span>CSS untuk navigasinya:
.parallax-navigation { display:block; height:30px; line-height:30px; position:relative; text-align:right; font-size:11px; font-weight:bold; } .parallax-navigation a { text-decoration:none; color:black; background-color:#eee; padding:5px 10px; } /* set latar dan warna yang berbeda untuk item navigasi yang sedang aktif */ .parallax-navigation a.active { background-color:#529834; color:white; }Selesai hingga di sini, kini kita akan mengerjakan fungsi dasar untuk menggerakkan layer:
Efek Paralaks
Beberapa mungkin akan membuat pengaruh paralaks dengan cara menganimasikan properti left pada elemen relatif untuk menggerakkan elemen ke kiri atau ke kanan. Tapi kekurangannya adalah, mengubah jarak left terlalu jauh akan membuat posisi layer berubah dan pada hasilnya akan menghilang dari pandangan jikalau jaraknya sudah terlalu jauh. Di sini Saya lebih menyarankan untuk menganimasikan posisi latar dibandingkan posisi layer itu sendiri, sehingga layer tidak akan bergerak, hanya latarnya saja yang bergerak.
Namun jQuery tidak mendukung properti animasi background-position dengan baik, jadi kita membutuhkan sebuah plugin untuk itu. Anda akan menemukan begitu banyak plugin jQuery yang berfungsi untuk menganimasikan posisi latar jikalau Anda mencarinya, dan Saya menentukan untuk memakai plugin animasi posisi latar dari Keith Wood. Saya tidak kenal dengan orang itu, tapi pluginnya elok ⇒ http://keith-wood.name/backgroundPos.html
<!-- Muat jQuery di awal --> <script src="js/jquery.js"></script> <!-- Sertakan plugin jQuery BackgroundPos --> <script src="js/jquery.backgroundpos.min.js"></script> <script> // Pekerjaan kita di sini... </script>Definisikan beberapa variabel untuk mempermudah kita dalam menyeleksi elemen dan sekaligus juga memperbaiki performa. Seperti biasa:
var $parallax = $('#parallax-wrapper'), $layer = $parallax.find('.layer'), $nav = $('#parallax-navigation');Setelah itu kita kumpulkan semua item navigasi dan layer di dalam paralaks. Kita akan cenderung memakai jQuery .each() di sini, alasannya ialah ini ialah cara yang paling gampang untuk mendapat indeks/urutan masing-masing elemen. Kita akan menganimasikan elemen dengan parameter dari indeks elemen (urutan elemen):
$nav.find('a').each(function() { // Saat pengguna mengeklik item navigasi... $(this).on("click", function() { var step = $(this).index(); // Dapatkan indeks dari setiap item navigasi // Kumpulkan layer... $layer.each(function() { // Definisikan jarak animasi latar pada setiap layer menurut indeksnya var distance = ($(this).index()+1) * 200; // Kalikan dengan 200 }); return false; }); }).first().addClass('active'); // Tambahkan kelas `active` pada item navigasi pertama sebagai awalanSetelah itu, buat fungsi untuk menambah dan melepas kelas active pada setiap item navigasi. Dulu Saya sudah pernah menuliskan kodenya di sini
$nav.find('a').each(function() { // Saat pengguna mengeklik item navigasi... $(this).on("click", function() { var step = $(this).index(); // Dapatkan indeks dari setiap item navigasi $nav.find('.active').removeClass('active'); // Singkirkan kelas `active` pada item navigasi $(this).addClass('active'); // Tambahkan kelas `active` pada item navigasi yang diklik // Kumpulkan layer... $layer.each(function() { // Definisikan jarak animasi latar pada setiap layer menurut indeksnya var distance = ($(this).index()+1) * 200; // Kalikan dengan 200 }); return false; }); }).first().addClass('active'); // Tambahkan kelas `active` pada item navigasi pertama sebagai awalanAnimasikan posisi latar pada masing-masing layer dengan parameter berupa urutan layer, sehingga jarak perubahan posisi akan berbeda-beda pada masing-masing layer (lebih tepatnya: jarak animasi akan meningkat menurut urutan layer):
$nav.find('a').each(function() { // Saat pengguna mengeklik item navigasi... $(this).on("click", function() { var step = $(this).index(); // Dapatkan indeks dari setiap item navigasi $nav.find('.active').removeClass('active'); // Singkirkan kelas `active` pada item navigasi $(this).addClass('active'); // Tambahkan kelas `active` pada item navigasi yang diklik // Kumpulkan layer... $layer.each(function() { // Definisikan jarak animasi latar pada setiap layer menurut indeksnya var distance = ($(this).index()+1) * 200; // Kalikan dengan 200 // Animasikan posisi latar $(this).stop().animate({backgroundPosition: '-' + (step*distance) + 'px 0px'}, 1500); }); return false; }); }).first().addClass('active'); // Tambahkan kelas `active` pada item navigasi pertama sebagai awalanDan beginilah hasil final sementara kita. Baru latarnya saja yang dianimasikan, belum ada konten:
Langkah Akhir: Menambahkan Konten
Animasi paralaks sudah berhasil dibuat, kini tinggal membuat konten paralaks saja. Setiap konten merupakan item yang sanggup Anda isi dengan goresan pena dan/atau gambar layaknya slideshow:
HTML
<div id="parallax-wrapper" class="parallax-wrapper"> <div class="layer layer-1"></div> <div class="layer layer-2"></div> <div class="layer layer-3"></div> <div class="box-item-wrapper"> <div class="box-item"> ... </div> <div class="box-item"> ... </div> <div class="box-item"> ... </div> <div class="box-item"> ... </div> ... ... </div> </div>CSS
.box-item-wrapper { position:relative; overflow:hidden; } .box-item-wrapper .box-item { float:left; /* posisikan `.box-item` sebagai layout mendatar */ width:100%; margin:7em 0; padding:1.5em 2em; }Fungsi selanjutnya ditujukan untuk mengeset ukuran kontainer item dan lebar item, serta menganimasikan kontainer item menuju ke kiri dengan jarak tertentu menurut indeks item navigasi. Pertama-tama kita atur ukuran lebar .box-item-wrapper dan .box-item:
var $window = $(window), $wrap = $parallax.find('.box-item-wrapper'), width, totalWidth; // Variabel kosong $window.on("resize", function() { width = $parallax.width(); // Mendapatkan lebar `#parallax-wrapper` totalWidth = width * $wrap.find('.box-item').length; // Lebar total = lebar `#parallax-wrapper` dikalikan jumlah `.box-item` // Set lebar `.box-item-wrapper` selebar `totalWidth` $wrap.width(totalWidth) // Set lebar `.box-item` selebar `#parallax-wrapper` .find('.box-item').width(width); }).trigger("resize");Saya menuliskan variabel width dan totalWidth kosong, kemudian menyatakan nilainya di dalam $window.on("resize", function() {}) biar lebar elemen sanggup diperbaharui setiap kali ukuran layar diubah. Saya juga menyatakan lebar elemen di dalam event tersebut.
Terakhir, gabungkan animasi properti left di dalam event klik item navigasi untuk menganimasikan posisi .box-item-wrapper:
$nav.find('a').each(function() { // Saat pengguna mengeklik item navigasi... $(this).on("click", function() { var step = $(this).index(); // Dapatkan indeks dari setiap item navigasi $nav.find('.active').removeClass('active'); // Singkirkan kelas `active` pada item navigasi $(this).addClass('active'); // Tambahkan kelas `active` pada item navigasi yang diklik // Kumpulkan layer... $layer.each(function() { // Definisikan jarak animasi latar pada setiap layer menurut indeksnya var distance = ($(this).index()+1) * 200; // Kalikan dengan 200 // Animasikan posisi latar $(this).stop().animate({backgroundPosition: '-' + (step*distance) + 'px 0px'}, 1500); }); // Animasikan `.box-item-wrapper` ke kiri untuk menggerakkan `.box-item` $wrap.stop().animate({'left': -(step*width)}, 1500); return false; }); }).first().addClass('active'); // Tambahkan kelas `active` pada item navigasi pertama sebagai awalanProduk Final
HTML
<div id="parallax-wrapper" class="parallax-wrapper"> <div class="layer layer-1"></div> <div class="layer layer-2"></div> <div class="layer layer-3"></div> <div class="box-item-wrapper"> <div class="box-item"> ... </div> <div class="box-item"> ... </div> <div class="box-item"> ... </div> <div class="box-item"> ... </div> </div> </div> <span id="parallax-navigation" class="parallax-navigation"> <a href="#1">1</a> <a href="#2">2</a> <a href="#3">3</a> <a href="#4">4</a> </span>CSS
.parallax-wrapper { border:1px solid black; height:200px; position:relative; overflow:hidden; } .parallax-wrapper .layer { position:absolute; top:0; right:0; bottom:0; left:0; background-position:0 0; background-color:transparent; background-repeat:repeat-x; } .parallax-wrapper .layer-1 {background-image:url('img/parallax-bg-1.png')} .parallax-wrapper .layer-2 {background-image:url('img/parallax-bg-2.png')} .parallax-wrapper .layer-3 {background-image:url('img/parallax-bg-3.png')} .box-item-wrapper { position:relative; overflow:hidden; } .box-item-wrapper .box-item { float:left; width:100%; margin:5em 0 0; padding:1.5em 2em; } .parallax-navigation { display:block; height:30px; line-height:30px; position:relative; text-align:right; font-size:11px; font-weight:bold; } .parallax-navigation a { text-decoration:none; color:black; background-color:#eee; padding:5px 10px; } .parallax-navigation a.active { background-color:#529834; color:white; }jQuery
(function($) { // Cache some elements var $window = $(window), $parallax = $('#parallax-wrapper'), $layer = $parallax.find('.layer'), $wrap = $parallax.find('.box-item-wrapper'), $nav = $('#parallax-navigation'), width, totalWidth; // Set the parallax content & item width in window resize ... // ... so we can be sure that when the window is resized, the size of the elements will be updated too $window.on("resize", function() { width = $parallax.width(); // get the parallax wrapper width totalWidth = width * $wrap.find('.box-item').length; // total width = (parallax wrapper width * box item length) $wrap.width(totalWidth).find('.box-item').outerWidth(width); }).trigger("resize"); // Collect all navigation item inside parallax navigation, then get their index to set the animation distance $nav.find('a').each(function() { // when user click on the navigation item $(this).on("click", function() { var step = $(this).index(); // get the index (0, 1, 2, 3, ...) $nav.find('.active').removeClass('active'); // remove the active class from navigation item $(this).addClass('active'); // add the active class to the clicked navigation item $layer.each(function() { // set the background-position per-animation distance of each layer ... // ... based on its index var distance = ($(this).index()+1) * 200; // multiplied by 200 $(this).stop().animate({backgroundPosition: '-' + (step*distance) + 'px 0px'}, 1500); // (jQuery background position plugin required) }); // also, animate the `.box-item-wrapper` to the left to move the `.box-item` $wrap.stop().animate({'left': -(step*width)}, 1500); return false; }); }).first().addClass('active'); // add active class to the first navigation item on initiation })(jQuery);