Di zaman yang teknologinya semakin pesat ini membuat banyak sekali kontribusi terhadap kemajuan apapun yang dianggap bermanfaat. Mewujudkan sesuatu yang kadang kita pikir cukup sulit untuk diterapkan. Seperti pada pembahasan kita kali ini yaitu mengenai Parallax Effect. Dengan menggunakannya kita seolah melihat fenoma kehidupan nyata di dalam dunia maya. Konsepnya memang membuat website kita agar lebih interaktif dan realistis sehingga para pengunjung menjadi nyaman melihatnya.
Pengertian Parallax Effect adalah sebuah efek atau fenomena hasil dari perspektif pada ruang 3 dimensi ketika diberi pergerakan. Untuk lebih memahami, kita bisa membuat contoh kasus sederhana. Silahkan letakkan 3 buah objek atau lebih. Susun secara berurutan kebelakang di mana nanti akan ada satu objek di paling depan, tengah dan juga belakang. Coba lihat objek-objek tersebut sembari kalian melakukan pergerakan ke kiri dan ke kanan. Terlihat bahwa pegerakan objek paling depan lebih cepat dari pada objek yang paling belakang, begitu bukan? Fenomana seperti ini nanti akan kita terapkan ke dalam sebuah website yang akan memberi rasa realistis dengan efek 3 dimensi.
Ada beberapa contoh website yang bisa kita jadikan sebagai refrensi untuk membuat Parallax Effect ini diantaranya.
- Parallax Fixed Background, Scrolling Body
contoh: elefant-art.com - Landing Elements
contoh: www.apple.com/macbook/ - Slow Elements
contoh: jason-kenny.com - JIB Effect
contoh: www.firewatchgame.com - Zoom Effect
contoh: www.nytimes.com/projects/2013/tomato-can-blues/?hp - Mouse Movement
contoh: www.madwell.com - Horizontal Scrolling
contoh: hotdot.pro
Silahkan kalian kunjungi website tersebut dan amati cara kerja Parallax Effectnya. Pertanyaannya sekarang, gimana cara membuatnya? Oke kita akan masuk pada inti dari pembahasan kita saat ini. Sebagai langkah pertama, kita akan bersama-sama mencoba membuat Parallax effect sederhana sebagai gambaran dasar dari cara kerjanya. Lets code!!!
Siapkan text editor kalian. Kita akan mecoba dari yang paling sederhana dulu yaitu Parallax Fixed Background, Scrolling Body. Satu lagi, paling tidak kalian telah menguasai perintah-perintah dasar html dan css agar tidak terlalu kesulitan mengikuti materinya. Selanjutnya, buatlah file html dengan code seperti di bawah ini.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Parallax Effect </title>
<style>
body, html {
height: 100%;
}
.parallax1 {
/* masukkan gambar di sini */
background-image: url('gambar1.jpg');
height: 100%;
/* membuat parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.parallax2 {
/* masukkan gambar di sini */
background-image: url('gambar2.jpg');
height: 100%;
/* membuat parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.parallax3 {
/* masukkan gambar di sini */
background-image: url('gambar3.jpg');
height: 100%;
/* membuat parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<!-- ini untuk menampilkan parallax -->
<div class="parallax1"></div>
<div style="height:800px;background-color:red;font-size:36px;text-align:center">
Silahkan scroll ke atas dan kebawah pada halaman ini untuk melihat efek parallaxnya.
Div ini hanya untuk mengenable scrolling.
Tip: Silahkan coba hapus properti background-attachment untuk menghilangkan efek scrollnya.
</div>
<!-- ini untuk menampilkan parallax -->
<div class="parallax2"></div>
<div style="height:700px;background-color:blue;font-size:36px;text-align:center">
Silahkan scroll ke atas dan kebawah pada halaman ini untuk melihat efek parallaxnya.
Div ini hanya untuk mengenable scrolling.
Tip: Silahkan coba hapus properti background-attachment untuk menghilangkan efek scrollnya.
</div>
<!-- ini untuk menampilkan parallax -->
<div class="parallax3"></div>
</body>
</html>
Isi gambar di atas sesuai gambar yang kalian miliki, buka di browser lalu lihat hasilnya. Pada efek Parallax ini, pengaruh penting terletak pada properti css yaitu background-attachment. Coba saja kalian hapus jika ingin mengetahui perbedaannya.
Sudah selesai effect yang pertama, namun rasanya efek 3 dimensinya masih belum terasa sehingga realistisnya kurang dapat. Selanjutnya mari kita buat bersama lagi Parallax Effect, kali ini dengan bantuan jQuery. Tidak masalah meskipun kalian kurang paham tentang javascript coba saja pahami. Kita coba yang sederhana dulu biar tidak terlalu rumit. Lets code!!
Pertama kita download dulu file jQuerynya di sini, lalu hubungkan dengan script htmlnya. Selanjutnya seperti biasa buat file html baru, lalu isikan kode di bawah ini.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Parallax Effect </title>
<style>
body{
width: 600px;
height: 1800px;
margin: auto;
text-align: center;
}
h1{
font-size: 3em;
margin-top: 65px;
}
.gambar{
/*masukkan gambar*/
background-image: url('gambar.jpg');
width: 200px;
height: 200px;
margin: auto;
}
</style>
</head>
<body>
<h1> Hello World!! </h1>
<div class="gambar"></div>
<p> ini adalah paragraf ini adalah paragraf ini adalah paragraf ini adalah paragraf ini adalah paragraf ini adalah paragraf ini adalah paragraf ini adalah paragraf ini adalah paragraf ini adalah paragraf ini adalah paragraf ini adalah paragraf ini adalah paragraf. </p>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(window).scroll(function(){
var winscroll = $(this).scrollTop();
// membuat effect parallax dengan memberikan properti css transform pada h1
$('h1').css({
'transform' : 'translate(0px, '+ winscroll +'%)'
});
// membuat effect parallax dengan memberikan properti css transform pada class gambar
$('.gambar').css({
'transform' : 'translate(0px, '+ winscroll/9 +'%)'
});
});
</script>
</body>
</html>
Sekarang coba kalian open di browser dan lihat hasilnya. Kita dapat melihat bahwa masing-masing object mempunyai pergerakan yang berbeda. Sama seperti kasus yang kita umpamakan mengenai Parallax Effect di awal. Efeknya akan semakin terasa ketika kita scroll back ke atas.
Kali ini peran yang sangat penting ada pada javascriptnya. Kita menambah properti css baru pada tag h1 dan div class gambar sekaligus memodifikasinya mengunakan javascript. Dengan memainkan properti css transform kita bisa menghasilkan effect parallax sederhana yang bisa kita lihat seperti 3 dimensi sehingga kali ini mulai kita dapatkan efek realistisnya seperti kasus pada dunia nyata.
Kita juga bisa memodifikasi kecepatan masing-masing objectnya ketika discroll yang terletak pada variable winscroll. Untuk membuatnya lebih lambat kita bisa kecilkan angkanya begitu juga sebaliknya. Contoh pada class gambar, kita mau objectnya berjalan lebih lambat lagi. Ubah angka 9 jadi misalkan 7,6,5 dan seterusnya. Usahakan atur pergerakannya sebaik mungkin agar efek Parallaxnya terasa.
Ini baru contoh sederhana membuat efek Parallax. Silahkan kalian coba modifikasi dan kembangkan atau terapkan langsung pada website kalian masing-masing. Gunakan website yang telah disebutkan di atas tadi sebagai refrensi. Pasti akan jauh lebih bagus lagi hasilnya.
Oke, sekian dulu tutorialnya semoga bermanfaat. Jika ada kebingungan bisa ditanyakan di kolom komentar. Wassalam.