Mulai dari animasi scroll sederhana, bukan dari tutorial "Hello World" yang ke-100
Kalau kamu pernah belajar web programming lewat urutan klasik, kamu pasti kenal pola ini: HTML dulu, lalu CSS, kemudian JavaScript. Setelah itu, hasil akhirnya sering berupa halaman daftar tugas atau kalkulator. Semua itu memang penting, tetapi bagi sebagian orang, belajar dengan cara seperti ini bisa terasa membosankan.
Padahal, web programming punya sisi kreatif yang menarik. Dengan kode, kita bisa membuat halaman yang bergerak, interaktif, dan enak dilihat. Jadi, belajar programming nggak harus selalu terasa seperti mengerjakan tugas.
Kenapa Banyak Orang Merasa Bosan?
Ada beberapa hal yang bisa membuat belajar web programming terasa kurang menarik:
1. Hasilnya terlalu lama terlihat. Kamu menulis banyak kode dasar, tetapi tampilan akhirnya masih sederhana.
2. Proyek latihannya terasa generik. Daftar tugas dan kalkulator memang bagus untuk belajar logika, tetapi mungkin tidak terlalu membuat kita tertarik.
3. Kurang ruang untuk bereksperimen. Padahal, mencoba hal baru bisa membuat proses belajar terasa lebih menyenangkan.
Solusinya bukan melewatkan dasar, tetapi menyisipkan proyek kecil yang hasilnya bisa langsung dilihat.
Mengenal Creative Coding
Ada sisi web programming yang cukup menarik untuk dicoba, yaitu creative coding. Di dalamnya terdapat berbagai eksperimen seperti animasi scroll, efek kursor, transisi halaman, hingga tampilan 3D di browser.
Teknologi yang digunakan bisa berupa JavaScript, SVG, GSAP, dan Three.js. Kamu tidak harus langsung menguasai semuanya. Cukup mulai dari satu efek sederhana, lalu kembangkan secara bertahap.
Proyek Pertama: Kotak yang Berputar Saat Di-scroll
Sebagai latihan, kita bisa membuat sebuah kotak yang bergeser dan berputar ketika halaman di-scroll menggunakan GSAP dan ScrollTrigger.
Buat file "index.html":
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Animasi Scroll Pertamaku</title>
<style>
body {
margin: 0;
font-family: sans-serif;
}
section {
height: 100vh;
display: grid;
place-items: center;
}
.box {
width: 120px;
height: 120px;
background: #6c5ce7;
border-radius: 16px;
}
</style>
</head>
<body>
<section>
<h1>Scroll ke bawah ↓</h1>
</section>
<section>
<div class="box"></div>
</section>
<section>
<h1>Selesai!</h1>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);
gsap.to(".box", {
x: 300,
rotation: 360,
scrollTrigger: {
trigger: ".box",
start: "top 80%",
end: "top 20%",
scrub: true
}
});
</script>
</body>
</html>
Buka file tersebut di browser, lalu coba scroll ke bawah. Kotak akan bergeser ke kanan sambil berputar.
Membaca Kodenya
- "gsap.to(".box", {...})" digunakan untuk memberikan animasi pada elemen ".box".
- "x: 300" membuat kotak bergeser 300 piksel ke kanan.
- "rotation: 360" membuat kotak berputar satu putaran penuh.
- "scrollTrigger" menghubungkan animasi dengan posisi scroll.
- "start" dan "end" menentukan kapan animasi dimulai dan berakhir.
- "scrub: true" membuat gerakan animasi mengikuti scroll. Ketika halaman di-scroll kembali ke atas, animasinya juga ikut mundur.
Coba Kembangkan Sendiri
Setelah berhasil membuat animasi pertama, kamu bisa mencoba beberapa perubahan sederhana:
- Ganti "x: 300" menjadi "y: 200".
- Tambahkan "scale: 2" agar kotak membesar.
- Ubah warna dan ukuran kotak melalui CSS.
- Tambahkan kotak kedua dengan animasi yang berbeda.
Dari perubahan kecil seperti ini, kamu bisa mulai memahami bagaimana kode memengaruhi tampilan halaman.
Tapi, Dasar Tetap Penting
Creative coding bukan berarti kamu bisa melewati dasar HTML, CSS, dan JavaScript. Justru, pemahaman dasar akan membuat kamu lebih mudah bereksperimen dengan berbagai efek.
Kamu bisa belajar dasar sambil sesekali membuat proyek visual kecil agar proses belajar tidak terasa monoton.
Namun, animasi juga perlu digunakan dengan bijak. Terlalu banyak animasi dapat membuat halaman terasa berat atau mengganggu sebagian pengguna. Dalam proyek nyata, pengaturan seperti "prefers-reduced-motion" juga perlu diperhatikan.
Penutup
Belajar web programming nggak harus selalu terasa seperti tugas. Dengan membuat proyek kecil yang hasilnya bisa langsung dilihat, belajar jadi lebih seru dan nggak gampang bosan.
Mulai dari hal sederhana seperti kotak yang bisa berputar, lalu coba tambahkan efek-efek lainnya. Dari proyek kecil seperti itu, lama-lama kamu bisa punya portofolio yang menarik dan tentunya bisa dipamerkan.
Selamat bereksperimen!