Cara Membuat Animasi Bergerak di HTML

By Posted on

Cara Membuat Animasi Bergerak di HTML – Apakah Anda tertarik untuk mempelajari cara membuat animasi bergerak di HTML? Animasi web dapat memberikan sentuhan visual yang menarik dan dinamis pada situs Anda. Dalam dunia web yang semakin berkembang, kemampuan untuk menciptakan animasi yang menarik dapat menjadi nilai tambah yang besar. Dalam panduan ini, kelashtml akan membimbing Anda langkah demi langkah dalam membuat animasi sederhana menggunakan HTML dan CSS.

Tidak perlu khawatir jika Anda pemula dalam hal ini, karena tutorial ini akan disajikan dengan cara yang mudah dipahami. Dengan langkah-langkah yang jelas dan contoh kode yang disertakan, Anda akan dapat membuat animasi bergerak dengan mudah. Animasi web tidak hanya menambahkan elemen estetika pada situs Anda, tetapi juga dapat meningkatkan pengalaman pengguna secara keseluruhan.

Mari kita mulai perjalanan Anda dalam dunia animasi web dengan langkah-langkah yang sederhana namun efektif. Dari membuat folder proyek hingga menambahkan kode CSS, Anda akan diajak untuk memahami dasar-dasar pembuatan animasi di HTML. Ikuti dengan seksama, dan Anda akan segera dapat menciptakan animasi bergerak yang memukau pengunjung situs Anda.

Alat yang Harus Anda Siapkan

Berikut ini beberapa alat yang harus Anda siapkan untuk dapat membuat gambar begerak di html:

  • Perangkat laptop,
  • Notepad++ (Text editor code),
  • Google chrome (Web browser),
  • Niat yang kuat.
Baca Juga:  Cara Membuat Pencarian di HTML

Cara Membuat Animasi Bergeraka di HTML

1. Buat Folder Project Animasi Bergerak

Langkah pertama yang perlu Anda lakukan adalah membuat folder khusus untuk proyek animasi bergerak Anda. Ini akan membantu Anda menjaga file-filenya terorganisir dan mudah ditemukan.

2. Buat Folder img

Di dalam folder proyek Anda, buatlah folder baru dengan nama “img“. Folder ini akan digunakan untuk menyimpan gambar atau grafik yang akan Anda gunakan dalam animasi Anda nantinya. Download gambar disini untuk dapat diterapkan dalam animasi bergerak.

3. Buat Sebuah File animasi_bergerak.html

Sekarang, mari kita mulai dengan membuat file HTML untuk animasi kita. Buka editor teks favorit Anda dan buat file baru dengan nama “animasi_bergerak.html“. File ini akan menjadi tempat kita menulis kode HTML untuk animasi.

Berikut ini file html yang dapat Anda tambahkan untuk membuat animasi bergerak di html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animated Moving Image</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <img src="img/moving.jpg" alt="Moving Image" class="moving-image">
  </div>
</body>
</html>
 

4. Buat File style.css

Selanjutnya, kita perlu membuat file CSS untuk mengatur tata letak dan gaya animasi kita. Buatlah file baru bernama “style.css” di dalam folder proyek animasi bergerak Anda.

Baca Juga:  Cara Membuat Navbar dengan HTML dan CSS

Berikut ini file css yang harus Anda tambahkan untuk membuat animasi bergerak di html:

.container {
    position: relative;
    width: 100%;
    height: 300px; /* Sesuaikan dengan tinggi gambar */
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .moving-image {
    max-width: 100%;
    max-height: 100%;
    animation: moveImage 5s linear infinite; /* Ubah durasi dan jenis animasi sesuai kebutuhan */
  }
  
  @keyframes moveImage {
    0% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(200px); /* Ubah jarak perpindahan horizontal sesuai kebutuhan */
    }
    100% {
      transform: translateX(0);
    }
  }
 

5. Mengubah Tampilan Animasi Bergerak

Sekarang saatnya untuk menambahkan animasi ke dalam animasi_bergerak.html dan mengatur gaya animasi menggunakan CSS. Berikut adalah contoh sederhana animasi yang akan bergerak dari kiri ke kanan.

6. Save & View Tampilan

Simpan semua perubahan yang telah Anda buat pada file HTML dan CSS. Kemudian buka file animasi_bergerak.html di browser web Anda untuk melihat animasi bergerak yang telah Anda buat!

Preview hasil

Berikut ini preview hasil animasi bergerak di html jika Anda berhasil membuatnya:

Baca Juga:  Cara Membuat Background Color di HTML

Penutup

Dengan memahami dasar-dasar animasi di HTML, Anda dapat terus eksperimen dan mengembangkan keterampilan Anda lebih lanjut. Jangan ragu untuk mencoba variasi animasi yang berbeda atau menyesuaikan gaya animasi sesuai dengan kebutuhan proyek Anda. Dengan kreativitas dan ketekunan, Anda dapat menciptakan animasi yang unik dan memikat untuk memperkaya situs web Anda.

Teruslah belajar dan menjelajahi berbagai teknik animasi yang tersedia, dan jangan ragu untuk mencari inspirasi dari sumber-sumber online dan komunitas desain web. Dengan semangat yang tepat, Anda dapat menjadi ahli dalam menciptakan animasi yang mengagumkan menggunakan HTML dan CSS. Selamat mencoba, dan semoga sukses dalam perjalanan Anda menuju penguasaan animasi web!

Related posts: