Kali ini saya akan membagikan sebuah plugin yang mungkin tidak asing lagi dimata para web dev dan sangat asing dimata para newbie seperti saya, yaitu sebuah plugin text rotator yang berfungsi untuk mengganti sebuah text tertentu dengan text yang lain sesuai yang ditentukan.
Sebenarnya mungkin artikel ini tidak bermakna dan plugin ini jarang dipakai, namun ini hanya sebagai dokumentasi. :)
berikut adalah kodenya :
Pada plugin ini anda setidaknya sudah memiliki JQuery library v1.10.1 dan kode dibawah ini di blog anda.
<script type='text/javascript' src="//googledrive.com/host/0B22vSZUsgbQfcDJPbGhFZGh5d1U/jquery.simple-text-rotator.min.js"></script>
<div class="main">
<h1 class="demo">Caranya <span class="rotate">text, dipisahkan, koma</span> ok</h1>
</div>
.rotating {
display:inline-block;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-transform:rotateX(0) rotateY(0) rotateZ(0);
-moz-transform:rotateX(0) rotateY(0) rotateZ(0);
-ms-transform:rotateX(0) rotateY(0) rotateZ(0);
-o-transform:rotateX(0) rotateY(0) rotateZ(0);
transform:rotateX(0) rotateY(0) rotateZ(0);
-webkit-transition:.5s;
-moz-transition:.5s;
-ms-transition:.5s;
-o-transition:.5s;
transition:.5s;
-webkit-transform-origin-x:50%;
}
.rotating.flip {position:relative;}
.rotating .front,
.rotating .back {
left:0;
top:0;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
}
.rotating .front {
position:absolute;
display:inline-block;
-webkit-transform:translate3d(0,0,1px);
-moz-transform:translate3d(0,0,1px);
-ms-transform:translate3d(0,0,1px);
-o-transform:translate3d(0,0,1px);
transform:translate3d(0,0,1px);
}
.rotating.flip .front {z-index:1;}
.rotating .back {
display:block;
opacity:0;
}
.rotating.spin {
-webkit-transform:rotate(360deg) scale(0);
-moz-transform:rotate(360deg) scale(0);
-ms-transform:rotate(360deg) scale(0);
-o-transform:rotate(360deg) scale(0);
transform:rotate(360deg) scale(0);
}
.rotating.flip .back {
z-index:2;
display:block;
opacity:1;
-webkit-transform:rotateY(180deg) translate3d(0,0,0);
-moz-transform:rotateY(180deg) translate3d(0,0,0);
-ms-transform:rotateY(180deg) translate3d(0,0,0);
-o-transform:rotateY(180deg) translate3d(0,0,0);
transform:rotateY(180deg) translate3d(0,0,0);
}
.rotating.flip.up .back {
-webkit-transform:rotateX(180deg) translate3d(0,0,0);
-moz-transform:rotateX(180deg) translate3d(0,0,0);
-ms-transform:rotateX(180deg) translate3d(0,0,0);
-o-transform:rotateX(180deg) translate3d(0,0,0);
transform:rotateX(180deg) translate3d(0,0,0);
}
.rotating.flip.cube .front {
-webkit-transform:translate3d(0,0,100px) scale(.9,.9);
-moz-transform:translate3d(0,0,100px) scale(.85,.85);
-ms-transform:translate3d(0,0,100px) scale(.85,.85);
-o-transform:translate3d(0,0,100px) scale(.85,.85);
transform:translate3d(0,0,100px) scale(.85,.85);
}
.rotating.flip.cube .back {
-webkit-transform:rotateY(180deg) translate3d(0,0,100px) scale(.9,.9);
-moz-transform:rotateY(180deg) translate3d(0,0,100px) scale(.85,.85);
-ms-transform:rotateY(180deg) translate3d(0,0,100px) scale(.85,.85);
-o-transform:rotateY(180deg) translate3d(0,0,100px) scale(.85,.85);
transform:rotateY(180deg) translate3d(0,0,100px) scale(.85,.85);
}
.rotating.flip.cube.up .back {
-webkit-transform:rotateX(180deg) translate3d(0,0,100px) scale(.9,.9);
-moz-transform:rotateX(180deg) translate3d(0,0,100px) scale(.85,.85);
-ms-transform:rotateX(180deg) translate3d(0,0,100px) scale(.85,.85);
-o-transform:rotateX(180deg) translate3d(0,0,100px) scale(.85,.85);
transform:rotateX(180deg) translate3d(0,0,100px) scale(.85,.85);
}
$(document).ready(function () {
$(".demo .rotate").textrotator({
animation: "fade",
speed: 1000
});
});
dan untuk melihat previewnya silahkan lihat dibawah ini :
Sekian tutorial kali ini, semoga bisa bermanfaat. :)
wih hasilnya jadi keren gitu yaa mas
BalasHapusSemakin keren kalau di modifikasi lagi sama mas bintang :)
Hapuswah iya mas kreen yah. Thanks udah sharing. ditunggu kunjungan baliknya :)
HapusVisit
Keren Nih sob =D
BalasHapusya, terima kasih :)
Hapusthanks telah berbagi ilmu sob...
BalasHapusoke sob :)
HapusMas bagaimana yah memberi efek overlay pada saat memblok seperti blog ini ?, makasih sebelumnya :)
BalasHapusohhh, tertarik juga ya :D
HapusNama pluginnya [url=http://lab.hakim.se/fokus/]Fokus[/url]
semoga beruntung :)
gk ada tutorial indo nya yah ?, kalau ada yg langsung buat plugin Blogger mas :D
Hapushahaha :D
Hapussejauh ini memang belum ada artikel indonya.
oke akan saya post esok hari atau secepatnya :)
Kebanyakan yang membuat perkembangan web itu orang luar negeri, jadi kalau ingin mengerti perkembangan web ya jadi harus mengikuti/mengerti perkembangannya.
HapusOrang indonesia itu kebanyakan hanya memodifikasi dan terkadang mengatasnamakan hasil modifikasinya adalah buatannya.
ya mas Jeniv
Hapuskemungkinan itulah saya :)
Saya tunggu postingannya mas :D
Hapusoke ,
Hapuspagi nanti akan saya post :)
wah-wah,. bener, nih.. keren gan Rizky, ilmu nya juga keren",.
BalasHapushahaha ,
Hapuskomentar melimpah ,
ini belum keren mas randi.
masih banyak diluar sana yang belum saya post disini
nice trick sob, request donk widget pasang iklannya :D
BalasHapusmas ,di request tutorial buat header navigasi kaya blog mas...responsif gitu
BalasHapusoke sob,
Hapusakan saya post lain waktu
masih sibuk.
di tunggu ya mas ,keren kaya eBright Bootstrap Template .
HapusYups
Hapus#Ketahuan Deh
mas.. di tunggu lagi nih wkwkwk
Hapuswah keren nih...saya simpan dl kodenya
BalasHapusok , terima kasih telah berkunjung :)
HapusBookmark dulu sob. Kapan2 bisa ane coba. Masih sibuk soalnya
BalasHapusoke seb, ditunggu waktu luangnya mampir lagi kesini :D
Hapusnice pos sob salam sukses selalu komen sama follow back y di tungu http://healthtozone.blogspot.com/
BalasHapusoke sob , terima kasih ,
Hapusberjalan dengan lancar :)
Keren mas :)
BalasHapusterima kasih =D
Hapus