Membuat Animasi Pada Header Saat Melakukakan Scroll Halaman

2
162

Hai Temen-temen, apa kabar semua? semoga dalam keadaan bak iya. Kali ini kita mau bahas tentang cara membuat animasi pada header saat halaman web di scroll. Saya yakin temen-temen pasti sudah ada yang pernah melihat animasi seperti ini saat pada salah satu website yang sudah pernah temen-temen kunjungi.

Pada tutorial ini kita akan memanfaatkan teknologi dari Html untuk membuat kerangka webnya, Css untuk mempercantik tampilan web nya, dan juga Bahasa pemrograman javascript untuk membantu membuat animasinya. Langsung saja silahkan temen-temen perhatikan, pahami dan peraktekan kode dibawah ini.

See the Pen zpYKwG by Raja Arif Fadillah Sitompul (@bangJa) on CodePen.0

Note: Untuk melihat hasil animasinya silahkan temen-temen lakukan scroll pada 
plugin codepen diatas.

Untuk mencoba kode diatas silahkan silahkan temen-temen ketikkan kode yang ada di tab html kedalam element body pada file html temen-temen, lalu masukkan kode yang ada di dalam tab css kedalam file css temen-temen atau temen-temen bisa memasukkan nya langsung di dalam file html temen-temen dengan memasukkannya kedalam element style, jika temen-temen belum tau caranya silahkan googling dengan keyword “cara menerapkan css ke dalam dokumen html”. langkah selanjutnya ada lah memasukkan kode yang ada didalam tag js kedala file javascript temen-temen, atau temen-temen juga bisa menyatukan nya dengan file html yang telah temen-temen buat, jika temen-temen belum tau caranya silahkan googling dengan keyword “cara menerapkan kode javascript ke dokument html”. Lalu silahkan save dan coba jalankan file html temen-temen.

Sedikit penjelasan kode javascript diatas, pada kode:

 window.onscroll = function(){...}

Kode diatas adalah sebuah function yang bernama onscroll, lalu didalam fungsi tersebut terdapat kode:

var scroll = document.documentElement.scrollTop;

Kode tersebut berfungsi untuk mengambil nilai scroll yang kita lakukan dan kita simpan di dalam variabel scroll. selanjutnya terdapat kode:

      if (scroll > 360) {
        document.getElementById('header').style.height = '75px';
        document.getElementById('header').style.lineHeight = '75px';
      }else {
        document.getElementById('header').style.height = '51px';
        document.getElementById('header').style.lineHeight = '51px';
      }

Pada kode diatas akan melakukan pengecekan jika nilai yang ada pada variabel scroll nilainya lebih besar dari 360 maka tinggi dari element header akan ditambah menjadi 75px yang sebelumnya kita beri nilai di cssnya sebesar 51px. Namun jika nilai scroll nya tidak lebih dari 360, maka tinggi dari element header akan tetap atau menjadi 51px.

Sampai disini dulu artikel kali ini yang membahas tentang cara membuat animasi pada header saat melakukan scroll pada halaman web. Bila temen-temen ada pertanyaan silahkan temen-temen tanyakan di komentar iya. Terima kasih.

2 KOMENTAR

Tinggalkan Balasan

This site uses Akismet to reduce spam. Learn how your comment data is processed.