Cara Memberi Efek di Div saat Di-scroll

Share:

Hello World's! Pastinya kita sering mencoba script-script untuk landing pages yang banyak bertebaran. Satu per satu dicoba, diotak-atik, dan dilihat. Ketika kita buka, ada satu 'keajaiban' yang mungkin membuat kita bingung. Keajaiban itu adalah sebuah div akan punya efek baru ketika di-scroll hingga kedalaman tertentu.

Entah ini apa namanya, saya nyebutnya 'ngefek-pas-discroll'. Misal, tampilan awal header-nya berwarna merah. Tetapi, ketika laman discroll hingga header tadi menutupi bagian yang warnanya merah, pasti akan berubah warnanya. Soalnya biar gampang dilihat. Nah, gimana sih caranya bikin 'ngefek-pas-discroll' ini?

Pertama, buatlah sebuah direktori "ngefek-pas-discroll" di htdocs dan buatlah file index.html, style.css, dan script.js, seperti di bawah ini.


dengan masing-masing isinya seperti ini;

- index.html

<!DOCTYPE html>
<html>
<head>
     <title>Ngefek pas Discroll</title>
     <script src="http://belajarnge.web.id/alat/jquery-3.1.1.js"></script>
     <script src="script.js"></script>
     <link href="style.css" rel="stylesheet">
</head>
<body>

<div class="header">
     <div class="judul">Ini Website</div>
</div>
<div class="bagian" id="pertama">
     <h1>Ini bagian pertama</h1>
</div>
<div class="bagian" id="kedua">
     <h1>Ini bagian kedua</h1>
</div>

</body>
</html>

- style.css

body { background-color: #ecf0f1; font-family: sans-serif; }
.header {
     position: fixed;
     top: 0px; left: 0px; right: 0px;
     line-height: 60px;
     background-color: #e74c3c;
     color: #fff;
     z-index: 1;
}
.judul {
     float: left;
     margin-left: 5%;
     font-size: 23px;
}
.bagian {
     position: absolute;
     top: 60px; left: 0px; right: 0px;
     height: 700px;
}
#kedua { top: 700px; }

- script.js

$(window).scroll(function() {
     var scroll = $(window).scrollTop();
     if(scroll >= 400) {
          $(".header").css({"background":"#fff","color":"#333"});
     } else {
          $(".header").css({"background":"#e74c3c","color":"#fff"});
     }
});

Simpan semua dan buka file index.html. Kemudian, coba untuk scroll beberapa langkah ke bawah. Pasti bagian header akan berubah warna menjadi putih. Jika pengen jarak scrolling-nya jadi lebih jauh, ubah value (yang 400 di file script.js). Semakin banyak berarti semakin ke bawah. Salam Koding!

Tidak ada komentar