Membuat teks happy new year dengan html css javascript

Bertepatan dengan tanggal 1 januari kita pasti merayakan apa yang dinamakan dengan perayaan tahun baru. Nah di kesempatan kali ini saya akan akan membagikan sebuah source code untuk membuat teks ucapan happy new year dengan html css dan javascript yang dipadukan dengan animasi yang sudah pasti keren tentunya.

Dapat dilihat sebagai berikut untuk tampilan dari teks happy new year yang akan kita buat kali ini

ucapan happy new year dengan html css javascript

Selanjutnya mari kita langsung saja melihat kode html, css dan javascript yang menjadi pembentuk tampilan desain teks happy new year yang ada di gambar diatas.

Kode HTML

Pertama sudah pasti kita harus membuat kerangka html terlebih dahulu, dan berikut kodenya dibawah ini


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Happy New Year</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <section>
        <div class="card">
            <div class="newyear" data-year="StayKoding">
                <div class="text">Happy New Year</div>
            </div>
        </div>
    </section>

<script type="text/javascript" src="main.js"></script>
</body>
</html>

Kode CSS

Kemudian kita mempercantik tampilan dari halaman html dengan kode css berikut ini


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: all 0.35s linear;
    font-family: sans-serif;
}

body {
    overflow: hidden;
}

section {
    display: grid;
    place-content: center;
    height: 100vh;
    background-color: #1cbfc3;
}

.card {
    padding: 1rem;
    background-color: #1cbfc3;
    z-index: 2;
    box-shadow: 0 0 32px 16px #1113;
    border-radius: 10px;
}

.newyear {
    width: 600px;
    height: 300px;
    display: grid;
    place-content: center;
    border: 3px dashed #242424;
}

.newyear .text {
    font-size: 3rem;
    text-transform: uppercase;
    color: #ee2211;
    font-weight: 600;
    transform: scale(0);
}

.newyear:hover .text {
    transform: scale(1);
}

.newyear::before,
.newyear::after {
    content: attr(data-year);
    font-size: 5rem;
    font-weight: 800;
    position: absolute;
    display: grid;
    place-content: center;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transition: all 0.35s linear;
}

.newyear::before {
    clip-path: polygon(0% 0%,
        100% 0%,
        100% 50%,
        0% 50%);
}

.newyear::after {
    clip-path: polygon(0% 50%,
        100% 50%,
        100% 100%,
        0% 100%);
}

.newyear:hover::before {
    top: -3rem;
}

.newyear:hover::after {
    bottom: -3rem;
}

/*Animasi partikel*/

section span {
    background-color: black;
    position: absolute;
    z-index: 1;
    animation: drop 5s linear infinite;
    opacity: 0;
}

@keyframes drop {
    0% {
        transform: translateY(-120px) rotate(0deg);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: translateY(0px) rotate(360deg);
        opacity: 0;
    }
}

section span:nth-child(4n+1) {
    background-color: white;
}

section span:nth-child(4n+2) {
    background-color: green;
}

section span:nth-child(4n+3) {
    background-color: red;
}

section span:nth-child(4n+4) {
    background-color: pink;
}

Kode Javascript

Agar tampilan halaman htmlnya memiliki animasi seperti partikel berjatuhan, maka kita perlu menambahkan kode javascript seperti dibawah ini


let max = 400;
let section = document.querySelector('section');

function partikel() {
    for (i = 0; i < max; i++) {
        span = document.createElement("span");

        let posX = Math.random() * window.innerWidth - 32;
        let posY = Math.random() * window.innerHeight - 32;
        let width = Math.random() * 30;
        let height = Math.random() * 10;
        let delay = Math.random() * 5;

        span.style.left = posX + "px";
        span.style.top = posY + "px";
        span.style.width = width + "px";
        span.style.height = height + "px";
        span.style.animationDelay = delay + "s";

        console.log(span);
        section.append(span);
    }
}

partikel();

Kalau sudah menambahkan kode dari javascript diatas maka tampilan untuk teks happy new yearnya akan tampil seperti dibawah ini

Bagaimana keren bukan? terimakasih sudah menyempatkan waktu untuk membaca artikel saya kali ini. Tidak lupa juga saya mengucapkan selamat tahun baru sekaligus happy new year buat kita semua, semoga ditahun yang baru ini kita lebih semangat lagi dan selalu sehat serta sukses kedepannya