Tutorial Parallax Scrolling Background Menggunakan Parallax.js

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~

5 Comments

  1. Terima kasih untuk infonya Gan.
    Jika Anda membutuhkan Driver Printer, kunjungi website http://www.agendriver.com

  2. kalau dipasang diweb mp3 kaya
    http://www.musikbarat.com
    gimana caranya?

    • Ini saya buat bukan untuk digunakan buat orang awam, tapi untuk media belajar.. Jadi saya kira tidak layak untuk digunakan dan penggunaannya pun harus manual.. butuh pemahaman koding lebih kalo buat awam

  3. dimana kita harus menempatkan script ($(“#parallax-block-1”).parallax(“50%”,0.1);) ??????

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *