Membuat Hover-fiddle Menubar Cantik CSS3

Membuat Hover-fiddle Menubar Cantik CSS3-

Css3 Memang bisa menghasilkan sesuatu yang sangat dahsyat jika di explore lebih jauh karena memang di tahun 2014 ini trend animasi untuk website itu di referensikan dibumbui oleh CCS3

Salah satunya ini yang akan saya share <Hover-fiddle>Hover-fiddle

LIHAT DEMONYA DISINI

scriptnya tidak begitu banyak kok, hanya seperti dibawah ini:

var supports3DTransforms = document.body.style[‘webkitPerspective’] !== undefined ||
document.body.style[‘MozPerspective’] !== undefined;

function linkify( selector ) {
if( supports3DTransforms ) {

var nodes = document.querySelectorAll( selector );

for( var i = 0, len = nodes.length; i < len; i++ ) {
var node = nodes[i];

if( !node.className || !node.className.match( /roll/g ) ) {
node.className += ‘ roll’;
node.innerHTML = ‘<span data-title=”‘+ node.text +'”>’ + node.innerHTML + ‘</span>’;
}
};
}
}

linkify( ‘a’ );

 

Yang di atas tadi adalah kode Java Scriptnya aja.

Kalau ingin coba praktek bisa langsung di download Gabungan scriptnya CSS, HTML, dan JS nya  DISINI

One Comments

  1. Syaifudin Hadi says:

    document.body.style[‘webkitPerspective’]

    Apa itu webkitPerpective ?

Leave a Reply