Senin, 22 September 2014

Membuat Roll-Spin Effect (Efek Berputar) Pada Teks

Membuat Roll-Spin Effect (Efek Berputar) Pada Teks - Saya tidak tahu apa nama efek yang saya buat ini, karena adanya hasil efek berputar maka saya menamakannya "Roll Spin Effect" - Roll adalah gulungan dan Spin adalah berputar. Jadi seperti itulah, entah nyambung atau tidak yang penting efek dari hasilnya adalah berputar. Selain menimbulkan efek berputar pada teks, efek lainnya adalah bisa menghentikan efek berputar tersebut dengan mengarahkan kursor mouse

Membuat roll-spin effect atau efek berputar pada teks ini hanya menggunakan sedikit kode CSS dan tanpa script sama sekali sehingga tidak akan memperberat loading blog Anda

Baca juga Cara mempercepat loading blog

Membuat Roll-Spin Effect (Efek Berputar) Pada Teks

DEMOnya dibawah ini ya..

Roll-Spin atau Berputar-putar


Cara Membuat Roll-Spin Effect (Efek Berputar) Pada Teks
Salin kode CSS berikut ini kedalam template blog
#roll-bg {
margin:1em auto;
-webkit-perspective:1200px;
-moz-perspective:1200px;
-ms-perspective:1200px;
perspective:1200px;
}
#roll-bg p {
font-size:30px;
text-align:center;
color:#444;
padding:10px 0;
}
#roll-spin {
-webkit-animation-name:roll-spin;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
-webkit-animation-duration:6s;
animation-name:roll-spin;
animation-timing-function:linear;
animation-iteration-count:infinite;
animation-duration:6s;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
transform-style:preserve-3d;
}
#roll-spin:hover {
-webkit-animation-play-state:paused;
animation-play-state:paused;
}
@-webkit-keyframes roll-spin {
from {-webkit-transform:rotateY(0deg);}
to {-webkit-transform:rotateY(-360deg);}
}
@keyframes roll-spin {
from {-moz-transform:rotateY(0deg);
-ms-transform:rotateY(0deg);
transform:rotateY(0deg);}
to {-moz-transform:rotateY(-360deg);
-ms-transform:rotateY(-360deg);
transform:rotateY(-360deg);}
}
HTML
<div id="roll-bg">
<p id="roll-spin">
Roll-Spin atau Berputar-putar</p>
</div>

Kode diatas merupakan pengembangan dari efek jatuh yang pernah saya buat sebelumnya, silahkan baca di Membuat efek jatuh dengan CSS

Silahkan jika tertarik untuk membuat rool spin effect diatas, agar teks di blog Anda bisa berputar

Membuat Roll-Spin Effect (Efek Berputar) Pada Teks Rating: 4.5 Diposkan Oleh: ana sriwahyuni

21 komentar:

  1. kalau misalkan teksnya diganti dengan widget, misalnya alexa rank bisa nggak mbak ?

    BalasHapus
    Balasan
    1. bisa Kang, di artikel berikutnya akan saya update :)

      Hapus
    2. Di tunggu sekali nih Mbak Ana perkembangan selanjutnya
      Tentang effects ini untuk di terapkan pada tatanan widget :-bd

      Hapus
  2. keren banget ya mbak ,sip sip ditunggu artikel selanjutnya

    BalasHapus
    Balasan
    1. masih dibuatkan mas..
      makasih ya atas kunjungannya..

      Hapus
  3. wah keren juga nih tulisannya bisa gerak gerak getu, jadi nya tambah cantik ya buk tampilan blog kita, ada banyak animasinya ;)

    BalasHapus
    Balasan
    1. iya mbak Wahyu, agar lebih menarik.. btw, untuk WP sepertinya sudah ada pluginnya mbak.. :)

      Hapus
  4. wah kalau dilihat lama kelamaan ya mas, kepala jadi pusing ya heehee

    BalasHapus
    Balasan
    1. heheheee.. resiko ditanggung sendiri loh mas.. :P

      Hapus
  5. ada saja yg baru di sini..!, seperti membuat roll spin efek ini..
    unik Mba..Ana

    BalasHapus
    Balasan
    1. berusaha memberikan yang terbaik mas Aldino..
      makasih ya atas kunjungannya..

      Hapus
  6. Salam Mbak Ana kunjungan Perdana, sekaligus blogwalking
    Wah keren sekali ya Mbak. Effects roll spin nya sangat unik
    Yang baru saya lihat. ijin coba, oh ya ijin follow blog juga Mbak
    Biar silaturrahim antar blog lebih mudah. makasih atas kerja sama nya :)

    BalasHapus
    Balasan
    1. terimakasih mas Saud atas kunjungannya,,
      insyaallah akan saya follow, ini saya juga baru ol setelah 1 minggu...
      :)

      Hapus
  7. izin copy kode nya, buat koleksi. barangkali nanti membutuhkan. ^_^

    BalasHapus
    Balasan
    1. silahkan mas Andri, semoga bermanfaat... :)

      Hapus
  8. ini sangat bagus jika ditempatkan pada blog yang bergenre aplikasi ya mas, serba animasi tu heehee

    BalasHapus
    Balasan
    1. heheee.. boleh boleh.. asalkan tidak menimbulkan pusing ya mas :P

      Hapus
  9. yg ini abah baru suka... buat roll spin efek

    BalasHapus
    Balasan
    1. waahh Abah juga hadir disini, makasih banyak ya Abah..

      Hapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia