Tips Membuat Slider menggunakan Animatable Pada CSS

Hallo teman-teman dumet school. Kembali lagi dengan saya Shelli Ripati di Kursus WebDesign, tempat kursus terbaik dan nomor satu. Kali ini saya akan membahas tentang Tips Membuat Slider menggunakan Animatable Pada CSS.

Saya akan jelaskan sedikit apa itu animatable pada CSS. Beberapa properti yang ada di CSS bersifat animatable, artinya animasitable tersebut digunakan dalam animasi dan transisi. Sifat animasi dapat berubah secara bertahap dari satu nilai ke nilai lainnya, seperti ukuran, angka, persentase dan warna. Browser yang support dalam properti CSS ini yaitu Google Chrome, Mozilla Firefox, Internet, Safari dan Opera.

Oke, Langsung saja untuk Tips Membuat Slider menggunakan Animatable Pada CSS di sini saya akan membuat struktur htmlnya. Kebetulan disini saya menggunakan bootsrap. Temen-temen juga bisa download untuk bootstrapnya.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Tips Membuat Slider menggunakan Animatable Pada CSS</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  	<div class="container">
  		<div class="row">
		    <div class="jumbotron">
			  <h1>CSS Animatable</h1>
			  <p>Tips Membuat Slider menggunakan Animatable Pada CSS</p>
			  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
			</div>
		</div>
    <div class="row">
        <div class="col-md-6">
          <div class="image1">
          </div>
        </div>
        <div class="col-md-6">
          <div class="image2">
          </div>
        </div>
        </div>
    </div>
	</div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Nah kemudian kita buat style cssnya ya teman-teman, seperti pada script di bawah ini.

<style type="text/css">
    	.image1{
    		height: 500px;
    		background-image: url(../img/img1.jpg);
    		-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
    		animation: mymove 5s infinite;
        transition: 10s;
    	}
      .image2{
        height: 500px;
        background-image: url(../img/img3.jpg);
        -webkit-animation: mymovee 5s infinite; /* Chrome, Safari, Opera */
        animation: mymovee 5s infinite;
      }
      /* Chrome, Safari, Opera */
      @-webkit-keyframes mymove {
          from {background-image: url(../img/img1.jpg);}
          to {background-image: url(../img/img2.jpg);}
      }

      /* Standard syntax */
      @keyframes mymove {
          from {background-image: url(../img/img1.jpg);}
          to {background-image: url(../img/img2.jpg);}
      }
      /* Chrome, Safari, Opera */
      @-webkit-keyframes mymovee {
          from {background-image: url(../img/img3.jpg);}
          to {background-image: url(../img/img4.jpg);}
      }

      /* Standard syntax */
      @keyframes mymovee {
          from {background-image: url(../img/img3.jpg);}
          to {background-image: url(../img/img4.jpg);}
      }
</style>

Nah, Jika sudah selesai maka tampilan akan menjadi seperti pada gambar di bawah ini ya teman-teman. Dan secara otomatis gambar akan berubah sesuai durasi yang kita atur.

Demikian artikel tentang Tips Membuat Slider menggunakan Animatable Pada CSS. Semoga Bermanfaat dan selamat mencoba ya teman-teman.