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:

  1. wih hasilnya jadi keren gitu yaa mas

    BalasHapus
    Balasan
    1. Semakin keren kalau di modifikasi lagi sama mas bintang :)

      Hapus
    2. wah iya mas kreen yah. Thanks udah sharing. ditunggu kunjungan baliknya :)

      Visit

      Hapus
  2. thanks telah berbagi ilmu sob...

    BalasHapus
  3. Mas bagaimana yah memberi efek overlay pada saat memblok seperti blog ini ?, makasih sebelumnya :)

    BalasHapus
    Balasan
    1. ohhh, tertarik juga ya :D
      Nama pluginnya [url=http://lab.hakim.se/fokus/]Fokus[/url]

      semoga beruntung :)

      Hapus
    2. gk ada tutorial indo nya yah ?, kalau ada yg langsung buat plugin Blogger mas :D

      Hapus
    3. hahaha :D

      sejauh ini memang belum ada artikel indonya.
      oke akan saya post esok hari atau secepatnya :)

      Hapus
    4. Kebanyakan yang membuat perkembangan web itu orang luar negeri, jadi kalau ingin mengerti perkembangan web ya jadi harus mengikuti/mengerti perkembangannya.

      Orang indonesia itu kebanyakan hanya memodifikasi dan terkadang mengatasnamakan hasil modifikasinya adalah buatannya.

      Hapus
    5. ya mas Jeniv

      kemungkinan itulah saya :)

      Hapus
    6. Saya tunggu postingannya mas :D

      Hapus
    7. oke ,
      pagi nanti akan saya post :)

      Hapus
  4. wah-wah,. bener, nih.. keren gan Rizky, ilmu nya juga keren",.

    BalasHapus
    Balasan
    1. hahaha ,
      komentar melimpah ,

      ini belum keren mas randi.
      masih banyak diluar sana yang belum saya post disini

      Hapus
  5. nice trick sob, request donk widget pasang iklannya :D

    BalasHapus
  6. mas ,di request tutorial buat header navigasi kaya blog mas...responsif gitu

    BalasHapus
    Balasan
    1. oke sob,
      akan saya post lain waktu

      masih sibuk.

      Hapus
    2. di tunggu ya mas ,keren kaya eBright Bootstrap Template .

      Hapus
    3. mas.. di tunggu lagi nih wkwkwk

      Hapus
  7. wah keren nih...saya simpan dl kodenya

    BalasHapus
    Balasan
    1. ok , terima kasih telah berkunjung :)

      Hapus
  8. Bookmark dulu sob. Kapan2 bisa ane coba. Masih sibuk soalnya

    BalasHapus
    Balasan
    1. oke seb, ditunggu waktu luangnya mampir lagi kesini :D

      Hapus
  9. nice pos sob salam sukses selalu komen sama follow back y di tungu http://healthtozone.blogspot.com/

    BalasHapus
    Balasan
    1. oke sob , terima kasih ,

      berjalan dengan lancar :)

      Hapus

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*