Animated Background Html Css Js

MUAZHAN

4 min read

·

Jun 28, 2024

31

Share

Membuat Background Animasi dengan HTML, CSS, dan JavaScript

Membuat background website animasi dapat meningkatkan daya tarik dan interaksi pengguna. Dengan kombinasi HTML, CSS, dan JavaScript, kita dapat menciptakan efek visual yang menarik dan dinamis. Berikut panduan langkah demi langkah untuk membuat background animasi:

1. Struktur HTML

Pertama, buat struktur HTML dasar untuk elemen yang akan digunakan sebagai background animasi. Contohnya:

• container: Elemen yang akan menampung konten utama website.
• background: Elemen yang akan digunakan sebagai background animasi.

2. Style dengan CSS

Selanjutnya, gunakan CSS untuk menentukan tampilan dan animasi background:

.container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
}

.background {
    width: 500px;
    height: 300px;
    background-color: #ccc;
    position: relative;
    overflow: hidden;
}

/* Tambahkan style untuk elemen animasi */

• container: Mengatur lebar, tinggi, dan posisi konten utama.
• background: Mengatur ukuran, warna latar, dan properti position dan overflow untuk memungkinkan animasi.

3. Animasi dengan JavaScript

Gunakan JavaScript untuk membuat elemen animasi dan mengontrol perilakunya:

const background = document.querySelector('.background');

// Buat elemen animasi
const circle = document.createElement('div');
circle.classList.add('circle');
circle.style.width = '50px';
circle.style.height = '50px';
circle.style.borderRadius = '50%';
circle.style.backgroundColor = 'blue';
circle.style.position = 'absolute';
circle.style.left = '100px';
circle.style.top = '100px';

// Tambahkan elemen animasi ke background
background.appendChild(circle);

// Animasi elemen
circle.style.transition = 'left 2s ease-in-out';

// Fungsi untuk menggerakkan elemen
function moveCircle() {
    const newLeft = Math.random() * (background.offsetWidth - circle.offsetWidth);
    const newTop = Math.random() * (background.offsetHeight - circle.offsetHeight);
    circle.style.left = newLeft + 'px';
    circle.style.top = newTop + 'px';
}

// Panggil fungsi moveCircle setiap beberapa detik
setInterval(moveCircle, 2000);

• Elemen circle dibuat dengan JavaScript dan diberikan style untuk tampilan lingkaran.
• Animasi transition digunakan untuk efek transisi saat elemen bergerak.
• Fungsi moveCircle mengubah posisi elemen secara acak.
• setInterval digunakan untuk memanggil fungsi moveCircle secara berulang.

4. Modifikasi dan Kreasi

Anda dapat memodifikasi kode di atas untuk menciptakan animasi yang lebih kompleks. Beberapa ide:

• Tambahkan lebih banyak elemen animasi: Buat beberapa lingkaran dengan warna dan ukuran yang berbeda.
• Gunakan berbagai jenis animasi: Terapkan animasi rotasi, skala, dan lainnya untuk efek yang lebih dinamis.
• Tambahkan interaksi: Buat elemen animasi bereaksi terhadap interaksi pengguna seperti mouseover atau klik.
• Gunakan library animasi: Gunakan library JavaScript seperti GreenSock Animation Platform (GSAP) untuk mempermudah pembuatan animasi yang rumit.

Dengan mengikuti langkah-langkah ini, Anda dapat membuat background animasi yang menarik dan interaktif untuk website Anda. Jangan ragu untuk bereksperimen dengan berbagai efek dan fitur untuk menciptakan desain yang unik.