jQuery UI Effects Color Animation

Hallo sahabat dumenity berjumpa lagi dalam tutorialÂ kursuswebdesign,Â pada tutorial kali ini saya akan membahas tentang jQuery UI Effects Color Animation. Pada tutorial kali ini kita akan belajar tentang animation pada sebuah color, pada pembahasan sebelumnya saya membahas fungsi animate untuk membuat animasi motor berjalan kali ini saya akan membahas fungsi animate untuk color animation. Untuk artikel kali ini saya sekadar bermain – main dengan fungsi dari sebuah jquery.

Untuk para programer Frontend, pasti sangat menyukai dengan animasi, Karena sebuah website tanpa animasi berasa hambar. Karena website terlihat bagus bukan hanya dari segi tampilan saja, tapi dapat dilihat dari segi animasinya juga.

Oke langsung saja pada pembahasan kita kali ini yaitu cara membuat color animation, pertama silahkan teman – teman buat file HTML di bawah ini.

color_animation.html

HTML di bawah ini di gunakan untuk menunjukan tampilan dari color animation.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Effects Color Animation</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>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid quam laborum aperiam, voluptatibus modi accusamus explicabo? Fugit minus, nemo officia dolore nostrum asperiores harum et fuga soluta culpa ipsa enim!
    </p>
  </div>
</div>
 
<button id="button" class="ui-state-default ui-corner-all">Toggle Effect</button>
 
 
</body>
</html>

Oke kalau sudah silahkan teman – teman buat file CSS di bawah ini, CSS di bawah ini di gunakan untuk mengatur tampilan dari file HTML di atas.

<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 buat function dari color animationnya, script di bawah ini di gunakan untuk menjalankan fungsi dari color animation

<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 untuk melihat hasilnya silahkan teman – teman jalankan sendiri pada browsernya, oke itulah tadi pembahasan saya tentang jQuery UI Effects Color Animation, semoga bermanfaat.

Kategori