AOS (Animate On Scroll) adalah pustaka JavaScript yang memungkinkan elemen-elemen di halaman web mendapatkan efek animasi saat pengguna menggulir (scroll) ke bagian tertentu. Dengan AOS, elemen-elemen dapat muncul dengan efek seperti fade, slide, zoom, dan lainnya, sehingga memberikan pengalaman yang lebih dinamis dan menarik bagi pengguna.

AOS bekerja dengan mendeteksi posisi elemen di dalam viewport. Ketika elemen masuk ke dalam area yang terlihat di layar, animasi yang telah ditentukan akan dipicu. Keunggulan AOS adalah kemudahan penggunaannya karena hanya perlu menambahkan atribut pada elemen HTML tanpa perlu menulis banyak kode JavaScript.

BACA JUGA: Cara Membuat Efek Parallax dengan HTML dan CSS

Penerapan AOS

Setelah memahami konsep AOS, kita bisa menerapkannya dalam proyek web. Berikut adalah langkah-langkah untuk mengimplementasikan AOS dalam halaman web menggunakan pustaka AOS.

Mengapa menggunakan Bootstrap? Kita menggunakan Bootstrap 5.3 karena memudahkan pengaturan tata letak dan styling tanpa banyak kode tambahan.

1️⃣ Tambahkan AOS ke Proyek

Gunakan CDN (Tanpa Download)

Tambahkan kode ini di bagian <head> halaman HTML:


<!-- Link CSS AOS -->

<link rel="stylesheet" href="<https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css>">

Tambahkan script ini sebelum tag </body> :

<script src="<https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js>"></script>

2️⃣ Cara Menambahkan Efek Animasi

Untuk menambahkan animasi, cukup tambahkan atribut data-aos ke elemen HTML. Contohnya:

<h1 data-aos="fade-up">Halo, Selamat Datang!</h1>

✅ fade-up → Elemen akan muncul dari bawah ke atas saat di-scroll.

3️⃣ Contoh Penerapan Efek AOS di Web

index.html

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animasi dengan AOS</title>
    <link rel="stylesheet" href="<https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css>">
    <style>
        body { font-family: Arial, sans-serif; text-align: center; margin: 0; padding: 0; }
        .container { padding: 100px 20px; }
        .box { width: 300px; height: 150px; background: #007bff; color: white; display: flex; align-items: center; justify-content: center; margin: 20px auto; font-size: 20px; }
    </style>
</head>
<body>

    <div class="container">
        <h1 data-aos="fade-up">Halo, Selamat Datang!</h1>
        <p data-aos="fade-right" data-aos-duration="2000">Paragraf ini muncul dari kanan ke kiri.</p>
        
        <div class="box" data-aos="zoom-in" data-aos-duration="1500">Zoom In</div>
        <div class="box" data-aos="flip-left" data-aos-duration="2000">Flip Left</div>
        <div class="box" data-aos="fade-up" data-aos-duration="2500">Fade Up</div>
    </div>

    <script src="<https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js>"></script>
    <script src="script.js"></script>

</body>
</html>

File script.js atau tab Javascript (jika menggunakan code editor online)

  AOS.init();

4️⃣ Menambahkan Durasi pada Animasi

Kita bisa mengontrol kecepatan animasi dengan atribut data-aos-duration.


<p data-aos="fade-up" data-aos-duration="3000">Paragraf ini muncul perlahan dari kiri ke kanan.</p>

✅ data-aos-duration="3000" → Animasi berlangsung selama 3 detik (3000ms).

5️⃣ Beberapa Efek Lain yang Bisa Dicoba

Gunakan data-aos dengan efek berikut:

✅ fade-up → Muncul dari bawah.

✅ fade-down → Muncul dari atas.

✅ fade-right → Muncul dari kanan.

✅ fade-left → Muncul dari kiri.

✅ zoom-in → Muncul dengan zoom masuk.

✅ flip-left → Elemen berputar dari kiri.

✅ flip-right → Elemen berputar dari kanan.

🎨Mau lihat semua efek? Untuk refrensi efek AOS lengkap bisa dilihat disini : https://michalsnik.github.io/aos/

BACA JUGA: Cara Membuat Animasi Scrollspy dengan Library Scrollspy-js

Contoh Hasil akhir penerapan Animate On Scroll dapat dilihat dibawah :

https://codepen.io/razorzero0/pen/OPJpPpL

#scroll

Panduan Membuat Animasi Animated on Scroll di Website Anda