Membuat Background Parallax Scrolling dengan JQuery

Membuat Background Parallax Scrolling dengan JQuery – Hallo semuanya, pada kesempatan kali ini saya akan berbagi tentang bagaimana cara membuat background parallax scrolling. website parallax sendiri adalah website dengan tipe full width, yang berarti tampilan website akan bersifat full dari kiri sampai ujung kanan. Sebelumnya saya juga pernah membuat dengan menggunakan bootstrap simak artikel yang berjudul membuat background parallax pada jumbotron dan juga Membuat Website Parallax dengan Bootstrap 4.

Pada kali ini kita akan coba membuat background parallax scrolling tanpa menggunakan botstrap, hanya dengan jquery dan css saja. Baiklah kita langsung saja luhat kode html sederhana seperti berikut:

Kode HTML

<body>
  <div id="parallax1" class="parallax-slide">
    <div class="parallax-text">
      <h1>Hallo, ini adalah contoh background parallax menggunakan JQuery</h1>
      <p>By: Maykhel David</p>
    </div>
  </div>
  <div id="content1" class="content-slide">
    <h1>Content</h1>
  </div>
</body>

Kita hanya membutuhkan container dengan id parallax1 dan juga parallax-text jika kalian ingin memasukkan teks pada section tersebut.

 

Kode CSS

.parallax-slide {
  height: 500px;
}
.parallax-text{
  color:#fff;
  height: 100vh;
  width:50%;
  padding-left:100px
}
.content-slide {
  height: 100vh;
  background: #fff;
  text-align: center;
}
h1 {
  padding-top: 10%;
}
#parallax1 {
  background: url('https://static.pexels.com/photos/226232/pexels-photo-226232.jpeg') no-repeat center;
  background-attachment: fixed;
}

Pada kode css diatas kita menggunakan height 500px yang dimana height tersebut bisa kalian ubah, misal jika kalian ingin section parallax tersebut memiliki tinggi penuh sesuai layar maka bisa diubah dengan menggunakan 100vh.

Kode JQuery

$(document).ready(function() {
 
  // mendapatkan nilai titik scroll bagian atas saat halaman dibuka
  var initScrollTop = $(window).scrollTop();
 
  // mengubah posisi background ketika melakukan scroll
  $(parallax1).css({'background-position-y' : (initScrollTop/75)+'%'});
 
  // Saat user melakukan scroll
  $(window).scroll(function() {
    
    // mendapatkan nilai titik scroll terbaru
    var scrollTop = $(window).scrollTop();
    
    // menentukan posisi background yang baru
    $(parallax1).css({'background-position-y' : (scrollTop/75)+'%'});
    
  });
});

Baiklah pada kode jquery diatas kita menggunakan perhitungan titik scrollTop / 75 yang hasilnya akan menjadi titik posisi background dengan satuan persen (%). Baiklah demikian artikel kali ini yang membahas tentang Membuat Background Parallax Scrolling dengan JQuery. Semoga bermanfaat

6 Maret 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat