Scroll pada suatu website bisa saja terjadi karena saat content melebihi batas tinggi device yang dipakai,contohnya : PC, Laptop, Smartphone, dll. Namun scroll pada suatu website bisa digunakan apabila dibuat tidak melebihi tinggi dari sebuah device pengguna. Disini saya akan membahas tentang cara membuat efek opacity on scroll menggunakan Javascript ,bagaimana caranya mari intip langkah-langkah berikut ini.Langkah yang pertama sahabat buat terlebih dahulu file HTML lalu ketikan script dibawah ini:

Langkah selanjutnya tambahkan style CSS seperti berikut ini :

Dan sahabat bisa ketikan script dari Javascript seperti dibawah ini,

Cara Membuat Efek Opacity On Scroll Menggunakan Javascript

pada script diatas menggunakan function = scroll ,jadi saat scroll keatas maka content tag div class = scrolltop diberikan nilai opacity = 0.4 maka akan terlihat seperti tampilan dibawah ini hasilnya.

tampilan awal      hasil saat sudah discroll terlihat transparasinya

Jadi apabila nilai opacity = 0 maka content class = class = scrolltop akan hilang.

Demikian pembahasan artikel ini ,semoga bermanfaat dan selamat mencoba.

terima kasih.