Membuat Animasi Border Menggunakan Nicebord.js

Nicebord.js adalah suatu plugin jquery yang khusus untuk memberikan animasi border. Cara menggunakan nicebord.js sangat mudah. Untuk Membuat Animasi Border Menggunakan Nicebord.js teman-teman kunjungi terlebih dahulu link ini. http://www.bestjquery.com/?JIM12h8Q Lalu download file nicebord.js nya.

Link dan file yang dibutuhkan untuk Membuat Animasi Border Menggunakan Nicebord.js yaitu seperti di bawah ini.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="nicebord-0.4/css/nicebord.css">

<script type="text/javascript" src="nicebord-0.4/js/nicebord.js"></script>

Sebelum kita membuat animasi border menggunakan nicebord.js saya akan menjelaskan beberapa atribut yang disediakan oleh nicebord.js, yaitu seperti di bawah ini.

Selanjutnya kita akan membuat struktur html untuk Membuat Animasi Border Menggunakan Nicebord.js

<!DOCTYPE html>

<html>

<head>

               <title>Membuat Animasi Border Menggunakan Nicebord.js</title>

               <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

               <link rel="stylesheet" type="text/css" href="nicebord-0.4/css/nicebord.css">

               <script type="text/javascript" src="nicebord-0.4/js/nicebord.js"></script>

</head>

<body>

        <nav style="width: 500px; margin:auto; background: salmon;padding: 20px;text-align: center">

                  <a href="#" id="satu">Home</a>

                 <a href="#" id="dua">About</a>

                 <a href="#" id="tiga">Gallery</a>

                 <a href="#" id="empat">News</a>

                 <a href="#" id="lima">Contact</a>

        </nav>

</body>

</html>

Kemudian dilanjutkan dengan membuat function dengan animasi yang berbeda seperti berikut ini.

<script>

$(document).ready(function(){

               // default

               $('#satu').nicebord();

               // center option

               $('#dua').nicebord({

                              color: '#567482',

                              orientation: 'ckw',

                              size:2,

                              speed:200,

                              center:true

               });

               // inner direction menu

               $('#tiga').nicebord({

                              color: '#567482',

                              orientation: 'ckw',

                              size:3,

                              pos:'top,bottom',

                              speed:200,

                              direction:true

               });

               // vertical menu

               $('#empat').nicebord({

                              color: '#567482',

                              orientation: 'ackw',

                              size:3,

                              pos:'left',

                              speed:300

               });

               // horizontal menu

               $('#lima').nicebord({

                              color: '#567482',

                              orientation: 'ackw',

                              size:3,

                              pos:'bottom',

                              speed:300

               });

});

</script>

Jika sudah selesai maka akan tampil seperti pada gambar di bawah.

Demikian artikel tentang cara Membuat Animasi Border Menggunakan Nicebord.js. Semoga bermanfaat dan selamat mencoba.