Animasi Text Keren Menggunakan Jquery

Hallo teman-teman Dumet School, pada kesempatan kali ini saya akan membuat Animasi Text Keren Menggunakan Jquery. Dimana animasi text yang akan saya buat akan saya acak posisinya menggunakan transform pada css. Untuk langkah pertama membuat Animasi Text Keren Menggunakan Jquery teman-teman buat struktur htmlnya seperti di bawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animasi Text Keren Menggunakan Jquery</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <style>
        .text-animasi{
            list-style: none;
            position: relative;
            left: 50%;
            top:50%;
            transform: translateX(-50%) translateY(-50%);
        }
        .text-animasi li{
            display: inline-block;
            margin-right: 5px;
            font-weight: 300;
            color:blue;
            font-size: 5em;
            opacity: 1;
            transition: all 2.5s ease;
        }
        .text-animasi li:last-child{
            margin-right: 0;
        }
        .text-animasi.hidden{
            opacity: 0;
        }
        .text-animasi.hidden li:nth-child(1){transform: translateX(-100px) translateY(100px);}
        .text-animasi.hidden li:nth-child(2){transform: translateX(-20px) translateY(150px);}
        .text-animasi.hidden li:nth-child(3){transform: translateX(350px) translateY(100px);}
        .text-animasi.hidden li:nth-child(4){transform: translateX(-300px) translateY(300px);}
        .text-animasi.hidden li:nth-child(5){transform: translateX(100px) translateY(30px);}
        .text-animasi.hidden li:nth-child(6){transform: translateX(90px) translateY(250px);}
        .text-animasi.hidden li:nth-child(7){transform: translateX(170px) translateY(450px);}
        .text-animasi.hidden li:nth-child(8){transform: translateX(-280px) translateY(80px);}
        .text-animasi.hidden li:nth-child(9){transform: translateX(-340px) translateY(80px);}
        .text-animasi.hidden li:nth-child(10){transform: translateX(130px) translateY(180px);}
        .text-animasi.hidden li:nth-child(11){transform: translateX(-180px) translateY(300px);}
        .text-animasi.hidden li:nth-child(12){transform: translateX(50px) translateY(150px);}
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <ul class="text-animasi hidden">
                    <li>D</li>
                    <li>U</li>
                    <li>M</li>
                    <li>E</li>
                    <li>T</li>
                    <li> </li>
                    <li>S</li>
                    <li>C</li>
                    <li>H</li>
                    <li>O</li>
                    <li>O</li>
                    <li>L</li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

Jika sudah maka tampilannya akan seperti gambar di bawah ini. Dimana text yang kita buat sudah di acak posisinya menggunakan property transform dari css yang kita atur translateX() dan translateY() dititik koordinat tertentu agar tampilan textnya menjadi acak.

Langkah selanjutnya kita akan menyusun text tersebut dengan menghilangkan class hidden yang telah mengatur posisi text dengan tampilan acak. Dan berikut ini scriptnya.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
    $(function(){
        setTimeout(function(){
            $(".text-animasi").removeClass("hidden");
        },500)
    });
</script>

Jika teman-teman buka di browser maka akan langsung mereload halaman dan animasinya pun akan langsung dijalankan sampai text tersebut tersusun rapi seperti tampilan yang seharusnya seperti pada gambar di bawah ini.

Demikian artikel tentang cara Animasi Text Keren Menggunakan Jquery. Semoga dapat bermanfaat dan selamat mencoba.

21 Oktober 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat