Membuat Halaman Dashboard

1. HTML (struktur halaman dashboard)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard dengan Animasi Bounce</title>
    <link rel="stylesheet" href="styles.css"> <!-- Menghubungkan file CSS -->
</head>
<body>
    <div class="container">
        <div class="dashboard-card" id="card1">
            <h2>Dashboard Card 1</h2>
            <p>Ini adalah card pertama pada dashboard</p>
        </div>
        <div class="dashboard-card" id="card2">
            <h2>Dashboard Card 2</h2>
            <p>Ini adalah card kedua pada dashboard</p>
        </div>
        <div class="dashboard-card" id="card3">
            <h2>Dashboard Card 3</h2>
            <p>Ini adalah card ketiga pada dashboard</p>
        </div>
    </div>

    <script src="script.js"></script> <!-- Menghubungkan file JavaScript -->
</body>
</html>

2. CSS (untuk tampilan dan animasi)

/* Reset dan gaya dasar */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Penataan umum untuk halaman */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f7fa;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* Container utama yang menampung card */
.container {
    display: flex;
    justify-content: space-between;
    width: 80%;
}

/* Gaya untuk masing-masing card di dashboard */
.dashboard-card {
    background-color: #fff;
    padding: 20px;
    width: 30%;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    opacity: 0;
    transform: translateY(50px);
    animation: bounceIn 1s forwards; /* Menambahkan animasi bounce */
}

/* Efek animasi bounce */
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    60% {
        opacity: 1;
        transform: translateY(-15px);
    }
    80% {
        transform: translateY(5px);
    }
    100% {
        transform: translateY(0);
    }
}

/* Delay animasi untuk card yang berbeda */
#card1 {
    animation-delay: 0s;
}
#card2 {
    animation-delay: 0.2s;
}
#card3 {
    animation-delay: 0.4s;
}

3. JavaScript (untuk interaksi tambahan atau efek dinamis)

// Menambahkan efek dinamis jika dibutuhkan
window.onload = function() {
    const cards = document.querySelectorAll('.dashboard-card');
    cards.forEach((card, index) => {
        setTimeout(() => {
            card.style.opacity = 1;  // Mengubah opasitas setelah animasi selesai
        }, (index + 1) * 200); // Penundaan animasi untuk setiap card
    });
};

Penjelasan:

HTML:
- Struktur HTML terdiri dari sebuah div dengan class container, yang berisi beberapa elemen div dengan class dashboard-card. Setiap card berisi judul dan paragraf yang menjelaskan konten card tersebut.
CSS:
- body dan container: Mengatur tampilan halaman agar card tampil sejajar di tengah halaman.
- dashboard-card: Card memiliki padding, background, border-radius, dan efek bayangan untuk membuatnya tampak seperti kartu. Opasitas diatur ke 0 dan posisi vertikal diatur lebih rendah (translateY), sehingga animasi dimulai dari bawah.
- @keyframes bounceIn: Animasi ini mengatur transisi untuk card dari bawah ke atas dengan efek bounce. Di awal (0%) card berada di bawah (translateY 50px) dan opacity 0. Seiring berjalannya waktu, card akan bergerak ke atas dengan transformasi yang terlihat seperti memantul (bounce).
- Delay pada animasi: Masing-masing card diberikan penundaan animasi berbeda agar animasi tampil bertahap.
JavaScript:
- window.onload: Setelah halaman dimuat, JavaScript akan menambahkan efek dinamis untuk merubah opasitas setiap card, sehingga efek animasi lebih terasa.

Hasil:

Ketika halaman dimuat, elemen card akan muncul dengan animasi bounce yang bertahap. Masing-masing card akan muncul dengan sedikit penundaan (delay) untuk menciptakan efek yang lebih menarik.

PreviousMembuat Halmaan Login NextPembelajaran Framework Bootstrap

Last updated 4 months ago

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dashboard dengan Animasi Bounce</title> <link rel="stylesheet" href="styles.css">  </head> <body> <div class="container"> <div class="dashboard-card" id="card1"> <h2>Dashboard Card 1</h2> <p>Ini adalah card pertama pada dashboard</p> </div> <div class="dashboard-card" id="card2"> <h2>Dashboard Card 2</h2> <p>Ini adalah card kedua pada dashboard</p> </div> <div class="dashboard-card" id="card3"> <h2>Dashboard Card 3</h2> <p>Ini adalah card ketiga pada dashboard</p> </div> </div> <script src="script.js"></script>  </body> </html>

/* Reset dan gaya dasar */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Penataan umum untuk halaman */ body { font-family: Arial, sans-serif; background-color: #f4f7fa; display: flex; justify-content: center; align-items: center; height: 100vh; } /* Container utama yang menampung card */ .container { display: flex; justify-content: space-between; width: 80%; } /* Gaya untuk masing-masing card di dashboard */ .dashboard-card { background-color: #fff; padding: 20px; width: 30%; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); text-align: center; opacity: 0; transform: translateY(50px); animation: bounceIn 1s forwards; /* Menambahkan animasi bounce */ } /* Efek animasi bounce */ @keyframes bounceIn { 0% { opacity: 0; transform: translateY(50px); } 60% { opacity: 1; transform: translateY(-15px); } 80% { transform: translateY(5px); } 100% { transform: translateY(0); } } /* Delay animasi untuk card yang berbeda */ #card1 { animation-delay: 0s; } #card2 { animation-delay: 0.2s; } #card3 { animation-delay: 0.4s; }

// Menambahkan efek dinamis jika dibutuhkan window.onload = function() { const cards = document.querySelectorAll('.dashboard-card'); cards.forEach((card, index) => { setTimeout(() => { card.style.opacity = 1; // Mengubah opasitas setelah animasi selesai }, (index + 1) * 200); // Penundaan animasi untuk setiap card }); };