Effect buka tutup layaknya layar bioskop,
jQuery pluginand
coded CSS3
Ayo kita bikin hover efek serelek jebret tuing...tuing :))
Serelek Jebret V.jQuery
Plug-in jQuery<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('body').hover(function() {
$('#filter').animate({height:'0'},500);
}, function() {
$('#filter').animate({height:'100%'},500);
});
});
//]]>
</script> Kode CSS
#filter {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAHklEQVQImWNgQAX/YQwmBgaGf8gy/6CCqMoYGBgYAIIDA/+w1HANAAAAAElFTkSuQmCC);
z-index: ;
}
#filter {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
Cari tagging penutup background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAHklEQVQImWNgQAX/YQwmBgaGf8gy/6CCqMoYGBgYAIIDA/+w1HANAAAAAElFTkSuQmCC);
z-index: ;
}
#filter {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
<div id="filter"></div>Save, lihat hasil kerja :)Beres dengan versi script yang lumayan rumit dalam proses, saatnya versi CSS3 bagi para pencinta C S S :P
Serelek Jebret V.CSS3
CSS-3 Coded
#overlay {
left: 0;
top: 0;
position: fixed;
width: 100%;
height: 100%;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAHklEQVQImWNgQAX/YQwmBgaGf8gy/6CCqMoYGBgYAIIDA/+w1HANAAAAAElFTkSuQmCC);
-webkit-transition-duration: 0.7s;
-moz-transition-duration: 0.7s;
-o-transition-duration:0.7s;
}
#layar:hover #overlay {
height: 0%;
} <div id="layar">Scroll ke paling bawah cari tag <div id="overlay"></div>
</div>Save, look result. Good luck :)
DEMO
http://jsbin.com/erorur/1
Happy serelek \m/
Tidak ada komentar:
Posting Komentar