Animasi Colorfull Text Menggunakan Jquery

23/12/2019    Shelli Ripati    64     Website

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

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More