Membuat Animasi Perubahan Warna Menggunakan Color Animation

Pada pembahasan kali ini saya akan membahas tentang cara Membuat Animasi Perubahan Warna Menggunakan Color Animation. Color animation, Plugin ini didasarkan pada Color Animasi oleh John Resig. Ini perbaikan bug utama dan juga menambahkan dukungan untuk Bordercolor-properti. Color animation ini merupakan plugin dari jquery, maka dari itu untuk menggunakannya kita membutuh juga file jquerynya. Untuk mendapatkannya silahkan teman – teman kunjungi halaman website berikut ini https://jquery.com/ .

Jquery juga menambahkan Plugin RGBA-warna, jadi sekarang teman – teman bisa membuat transparansi latar belakang dan teks latar depan secara independen. Namun ada yang perlu teman – teman ingat bahwa Internet Explorer 8 dan sebelumnya tidak mendukung RGBA-warna. Oke langsung saja untuk Membuat Animasi Perubahan Warna Menggunakan Color Animation, silahkan simak tutorial berikut ini, silahkan buat script dibawah ini;

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Effects - Animate demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
 
 
</head>
<body>
 
<div class="toggler">
  <div id="effect" class="ui-widget-content ui-corner-all">
    <h3 class="ui-widget-header ui-corner-all">Animate</h3>
    <p>
      Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
    </p>
  </div>
</div>
 
<button id="button" class="ui-state-default ui-corner-all">Toggle Effect</button>
 
 
</body>
</html>

kalau sudah silahkan tambahkan file css berikut ini diantara tag <head> dan </head>, kenapa diantara tag <head> dan </head> karena saya menggunakan fungsi CSS internal. Untuk CSS di sini saya tidak akan membahasnya lagi, silahkan teman – teman lihat di sini untuk referensi CSS nya. Klik…!!!

<style>
    .toggler { width: 500px; height: 200px; position: relative; }
    #button { padding: .5em 1em; text-decoration: none; }
    #effect { width: 240px; height: 170px; padding: 0.4em; position: relative; background: #fff; }
    #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
  </style>

Oke kalau sudah silahkan teman – teman tambahlkan lagi file dibawah ini, fungsi dari file jquery nya ;

 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    var state = true;
    $( "#button" ).on( "click", function() {
      if ( state ) {
        $( "#effect" ).animate({
          backgroundColor: "#aa0000",
          color: "#fff",
          width: 500
        }, 1000 );
      } else {
        $( "#effect" ).animate({
          backgroundColor: "#fff",
          color: "#000",
          width: 240
        }, 1000 );
      }
      state = !state;
    });
  } );
  </script>

Oke kalau sudah silahkan save, dan jalankan pada browsernya maka hasilnya kan seperti di bawah ini;

Oke cukup mudah bukan, silahkan lihat hasil demo cara Membuat Animasi Perubahan Warna Menggunakan Color Animation di sini. LIHAT…!!!

Membuat Animasi Perubahan Warna Menggunakan Color Animation

Kategori