Background Animation Html Css Codepen

MUAZHAN

5 min read

·

Jun 28, 2024

37

Share

Membangun Animasi Latar Belakang dengan HTML, CSS, dan CodePen

Membuat animasi latar belakang yang menarik untuk website Anda bisa dilakukan dengan mudah menggunakan HTML, CSS, dan CodePen. CodePen adalah platform online yang memungkinkan Anda untuk menulis, menguji, dan berbagi kode HTML, CSS, dan JavaScript.

Langkah-langkah Dasar

Berikut adalah langkah-langkah dasar untuk membuat animasi latar belakang sederhana dengan CodePen:

1. Buat Proyek Baru: Buka CodePen dan buat proyek baru.
2. Tambahkan HTML: Di panel HTML, tambahkan tag <div> yang akan menjadi wadah untuk animasi latar belakang.
3. Tambahkan CSS: Di panel CSS, tambahkan beberapa properti CSS untuk mendefinisikan style dan animasi untuk wadah <div>.
4. Tambahkan Animasi: Gunakan properti CSS seperti animation, transition, dan transform untuk membuat animasi latar belakang yang diinginkan.

Contoh Kode

Berikut adalah contoh sederhana kode HTML dan CSS untuk membuat animasi latar belakang bergerak ke kiri:

HTML:

CSS:

.background {
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background-color: #f0f0f0;
  background-image: url('https://source.unsplash.com/random');
  background-size: cover; 
  background-repeat: no-repeat;
  animation: move 10s linear infinite;
}

@keyframes move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}

Penjelasan Kode:

• HTML: Tag <div> dengan kelas background digunakan sebagai wadah untuk animasi.
• CSS:
  • position: fixed; membuat elemen tetap di tempat saat halaman digulir.
  • top: 0; left: 0; menetapkan posisi elemen ke sudut kiri atas.
  • width: 100%; height: 100%; membuat elemen memenuhi seluruh area layar.
  • background-color: #f0f0f0; menetapkan warna latar belakang.
  • background-image: url('https://source.unsplash.com/random'); menambahkan gambar latar belakang dari Unsplash.
  • background-size: cover; menyesuaikan gambar agar menutupi seluruh area.
  • background-repeat: no-repeat; mencegah gambar diulang.
  • animation: move 10s linear infinite; menerapkan animasi move dengan durasi 10 detik, gerakan linear, dan diulang tanpa batas.
• @keyframes move: Menentukan keyframe untuk animasi move, yang mengubah posisi latar belakang dari 0% ke -100%, sehingga menciptakan efek bergerak ke kiri.

Tips dan Trik

• Gunakan gambar dengan ukuran besar untuk hasil yang lebih baik.
• Gunakan transition untuk membuat efek transisi yang halus.
• Gunakan transform untuk membuat efek rotasi, scaling, dan lainnya.
• Anda dapat menambahkan beberapa elemen animasi untuk membuat efek yang lebih kompleks.
• Eksperimen dengan berbagai properti CSS untuk menciptakan berbagai efek animasi.

Kesimpulan

Membuat animasi latar belakang yang menarik dan dinamis sangat mudah dengan HTML, CSS, dan CodePen. Anda dapat menemukan banyak inspirasi dan contoh di CodePen untuk membantu Anda memulai. Dengan mempelajari dasar-dasar animasi dan menggunakan CodePen, Anda dapat membuat website Anda lebih menarik dan interaktif.