Blog yang berisi seputar kode-kode web pada platform blogger.

Cari blog ini

JQuery Text Rotator

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

hanya sefruit manusia yang masih giat belajar

Medan, North Sumatera, Indonesia

31 komentar

Posting Komentar

no Spam 🙂

Batal Membalas