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

Mas Bintang
wih hasilnya jadi keren gitu yaa mas
reply Reply delete Delete
Rizky Kurniawan Ritonga
Semakin keren kalau di modifikasi lagi sama mas bintang :)
Artikel Bebas
wah iya mas kreen yah. Thanks udah sharing. ditunggu kunjungan baliknya :)

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

semoga beruntung :)
Randi Andrian
wah-wah,. bener, nih.. keren gan Rizky, ilmu nya juga keren",.
reply Reply delete Delete
Rizky Kurniawan Ritonga
hahaha ,
komentar melimpah ,

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

masih sibuk.
Kiki Dee
wah keren nih...saya simpan dl kodenya
reply Reply delete Delete
Rizky Kurniawan Ritonga
ok , terima kasih telah berkunjung :)
Fathoni Muhammad
Bookmark dulu sob. Kapan2 bisa ane coba. Masih sibuk soalnya
reply Reply delete Delete
Rizky Kurniawan Ritonga
oke seb, ditunggu waktu luangnya mampir lagi kesini :D
handri setiawan
nice pos sob salam sukses selalu komen sama follow back y di tungu http://healthtozone.blogspot.com/
reply Reply delete Delete
Rizky Kurniawan Ritonga
oke sob , terima kasih ,

berjalan dengan lancar :)

Posting Komentar

Blog ini tidak menerima komentar via OpenID atau Anonim.
Link aktif akan secara otomatis terhapus oleh sistem.
Untuk memasukkan link dengan aman, gunakan kode [url=http://sites.com]Teks Link[/url]
Untuk memasukkan kode, gunakan kode <i rel="code">Kode Kamu</i>
Untuk memasukkan kode yang panjang, gunakan kode <i rel="pre">Kode Panjang Kamu</i>
Untuk menyisipkan gambar, gunakan kode [img]Url Gambar[/img]
Untuk memasukkan title, gunakan kode <b rel="h4">Title kamu ...</b>
Untuk memberikan efek huruf tebal pada teks, gunakan kode <strong>Teks Kamu ...</strong>
Untuk memberikan efek huruf miring pada teks, gunakan kode <em>Teks Kamu ...</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

Emotikon
:) :( ^_^ :D ;) :-bd :'( :\ :p B) :Q :Ozz 7:( \o/ **p <3 0:) :-a 7:O *fck* x@ X@ ~x( :yaya: =p*

Cancel Reply