By Animate On Scroll (AOS) adalah sebuah library animasi populer yang memungkinkan elemen-elemen pada halaman web beranimasi saat muncul di layar. Library ini memberikan pengalaman pengguna yang halus dan menarik dengan menambahkan gerakan pada halaman web. Dalam tutorial ini, kita akan menjelajahi cara membuat efek AOS menggunakan JavaScript dan HTML tanpa menggunakan library eksternal. Pada akhir tutorial ini, Anda akan mampu mengimplementasikan animasi scroll yang menakjubkan pada website Anda dengan mudah.
Persyaratan
Sebelum kita mulai, pastikan Anda memiliki pemahaman dasar tentang HTML, CSS, dan JavaScript. Anda juga harus memiliki text editor dan web browser terinstall pada komputer Anda.
Langkah 1: Persiapan Struktur HTML
Pertama, buatlah file HTML baru dan buat struktur dasar:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Membuat Animasi Saat Scroll dengan JavaScript dan HTML</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Selamat Datang di Website Kami</h1>
</header>
<main>
<section>
<h2>Tentang Kami</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu purus nec lacus ultricies...</p>
</section>
<section>
<h2>Layanan Kami</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu purus nec lacus ultricies...</p>
</section>
<section>
<h2>Portofolio</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu purus nec lacus ultricies...</p>
</section>
<section>
<h2>Kontak</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu purus nec lacus ultricies...</p>
</section>
</main>
<script src="script.js"></script>
</body>
</html>
Langkah 2: Menambahkan CSS untuk Animasi
Selanjutnya, kita perlu menambahkan file CSS untuk mengatur tampilan dan efek animasi elemen saat scroll. Buatlah file dengan nama “styles.css” dan tambahkan kode berikut:
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 1rem 0;
}
main {
max-width: 800px;
margin: 0 auto;
padding: 2rem;
}
section {
margin-bottom: 2rem;
}
h2 {
font-size: 2rem;
border-bottom: 2px solid #333;
padding-bottom: 0.5rem;
}
p {
font-size: 1rem;
color: #666;
}
/* Efek animasi */
.animate {
opacity: 0;
transform: translateY(20px);
}
/* Animasi saat elemen masuk viewport */
.animate.in-view {
opacity: 1;
transform: translateY(0);
transition: opacity 0.5s, transform 0.5s;
}
Langkah 3: Membuat Animasi dengan JavaScript
Setelah kita menyiapkan struktur HTML dan CSS, saatnya kita menggunakan JavaScript untuk membuat animasi saat scroll. Buatlah file dengan nama “script.js” dan tambahkan kode berikut:
// Ambil semua elemen yang akan dianimasikan
const animatedElements = document.querySelectorAll('.animate');
// Fungsi untuk mengecek apakah elemen berada di dalam viewport
function isElementInViewport(element) {
const rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
// Fungsi untuk menambahkan class "in-view" saat elemen masuk viewport
function animateOnScroll() {
animatedElements.forEach(element => {
if (isElementInViewport(element)) {
element.classList.add('in-view');
}
});
}
// Panggil fungsi animateOnScroll saat halaman di-scroll
window.addEventListener('scroll', animateOnScroll);
// Panggil fungsi animateOnScroll saat halaman di-load untuk animasi elemen yang sudah terlihat saat pertama kali
animateOnScroll();
Langkah 4: Pengujian
Selanjutnya, kita akan menguji hasil dari animasi saat scroll yang telah kita buat. Simpan semua file HTML, CSS, dan JavaScript di direktori yang sama. Lalu, buka file HTML di web browser Anda. Anda akan melihat header dengan teks “Selamat Datang di Website Kami” akan muncul dengan efek fadeIn saat halaman di-load. Selanjutnya, saat Anda scroll ke bawah, bagian-bagian seperti “Tentang Kami”, “Layanan Kami”, “Portofolio”, dan “Kontak” akan muncul satu per satu dengan efek fadeIn saat elemen tersebut masuk viewport.
Kesimpulan
Dalam tutorial ini, kita telah berhasil membuat animasi saat scroll menggunakan JavaScript dan HTML. Dengan menambahkan class “animate” pada elemen-elemen yang ingin dianimasikan, dan menggunakan JavaScript untuk memberikan class “in-view” saat elemen masuk viewport, kita dapat menciptakan efek fadeIn pada elemen-elemen tersebut. Selain itu, Anda juga dapat mengatur efek animasi lainnya dengan mengubah nilai dari properti seperti “opacity” dan “transform” pada CSS. Dengan memahami dasar-dasar animasi dengan JavaScript dan HTML, Anda dapat menciptakan pengalaman pengguna yang lebih menarik dan interaktif pada website Anda.
