Animasi Colorfull Text Menggunakan Jquery

Hallo teman-teman Dumet School, pada kesempatan kali ini saya akan membuat Animasi Colorfull Text Menggunakan Jquery. Dimana Animasi colorfull ini akan saya buat dengan melakukan random warna menggunakan jquery. Tidak hanya itu disini juga saya akan membuat animasi huruf yang tampil dari atas lalu menyusun kebawah secara perlahan. Untuk dapat membuat Animasi Colorfull Text Menggunakan Jquery kita akan buat struktur htmlnya seperti di bawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animasi Colorfull Text Menggunakan Jquery</title>
    <script src="js/jquery.min.js"></script>
</head>
<body>
    
<div class="text-box"></div>

</body>

</html>

Untuk struktur html diatas teman-teman cukup sediakan div class text-box untuk menampilkan huruf yang akan dibuat menggunakan jquery. Jika sudah maka tahap selanjutnya teman-teman buat style css seperti di bawah ini. 

<style>
    .text-box{
        margin: 200px auto;
        display: flex;
        flex-wrap: wrap;
    }

    .split-text{
        padding: 15px;
        font-size: 100px;
        font-family: sans-serif;
    }
</style>

Dan jika sudah membuat html dan style css maka tahap terakhir teman-teman buat script untuk membuat animasi random warna dengan menggunakan jquery dan juga ada animasi tambahan yang saya berikan disini yaitu dengan menampilkan huruf dari atas secara perlahan yang kemudian akan tersusun rapi dan berikut ini scriptnya.

<!--jquery scrpit -->
<script type="text/javascript">    
    $(document).ready(function(){
          var text = "Dumet School Tebet";
          $.each(text.split(""), function(key, val){
          $('.text-box').append('<div class="split-text">'+val+'</div>');

     });
          var each_text = $('.split-text');
          $.each(each_text, function(){
            var rand = Math.floor(Math.random()*1000);
             // random color
             var r = Math.floor(Math.random()*255);
             var g = Math.floor(Math.random()*255);
             var b = Math.floor(Math.random()*255);

             $(this).css({
                 'color':'rgb('+r+','+g+','+b+')',
                 'margin-top': -rand

             }).animate({
                 marginTop: '0px'
             }, 1000);

          });
  });

</script>

Teman-teman bisa perhatikan disini untuk membuat warna random saya menggunakan Math.floor(Math.random()*nilai) Dimana jika dibuka atau melakukan refresh maka akan tampil huruf atau text yang muncul dari atas secara perlahan dengan memiliki warna yang colorfull. setiap dilakukan refresh warnanya pun akan terus berubah-ubah.

Demikian artikel tentang cara Animasi Colorfull Text Menggunakan Jquery. Sampai ketemu di pembahasan selanjutnya. Semoga dapat bermanfaat dan selamat mencoba

23 Desember 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