Membuat Animasi Border Menggunakan Nicebord.js

13/05/2019    Shelli Ripati    157     Website

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.

Attribute

Type

Default

Description

color

String

'000000'

Warna border

orientation

String

'ckw'

Arah animasi: Searah jarum jam(ckw), lawan arah jarum jam (ackw)

size

Number

1

Ukuran atau ketebalan border

pos

String

'top,right,bottom,left'

Posisi border diatas, bawah, kiri atau kanan

speed

Number

500

Waktu

direction

Boolean

false

Arah animasi, jika false animasi terjadi di sepanjang sisi elemen, jika benar bagian dalam elemen.

fix

Boolean

false

Mengatur ukuran tetap elemen yang diterapkan nicebord. Biasanya gambar.

center

Boolean

false

Animasi border dimulai dari tengah

 

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.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More