Membangun Layout Paralaks dengan JQuery

Membuat layout paralaks, jika 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 menciptakan efek tiga dimensi saat layer-layer tersebut bergerak.

Membuat Latar Paralaks

Kita mulai dengan elemen HTML seperti 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 adalah #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. Jadi 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 absolut 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 bisa 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 digunakan untuk menggerakkan latar paralaks —dan konten di dalamnya tentunya, agar paralaks tidak hanya berfungsi sebagai hiasan. Navigasi terdiri dari elemen <span> dengan beberapa tautan di dalamnya. Anda bisa membuatnya menggunakan 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 sampai di sini, sekarang kita akan mengerjakan fungsi dasar untuk menggerakkan layer:

Lihat Demo

Efek Paralaks

Beberapa mungkin akan membuat efek 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 akhirnya akan menghilang dari pandangan jika 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 jika Anda mencarinya, dan Saya memilih untuk menggunakan plugin animasi posisi latar dari Keith Wood. Saya tidak kenal dengan orang itu, tapi pluginnya bagus ⇒ 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 menggunakan jQuery .each() di sini, karena ini adalah cara yang paling mudah untuk mendapatkan 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 berdasarkan indeksnya
            var distance = ($(this).index()+1) * 200; // Kalikan dengan 200
        });
        return false;
    });
}).first().addClass('active'); // Tambahkan kelas `active` pada item navigasi pertama sebagai awalan

Setelah 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 berdasarkan indeksnya
            var distance = ($(this).index()+1) * 200; // Kalikan dengan 200
        });
        return false;
    });
}).first().addClass('active'); // Tambahkan kelas `active` pada item navigasi pertama sebagai awalan

Animasikan 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 berdasarkan 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 berdasarkan 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 awalan

Dan beginilah hasil akhir sementara kita. Baru latarnya saja yang dianimasikan, belum ada konten:

Lihat Demo

Langkah Akhir: Menambahkan Konten

Animasi paralaks sudah berhasil dibuat, sekarang tinggal membuat konten paralaks saja. Setiap konten merupakan item yang bisa Anda isi dengan tulisan 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 berdasarkan 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() {}) agar lebar elemen bisa 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 berdasarkan 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 awalan

---

Produk 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);

Demo

Lihat Demo Unduh Semua Demo Bonus: Paralaks Orientasi Vertikal