Input fields Game Effects dengan jQuery plugin

Pada tutorial kali ini saya akan membagikan sedikit trik efek pada input fields seperti efek di fields video games, ini salah satu tips yang cukup menarik yang saya share karena cukup unik dari jQuery style plugins. Kita akan menggunakan FancyInput plugin untuk efek yang cukup unik pada fields kita.

DOWNLOAD CODE | DEMO

Tips ini menggunakan plugin yang simpel
Step 1 – Download plugin dari https://github.com/yairEO/fancyInput, Lalu Extract
Step 2 – Include jQuery library dan link css berikut pada <head>.

<link rel="stylesheet" href="css/fancyInput.css">
<link rel="stylesheet" href="css/styles.css">
<script src='js/jquery-1.9.1.min.js'></script>

Step 3 – Buat input field menggunakan div serta class.

<div style="margin: 10px 0px;">
<input type="text" class="fancy_effect1" value="effect 1">
</div>

Step 4 – Include file JS sebelum akhir dari <body> tag.

<script src='js/fancyInput.js'></script>

Step 5 – Panggil fungsi fancyInput().

<script type="text/javascript">
$(document).ready(function(){
$('.fancy_effect1').fancyInput()[0];
});
</script>

Untuk melihat hasilnya silahkan run, atau lihat pada demo

Note:
– Plugin bisa juga dipakai pada text area.
Cons:
–Plugin ini tidak support pada internet explorer browsers.
Saya harap teman2 bisa mengikkuti tutorial ini, serta share dan komment jika ada pertanyaan :)..

Contributors

Wednesday, October 7, 2015