Membuat Animasi Slider Dota 2

Sep 2, 2024

Ngoding Bareng: Membuat Animasi Slider

Pembukaan

  • Sandika Gali kembali dalam seri "Ngoding Bareng" membuat animasi slider.
  • Menggunakan HTML, CSS, dan JavaScript tanpa framework.
  • Tema contoh: Game Dota 2.

Fitur Slider

  • Menampilkan 5 hero dari Dota 2.
  • Memiliki tombol next dan previous.
  • Dilengkapi loading bar dan animasi perpindahan.
  • Responsif, tetap rapi di layar kecil.
  • Bisa autoplay.

Persiapan

  • Tools:
    • VS Code.
    • Extensions: Prettier, Live Server, dan Live Preview.
  • Pengetahuan Dasar Diperlukan:
    • HTML: Struktur dan tag dasar.
    • CSS: Selektor, properti, layouting, flexbox, transisi, animasi.
    • JavaScript: DOM, manipulasi elemen.

Langkah Membuat Slider

  1. Setup Proyek: Folder & File

    • Buat folder WPU animated slider.
    • File diperlukan: index.html, style.css, script.js.
    • Gambar disimpan di folder img.

  2. Mengisi Konten

    • Gambar dan deskripsi hero Dota 2.
    • Struktur HTML dasar dengan header, nav, list, dan thumbnail.

  3. Styling dengan CSS

    • Reset CSS menggunakan reset.css dari web.
    • Import font dari Google Fonts (Roboto).
    • Styling header, slider, item, detail, dan thumbnail.
    • Menambahkan animasi transisi menggunakan keyframes.

  4. JavaScript untuk Interaktivitas

    • Manajemen item list dan thumbnail.
    • Event handling untuk tombol next dan previous.
    • Autoplay menggunakan setTimeout.

  5. Menambahkan Animasi dan Efek

    • Animasi awal (fade in & blur out).
    • Animasi setiap item saat next/prev.
    • Loader di atas slider untuk waktu transisi.

Testing dan Debugging

  • Cek responsifitas di browser menggunakan inspeksi elemen.
  • Penyesuaian ukuran dan posisi elemen pada layout kecil.
  • Debugging fungsi JavaScript untuk memastikan animasi berjalan lancar.

Penutup

  • Modifikasi tema sesuai keinginan.
  • Ajak pamerkan proyek di social media dan Discord WPU.
  • Episode ini melatih dasar HTML, CSS, JS untuk pembuatan animasi interaktif.

Proyek ini memerlukan latihan dan pemahaman lanjutan mengenai manipulasi DOM dan styling CSS, serta menuntut kreativitas dalam mengatur animasi dan efek visual.