Membuat Fieldset dengan label melayang
Ini adalah contoh efek sederhana yang bisa di terapkan pada kolom form atau kolom sejenis. Animasi yang di hasilkan akan terjadi saat pengguna mengklik kolom yang di sediakan. Efek yang di tampilkan cukup atraktif sehingga tidak membosankan dan pasti berbeda dengan from yang biasa meskipun hanya sebatas efek semata.
Tampilan seperti ini adalah hasil perpaduan antara Jquery, JQuery Easing, CSS dan tentu saja HTML. Efek yang dirasakan adalah dengan terjadinya perpindahan teks saat kolom terkait di klik. Untuk font, agar tampilan lebih atraktif, font yang di gunakan adalah Sniglet.
Berikut Demonya,
Langsung saja,
Jquery
Jika kamu telah menggunakan Jquery pada template, langkah ini dapat dilewati.
<script src='http://code.jquery.com/jquery-1.11.2.min.js' type='text/javascript'>
JQuery Easing
Jquery ini lah yang nanti akan berperan dalam memanggil animasinya.
jQuery.easing.jswing=jQuery.easing.swing;jQuery.extend(jQuery.easing,{def:"easeOutQuad",swing:function(e,f,a,h,g){return jQuery.easing[jQuery.easing.def](e,f,a,h,g)},easeInQuad:function(e,f,a,h,g){return h*(f/=g)*f+a},easeOutQuad:function(e,f,a,h,g){return -h*(f/=g)*(f-2)+a},easeInOutQuad:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f+a}return -h/2*((--f)*(f-2)-1)+a},easeInCubic:function(e,f,a,h,g){return h*(f/=g)*f*f+a},easeOutCubic:function(e,f,a,h,g){return h*((f=f/g-1)*f*f+1)+a},easeInOutCubic:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f+a}return h/2*((f-=2)*f*f+2)+a},easeInQuart:function(e,f,a,h,g){return h*(f/=g)*f*f*f+a},easeOutQuart:function(e,f,a,h,g){return -h*((f=f/g-1)*f*f*f-1)+a},easeInOutQuart:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f*f+a}return -h/2*((f-=2)*f*f*f-2)+a},easeInQuint:function(e,f,a,h,g){return h*(f/=g)*f*f*f*f+a},easeOutQuint:function(e,f,a,h,g){return h*((f=f/g-1)*f*f*f*f+1)+a},easeInOutQuint:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f*f*f+a}return h/2*((f-=2)*f*f*f*f+2)+a},easeInSine:function(e,f,a,h,g){return -h*Math.cos(f/g*(Math.PI/2))+h+a},easeOutSine:function(e,f,a,h,g){return h*Math.sin(f/g*(Math.PI/2))+a},easeInOutSine:function(e,f,a,h,g){return -h/2*(Math.cos(Math.PI*f/g)-1)+a},easeInExpo:function(e,f,a,h,g){return(f==0)?a:h*Math.pow(2,10*(f/g-1))+a},easeOutExpo:function(e,f,a,h,g){return(f==g)?a+h:h*(-Math.pow(2,-10*f/g)+1)+a},easeInOutExpo:function(e,f,a,h,g){if(f==0){return a}if(f==g){return a+h}if((f/=g/2)<1){return h/2*Math.pow(2,10*(f-1))+a}return h/2*(-Math.pow(2,-10*--f)+2)+a},easeInCirc:function(e,f,a,h,g){return -h*(Math.sqrt(1-(f/=g)*f)-1)+a},easeOutCirc:function(e,f,a,h,g){return h*Math.sqrt(1-(f=f/g-1)*f)+a},easeInOutCirc:function(e,f,a,h,g){if((f/=g/2)<1){return -h/2*(Math.sqrt(1-f*f)-1)+a}return h/2*(Math.sqrt(1-(f-=2)*f)+1)+a},easeInElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return -(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e},easeOutElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return g*Math.pow(2,-10*h)*Math.sin((h*k-i)*(2*Math.PI)/j)+l+e},easeInOutElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k/2)==2){return e+l}if(!j){j=k*(0.3*1.5)}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}if(h<1){return -0.5*(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e}return g*Math.pow(2,-10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j)*0.5+l+e},easeInBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}return i*(f/=h)*f*((g+1)*f-g)+a},easeOutBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}return i*((f=f/h-1)*f*((g+1)*f+g)+1)+a},easeInOutBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}if((f/=h/2)<1){return i/2*(f*f*(((g*=(1.525))+1)*f-g))+a}return i/2*((f-=2)*f*(((g*=(1.525))+1)*f+g)+2)+a},easeInBounce:function(e,f,a,h,g){return h-jQuery.easing.easeOutBounce(e,g-f,0,h,g)+a},easeOutBounce:function(e,f,a,h,g){if((f/=g)<(1/2.75)){return h*(7.5625*f*f)+a}else{if(f<(2/2.75)){return h*(7.5625*(f-=(1.5/2.75))*f+0.75)+a}else{if(f<(2.5/2.75)){return h*(7.5625*(f-=(2.25/2.75))*f+0.9375)+a}else{return h*(7.5625*(f-=(2.625/2.75))*f+0.984375)+a}}}},easeInOutBounce:function(e,f,a,h,g){if(f<g/2){return jQuery.easing.easeInBounce(e,f*2,0,h,g)*0.5+a}return jQuery.easing.easeOutBounce(e,f*2-g,0,h,g)*0.5+h*0.5+a}});Script
Peran Script ini juga tidak kalah pentingnya.
$(".flp label").each(function(){
var sop = '<span class="ch">';
var scl = '</span>';
$(this).html(sop + $(this).html().split("").join(scl+sop) + scl);
$(".ch:contains(' ')").html(" ");
})
var d;
$(".flp input").focus(function(){
var tm = $(this).outerHeight()/2 *-1 + "px";
$(this).next().addClass("focussed").children().stop(true).each(function(i){
d = i*50;
$(this).delay(d).animate({top: tm}, 200, 'easeOutBack');
})
})
$(".flp input").blur(function(){
if($(this).val() == "")
{
$(this).next().removeClass("focussed").children().stop(true).each(function(i){
d = i*50;
$(this).delay(d).animate({top: 0}, 500, 'easeInOutBack');
})
}
})
CSS
Inilah kode CSSnya.
@font-face {
font-family: 'Sniglet';
font-style: normal;
font-weight: 400;
src: local('Sniglet Regular'), local('Sniglet-Regular'), url(http://fonts.gstatic.com/s/sniglet/v7/zaGgxcO7SfusqT6GpDlcHg.woff) format('woff');
}
main {
width:500px;
font-family: 'Sniglet', cursive;
margin:0 auto;
padding-bottom:10px;
border:solid 1px #ccc;
border-radius:6px;
overflow:hidden;
-webkit-box-shadow: 2px 2px 23px -1px rgba(176,170,176,1);
-moz-box-shadow: 2px 2px 23px -1px rgba(176,170,176,1);
box-shadow: 2px 2px 23px -1px rgba(176,170,176,1);
}
h1 {
font-size:24px;
font-weight:normal;
background:#099;
color:#FFF;
text-align:center;
padding:20px 0;
margin-bottom:40px;
}
.flp {
padding:0 50px;
}
.flp div {
position:relative;
margin-bottom:30px;
}
.flp input,
.flp label {
width:400px;
display:block;
font:inherit;
font-size:16px;
line-height:24px;
height:46px;
border:1px solid #999;
}
.flp input {
padding:10px;
outline:none;
border-radius:3px;
}
.flp label {
position:absolute;
left:0;
top:0;
padding:10px 8px;
border-color:transparent;
color:#666;
cursor:text;
}
.ch {
display:block;
float:left;
position:relative;
background:#FFF;
}
.ch:first-child {
padding-left:6px;
}
.ch:last-child {
padding-right:6px;
}
.focussed {
pointer-events:none;
}
HTML
Dan inilah kode HTML yang akan berperan sebagai penyangga tampilannya.
<main> <h1>Fieldset dengan label melayang</h1> <form class="flp"> <div> <input type="text" id="fname" /> <label for="fname">Nama</label> </div> <div> <input type="text" id="email" /> <label for="email">Email</label> </div> </form> </main>
Silahkan modifikasi sesuai selera!!
Hasilnya sudah saya uji coba dan mampu bekerja dengan baik pada browser Mozilla Firefox, Internet Explorer 11 dan Google Chrome!
0 komentar:
Post a Comment
Kolom komentar tersedia hanya untuk diskusi dan bukan sarana untuk promosi.
Komentar menggunakan media sosial seperti Facebook dan lain-lain sengaja di nonaktifkan karena sering di salahgunakan.
Mohon untuk tidak menyisipkan link promosi pada kolom komentar.