Masukkan Email anda untuk berlangganan Devaradise. Gratis!

Tutorial Parallax Scrolling Background Menggunakan Parallax.js

Parallax Background Scrolling

Salah satu tren web design masa kini adalah desain web dengan background parallax scrolling. Background dengan gaya parallax ini membuat web terlihat keren, modern dan smooth (lembut) ketika di scroll.Cars 3 2017 streaming

Saat ini, ada banyak plugin dan cara untuk membuat background web bergaya parallax. Namun, kebanyakan membutuhkan pemahaman kode yang cukup sulit karena biasanya efek-efek parallax yang dihasilkan juga sangat kompleks.


Pada posting ini, saya akan menjelaskan cara sederhana dan mudah membuat halaman dengan background parallax scrolling. Dengan menggunakan plugin parallax.js yang dikembangkan oleh Ian Lunn. Yang harus kita lakukan hanya tinggal menambahkan beberapa baris kode saja.

Parallax Background Scrolling

Sebelum saya jelaskan tahap-tahap membuat parallax background, silahkan lihat demonya dan download source code-nya lewat link di atas.

Dalam file yang anda download, terdapat file jquery.min.js dan jquery.parallax-1.1.3.js. Untuk library parallax.js versi lengkapnya, anda bisa download di sini https://github.com/IanLunn/jQuery-Parallax.

Langkah 1 – Memanggil Jquery dan Parallax.js

Pertama-tama, sertakan library jquery dan parallax.js pada halaman dengan background parallax scrolling yang akan anda buat. Tempatkan secara berurutan di dalam tag <head> atau di bagian bawah sebelum tag <body>. Jika, library jquery sudah disertakan sebelumnya, maka tidak usah disertakan lagi.

<script type=”text/javascript” src=”path/to/jquery.min.js”></script>
<script type=”text/javascript” src=”path/to/jquery.parallax-1.1.3.js”></script>

Langkah 2 – Struktur Markup HTML

Buat markup HTML untuk tiap bagian yang memiliki background bergaya parallax. Dalam tutorial ini, markup yang saya buat adalah sebagai berikut.

<div class=”parallax-block” id=”parallax-block-1″>
<div class=”bg-transparent”>
<div class=”container”>
… <!– Konten di sini –>
</div>
</div>
</div>

Tag div dengan class ‘parallax-block’ dan id ‘parallax-block-1’ adalah tag div utama. Nantinya, background parallax akan dikenakan pada div ini. Sedangkan ‘bg-transparent’ adalah lapisan/layer gelap transparan yang melapisi background.

Langkah 3 – Styling CSS

Dalam teknik ini, CSS berperan cukup penting. Kode CSS yang tidak sesuai akan menyebabkan tidak berjalannya parallax scrolling. Plugin Jquery parallax.js tidak bisa berdiri sendiri tanpa kode CSS di bawah ini.

.parallax-block {
position: relative;
overflow: hidden;
background-position:100% 0;
background-repeat: no-repeat;
background-attachment: fixed;
}
.parallax-block .bg-transparent {
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgba(0,0,0,0.5);
}
.container {
position: relative;
overflow: hidden;
padding:100px 0;
}

Lalu, untuk menentukan gambar backgroundnya, cukup tambahkan properti ‘background-image’ pada div utama. Contohnya seperti di bawah.

#parallax-block-1 {
background-image: url(image.jpg) ;
}

Langkah 4 – Aktifkan parallax Scrolling

Nah, sekarang saatnya mengaktifkan efek parallax scrolling dengan menggunakan fungsi .parallax() dari plugin parallax.js. Contoh penulisan jquerynya ada di bawah ini.

$(“#parallax-block-1”).parallax(“50%”,0.1);

‘50%’ adalah nilai x-position untuk background, atau menggantikan ‘background-position: 50% 0%;’. Sedangkan ‘0.1’ merupakan kecepatan scrolling untuk background. Ini berarti kecepatan scrollingnya 1/10 dari kecepatan normal.

Selesai. Itu saja. Mudah bukan ?

Tentunya, ini hanyalah salah satu dari desain parallax dasar. Kedepannya anda bisa mengembangkan lebih kompleks lagi dengan berbagai library jquery lainnya.

Cukup sekian dari saya. Selamat mencoba!

Semoga Bermanfaat

~Muhammad Syakirurohman~

8 thoughts on “Tutorial Parallax Scrolling Background Menggunakan Parallax.js

Tinggalkan Balasan