Cara Membuat Smooth Parallax Scrolling Effect

June 12, 2018 - #blog #web

Cara Membuat Smooth Parallax Scrolling Effect

Baru mendengar istilah ini?

Parallax Scrolling adalah sebuah trend baru pada website modern dimana konten background (gambar) bergerak mengikuti dengan kecepatan sama sesuai saat men-scrolling. Bisa dilakukan dengan CSS. Jika kamu orang baru mendengar istilah atau belum tau dasarnya. Berikut contohnya yang telah disiapkan oleh w3schools
www.w3schools.com/howto/tryhow_css_parallax_demo.htm

Ingin baca tutorial dari sana ? (yang pasti sih, English haha)
www.w3schools.com/howto/howto_css_parallax.asp

Jika sudah melihat demo yang diberikan w3schools. Saya ingin mencoba membuat tutorialnya sendiri. Sebenarnya sama saja yang pasti dengan tutorial di w3schools. Karena HTML CSS itu semua sama. Tapi jika kalian ingin ada penjelasan (dari saya, hehe), bagus. Simak berikut ini

Pertama buatlah elemen baru untuk background dengan lebar 100% dan tinggi juga 100%.
Juga elemen baru untuk konten. Dan html, body juga dibuat dengan tinggi 100%, agar elemen untuk background dengan posisi relatif bisa dibuat tinggi dengan 100%.
Tinggi tidak harus 100%, kamu bisa menambahkan tinggi secara spesifik dengan "px", contoh 300px, dsb.

Berikut CSS nya:

html, body {
      height: 100%;
}
.gambar1{
      width: 100%;
      height: 100%;
      background-image: url(link-gambar.jpg);
      background-size: cover;
      /* Agar tampilan gambar tetap proposional dengan ukuran layar */

      background-position: center;
      /* Posisi gambar ditengah */

      background-attachment: fixed;
       /* Ini lah yang membuat gambar bergerak saat men-scroll */

      background-repeat: no-repeat;
      /* Cocok untuk gambar besar agar tidak ada perulangan */
}

.konten1{
      width:100%;
      padding: 50px 15px;
      /* Membuat tulisan berada ditengah elemen konten dan efek tinggi
      otomatis.*/
}

Catatan: Parallax Scrolling tidak selalu bekerja pada perangat Mobile/Smartphone. Bagaimanapun, kamu bisa mematikan efeknya dengan cara media queries

@media screen and (max-width:1024px) {
      .gambar1{
            background-attachment: scroll;
/* Mematikan efek dengan, layar yang dibawah resolusi 1024px */
      }
}

Hasilnya akan seperti ini, setelah pemanggilan dengan HTML.

See the Pen YpBOxe by Raka Audira Fauzi (@rakadoank) on CodePen.

Kamu bisa melakukannya secara online di link tutorial w3schools tadi. Dan klik "Try It Yourself » . Atau langsung ke sini
www.w3schools.com/howto/tryit.asp?filename=tryhow_css_parallax_percent
Tambahkan lagi dan coba-coba untuk gambar kedua dan seterusnya.

Smooth Parallax Effect

Selanjutnya, sesuai judul.
Tapi tidak disarankan buat yang baru belajar dengan HTML & CSS. Karena dibagian ini, akan bermain-main dengan jQuery.

So, here we go.
Bagaimana dengan bagian Smooth Parallax? Contohnya seperti di Google Drive
Cobalah scroll mouse mu. Perhatikan efek parallaxnya. So smooth?
Ini juga seperti yang saya lakukan di bagian atas halaman ini.

Kali ini, logikanya saat men-scrolling, property yang akan dimainkan adalah background-position. Kita tidak memerlukan lagi dengan background-attachment.

Defaultnya adalah background-position: 50% 50%. Sama saja artinya dengan background-position: center. Namun kita butuh secara angka agar bisa di edit spesifik.
50% pertama adalah secara horizontal. Dan 50% kedua adalah secara vertikal.
Logikanya 50% untuk vertikal saat di-scroll akan berkurang sedikit demi sedikit setiap scroll kebawah. Tentunya kita butuh kalkulasi yang tepat dan sesuai selera. Karena jika kalkulasi atau perhitungannya salah, memang efeknya jalan, hanya saja gak smooth, gambar bisa saja bergerak terlalu pelan masih kaku, atau bisa juga terlalu cepat bahkan bisa salah arah. Untuk soal kalkulasinya saya pribadi juga masih newbie dengan hal ini agar tetap responsive. Saya termasuk newbie dengan hal jQuery. Tapi saya coba membuatnya, yang pasti secara dasarnya.
Pastikan kamu telah membuat elemen nya terlebih dahulu.

<script type='text/javascript'>
$(document).ready(function() {
  $(window).scroll(function() {
    var scr = $(document).scrollTop() / 10; // Angka 10 lebih kencang, 100 = tidak bergerak
    $(".gambar1").css('background-position', '50% '+scr+'%');
    // Selector yang dipilih .gambar1 , sesuaikan dengan css yang kamu buat
  });
});
</script>

Hasilnya akan seperti ini:

Parallax Scrolling

Parallax Scrolling adalah sebuah trend baru pada website modern dimana konten background (gambar) bergerak mengikuti dengan kecepatan sama sesuai saat men-scrolling. Bisa dilakukan dengan CSS. Nascetur per nec posuere turpis, lectus nec libero turpis nunc at, sed posuere mollis ullamcorper libero ante lectus, blandit pellentesque a, magna turpis est sapien duis blandit dignissim. Viverra interdum mi magna mi, morbi sociis. Condimentum dui ipsum consequat morbi, curabitur aliquam pede, nullam vitae eu placerat eget et vehicula.

Lanjutkan dengan menambahkan gambarnya lagi di bawah dan beberapa konten.
Untuk gambar kedua, coba kalkulasi ulang. Saya masih newbie soal jQuery.

Karena gambar kedua bukan dari atas, jadi saat scroll sudah dihitung berapa posisi backgroundnya. Akibatnya gambar bisa jadi kelewatan ke atas.

Sepertinya artikel ini kurang dari kata cukup sempurna. Karena artikel ini cuman buat dasar saja. Semoga mengerti dan bermanfaat.