Cara Membuat Animasi pada Element HTML Ketika Scroll, Animasi In dan Out dengan Mudah
byFajriyan•
0
Kalian pasti pernah menemukan halaman website yang menampilkan animasi ketika element itu muncul pada saat halaman di scroll, ada 2 macam animasi munculnya element teks atau gambar itu ketika halaman website itu setelah di reload. Animasi pertama adalah element itu hanya muncul sekali dan ketika halaman di scroll keatas kemudian kebawah kembali element itu tidak akan hilang kemudian muncul kembali, mudahnya adalah element dengan animasi itu hanya muncul sekali ketika halaman itu setelah di reload saja. Namun ada animasi yang kedua adalah ketika halaman website itu di scroll ke atas element di bawahnya akan hilang lagi dan ketika di scroll ke bawah lagi maka akan tampil kembali beserta animasinya.
Animasi yang kedua ini yang akan kita bahas pada artikel kali ini, selanjutnya kita akan menyebutnya dengan "Animasi On Scroll (AOS)". Pada artikel ini juga penyataan tentang bagaimana cara menampilkan animasi ketika halaman itu di scroll akan terjawab. Pada kasus kali ini saya menggunakan library dari github untuk memudahkan dan mempersingkat waktu untuk animasi setiap element yang ada di halaman website tersebut.
Cara Membuat Animasi
Sebelum kalian membuat setiap element memiliki animasi tentunya kalian pasti butuh sebuah halaman website yang sudah jadi. Silahkan ikuti tahapan dibawah ini untuk membuat animasi yang kalian inginkan. Library yang kita gunakan berasal dari github milik michalsnik yang kalian bisa lihat pada profil githubnya.
1. Import Library CSS dan JS
Tentunya kalian butuh CSS untuk membuat setiap element itu memiliki animasi, namun karena kali ini kita membuatnya menggunakan Library dari pihak ketika maka kita perlu mengimport CSS Library didalam <head> HTML kalian.
Kalian disini hanya perlu menginisialisasi pada <div> ataupun di element lainnya seperti <heading>, namun saya rekomendasikan menggunakan <div> saja sesuai dengan dokumentasi Library. Contoh Kasus : Saya akan membuat animasi pada <div> yang berisi <h1>, kalian hanya perlu menambahkan beberapa baris seperti berikut ini :
<div
data-aos="fade-up"
data-aos-offset="200"
data-aos-delay="100"
data-aos-duration="600"
>
<h1> Heading Pada Sebuah Website </h1>
</div>
Hasil dari code diatas animasinya akan jadi seperti berikut ini (Scroll bawah tampil namun ketika di Scroll atas akan hilang) :
Heading Pada Sebuah Website
3. Bonus Preset Animasi
Kalian bisa menggunakan beberapa preset dari saya untuk semakin mempercepat kalian membuat animasi dari element HTML pada halaman website.
Untuk lebih jelasnya beserta preview kalian bisa mengganti data-aos="fade-up" sesuai di dokumentasi yang bisa langsung kalian akses. Ada banyak pilihan animasi yang bisa kalian buka pada halaman github.
Cara Menggunakannya pada Wordpress
Wordpress merupakan salah satu CMS yang sangat populer digunakan, pada bagian ini kita akan membahas bagaimana cara membuat animasi ini berjalan pada wordpress, sebenarnya bisa saja dilakukan hal yang sama dengan mengedit HTML pada wordpress itu namun ketika kalian menggunakan Elementor kalian bisa lebih mudah lagi dengan memilih element yang ingin kalian animasikan kemudian pilih Advanced > Attributes kemudian masukkan baris kode dengan format seperti dibawah ini :
Dari beberapa penjelasan diatas semoga kalian dapat mengimplementasikan animasi ini pada website kalian, dan membuka wawasan bagi anda yang baru pertama membaca cara diatas bahwa sebenarnya membuat animasi tersebut sebenarnya tidak sulit, terlebih karena pembahasan diatas menggunakan Library yang ada sehingga sangat mudah di gunakan dan dipahai oleh pemula.
Terimakasih sudah membaca artikel ini, saya berharap dapat bermanfaat untuk kalian pembaca semua.
