JQuery Text Rotator


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. :)

31 komentar

wih hasilnya jadi keren gitu yaa mas
Reply Delete
Semakin keren kalau di modifikasi lagi sama mas bintang :)
wah iya mas kreen yah. Thanks udah sharing. ditunggu kunjungan baliknya :)

Visit
Mas bagaimana yah memberi efek overlay pada saat memblok seperti blog ini ?, makasih sebelumnya :)
Reply Delete
ohhh, tertarik juga ya :D
Nama pluginnya [url=http://lab.hakim.se/fokus/]Fokus[/url]

semoga beruntung :)
wah-wah,. bener, nih.. keren gan Rizky, ilmu nya juga keren",.
Reply Delete
hahaha ,
komentar melimpah ,

ini belum keren mas randi.
masih banyak diluar sana yang belum saya post disini
nice trick sob, request donk widget pasang iklannya :D
Reply Delete
mas ,di request tutorial buat header navigasi kaya blog mas...responsif gitu
Reply Delete
oke sob,
akan saya post lain waktu

masih sibuk.
Anonim Januari 26, 2014
wah keren nih...saya simpan dl kodenya
Reply Delete
ok , terima kasih telah berkunjung :)
Bookmark dulu sob. Kapan2 bisa ane coba. Masih sibuk soalnya
Reply Delete
oke seb, ditunggu waktu luangnya mampir lagi kesini :D
nice pos sob salam sukses selalu komen sama follow back y di tungu http://healthtozone.blogspot.com/
Reply Delete
oke sob , terima kasih ,

berjalan dengan lancar :)

Posting Komentar

no Spam :)

Cancel Reply