Tutorial Mudah Cara Membuat Website Terlihat Hidup Dengan Animate.css
Web Developer | Blogger | Creator of RubyPedia.com
30 Oktober 2017

CSS adalah kumpulan dari beberapa basris kode yang digunakan untuk mempercantik halaman website, seperti mengganti background, merubah warna tulisan, membuat tulisan tebal, miring dll, CSS sendiri biasanya dikombinasikan / digabungkan dengan HTML untuk membangun website.

Pada tutorial kali ini kita akan berkenalan dengan animate.css, apa itu animate.css ?

Animete.css merupakan library CSS untuk membuat sebuah effect-effect didalam website, animate.css membuat website menjadi seperti hidup dengan menggunakan effect-effect bawaanya, ada puluhan effect yang ditawarkan oleh animate.css, kalian bisa melihatnya langsung di https://daneden.github.io/animate.css/

Pada kesempatan kali ini kita akan mencoba memakai beberapa effect dari animate.css, jadi apa saja yang dibutuhkan ?

index.html

Oke langsung saja, buatlah sebuah folder baru dengan nama belajar-animate-css didalam folder htdocs (jika menggunakan xampp).

Selanjutnya buatlah sebuah file baru didalam folder project kita, dengan nama index.html, kemudian masukkan kode berikut ini:

<!DOCTYPE html>
<!--
    @author  : Fika Ridaul Maulayya
    @package : Animate CSS
    @license : https://www.rubypedia.com
--> 
<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">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="">
    <title>Ruby Pedia - Animate CSS</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://daneden.github.io/animate.css/animate.min.css">
  </head>
  <body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Ruby Pedia - Animate CSS</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <form class="navbar-form navbar-right">
            <div class="form-group">
              <input type="text" placeholder="Email" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="Password" class="form-control">
            </div>
            <button type="submit" class="btn btn-success">Sign in</button>
          </form>
        </div>
      </div>
    </nav>
    <div class="jumbotron animated lightSpeedIn" style="margin-top: 50px">
      <div class="container" style="text-align: center;">
        <h2>RubyPedia.com</h2>
        <div class="col-md-8 col-md-offset-2">
          <p>RubyPedia.com adalah situs yang menyediakan tutorial & screencast pemrogramman ruby dengan bahasa indonesia.</p>
          <p><a class="btn btn-primary btn-lg" href="https://www.rubypedia.com" role="button">Learn more »</a></p>
      </div>
      </div>
    </div>
    <div class="container" style="margin-top: 20px">
      <div class="row">
      <div class="col-md-3 animated swing">
          <div class="thumbnail">
            <img src="https://semantic-ui.com/images/wireframe/image.png" alt="...">
            <div class="caption">
              <h3>Tutorial Animate CSS</h3>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo.</p>
              <p><a href="#" class="btn btn-primary" role="button">Selengkapn</a> </p>
            </div>
          </div>
        </div>
              <div class="col-md-3 animated swing">
          <div class="thumbnail">
            <img src="https://semantic-ui.com/images/wireframe/image.png" alt="...">
            <div class="caption">
              <h3>Tutorial Animate CSS</h3>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo.</p>
              <p><a href="#" class="btn btn-primary" role="button">Selengkapn</a> </p>
            </div>
          </div>
        </div>
              <div class="col-md-3 animated swing">
          <div class="thumbnail">
            <img src="https://semantic-ui.com/images/wireframe/image.png" alt="...">
            <div class="caption">
              <h3>Tutorial Animate CSS</h3>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo.</p>
              <p><a href="#" class="btn btn-primary" role="button">Selengkapn</a> </p>
            </div>
          </div>
        </div> 
              <div class="col-md-3 animated swing">
          <div class="thumbnail">
            <img src="https://semantic-ui.com/images/wireframe/image.png" alt="...">
            <div class="caption">
              <h3>Tutorial Animate CSS</h3>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo.</p>
              <p><a href="#" class="btn btn-primary" role="button">Selengkapn</a> </p>
            </div>
          </div>
        </div>
      </div>
      <hr>
      <footer>
        <p>© 2016 Company, Inc.</p>
      </footer>
    </div> 
  </body>
</html>

Dari kode diatas, kita bisa melihat dimana animate.css bekerja, yaitu didalam attribute class, cara memakainya didalam attribute class kita tambahkan animated NamaEffect, contoh seperti berikut ini:

<div class="col-md-3 animated swing">

</div>

Keterangan : dalam class diatas kita bisa lihat ada col-md-3, animated, dan swing. jadi untuk mendeklarasikan animate.css kita perlu memanggil class animated dan kemudian memanngil effectnya jadi hasilnya animated NamaEffect

Selanjutnya jalankan project kita dengan mengetikkan di address bar browser http://localhost/belajar-animate-css, maka kurang lebih tampilannya kurang lebih seperti berikut ini:

Blog ini telah dibaca sebanyak 2445 kali
CSS3 CSS HTML Bootstrap Animate CSS Animate.css

Sekilas Tentang Penulis

Fika Ridaul Maulayya
Web Developer | Blogger | Creator of RubyPedia.com

KOMENTAR

blog comments powered by Disqus