12.4.14
39
Membuat Efek CSS Animasi Pada Tulisan - Ragam dan cara membuat teks pada tulisan artikel blog sangat bervariatif, dari membuat teks berkedip dengan kode blink, membuat teks bergerak dan berjalan seperti pada artkel saya sebelumnya yang dapat Anda baca detailnya pada link dibawah ini

Menghias blog dengan - Mempercantik Tampilan Blog Dengan Membuat Teks Berjalan

Dari sekian banyak tutorial yang membahas tentang teks style tersebut, namun saya belum menemukan tutorial yang membahas tentang Membuat Efek CSS Animasi Pada Tulisan, jika efek salju pada blog, efek daun berguguran atau membuat link bergoyang mungkin hal ini tidak asing lagi buat Anda, namun kali ini saya akan coba mendesain teks yang ada pada artikel blog Anda dengan efek gugur, singkatnya teks yang saya beri animasi akan jatuh dan berganti dengan teks berikutnya, seperti yang terlihat pada gambar dibawah ini

Effect image with CSS animation


Baca juga - Efek Tumpukan Kertas Pada Laman Posting




//* falling words in animasi effect with css3
input css : id='sb77','sahabatblogger77'
show date : April 12, 2014
sumber: http://sahabatblogger77.blogspot.com/
author: devy indriyani
*//
.sb77-wrapper{
   width: 80%;
   position: relative;
   margin: 110px auto 0 auto;
   font-family: 'Bree Serif';
   padding: 10px;
   height: 400px;
   overflow: hidden;}

.sb77-sentence{
   margin: 0;
   text-align: left;
   text-shadow: 1px 1px 1px rgba(255,255,255,0.8);}

.sb77-sentence span{
   color: #444;
   white-space: nowrap;
   font-size: 200%;
   font-weight: normal;}

.sb77-words{display: inline;text-indent: 10px;}
.sb77-words-1 span{
   position: absolute;
   opacity: 0;
   overflow: hidden;
   color: #888;
   transform-origin: 10% 75%;
   animation: rotateWord 18s linear infinite 0s;}

.sb77-words span:nth-child(2) {
   animation-delay: 3s;
   color: #6b889d;}

.sb77-words span:nth-child(3) {
   animation-delay: 6s;
   color: #6b739d;}
// lanjutkan jika ingin menambahkan teks lagi
.sb77-words span:nth-child(4) {
....
....}

@keyframes rotateWord {
   0% { opacity: 0;}
   5% { opacity: 1;}
  17% { opacity: 1; transform: rotate(0deg);}
  19% { opacity: 1; transform: rotate(98deg);}
  21% { opacity: 1; transform: rotate(86deg);}
  23% { opacity: 1; transform: translateY(85px) rotate(83deg);}
  25% { opacity: 0; transform: translateY(170px) rotate(80deg);}
  80% { opacity: 0;}
 100% { opacity: 0;}}
@media screen and (max-width: 768px){
   .sb77-sentence { font-size: 18px; }}
@media screen and (max-width: 320px){
   .sb77-sentence { font-size: 9px; }}


<section class="sb77-wrapper" id="sahabatblogger77">
<h2 class="sb77-sentence">
<span>Cara Membuat Efek Teks Jatuh</span>
<span>Contoh teks</span>
<div class="sb77-words sb77-words-1">
<span>Kamu Cantik</span>
<span>Tetapi Galak</span>
<span>Cerewet Lagi</span>
<span>Tetapi..!!</span>
<span>Aku Tetap</span>
<span>Sayang sama kamu</span>
</div>
</h2>
</section>




DEMO SHOW



Jika semua sahabat pecinta SAHABAT BLOGGER 77 ingin memberikan sedikit sentuhan CSS animasi pada tulisan Artikel blog Anda, maka ikuti jalan kebenaran saya ini..hehe.!!
  1. Copy dan letakkan kode CSS diatas sebelum kode  ]]></b:skin> 
  2. Untuk HTML, Copy kodenya dan tempatkan pada saat Anda akan membuat tulisan baru mode HTML bukan Compose ya..!!
  3. Ganti teks yang saya beri warna  Orange  dengan tulisan yang Anda suka
  4. Semoga apa yang saya bagikan ini dapat menjadi bahan diskusi buat kita semua, untuk kita bahas pada kolom komentar dibawah, saya akan menjawab jika Anda mengalami kesulitan pada kode-kode diatas
  5. Terimakasih dan Happy week end

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Efek CSS Animasi Pada Tulisan
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

39 komentar

  1. wahh keren banget mbak (h)

    BalasHapus
  2. jadi terlihat cantik dan menarik minat baca pengunjung ya kak kalau tulisan teks artikel nya dikasih sama efek-efek ;)

    BalasHapus
  3. Bagus Animasi pada tulisanya Mbak Devy, kesanya
    Jadi lebih hidup dan menawan teks yang di beri efek animasinya
    Saya coba Mbak. makasih atas tutorial nya salam sukses :)

    BalasHapus
    Balasan
    1. seip..
      semoga berhasil mencobanya

      Hapus
  4. coba ah .. keren kayanya :D hehehe

    BalasHapus
  5. Di blog ini keren keren tutornya ... ijin di pelajari ya Mbak :)

    BalasHapus
    Balasan
    1. di blog mas heri juga gak jauh lebih keren kok,,hehe

      Hapus
  6. kok tulisannya bisa jatuh begitu yia bos...

    si bos ini memang bener2 canggih, hehehe...

    BalasHapus
    Balasan
    1. cuma lagi belajar kok bos, saya menggunakan CSS murni animasi tanpa script, namun juga menggunakan webkit sebagai pembaca peramban, agar efeknya dapat bekerja pada safari atau chrome

      dan yang canggih itu bukan saya bos,tetapi kodenya yang dapat menciptakan efek-efek seperti 3 gaya animasi pada tombol demo diatas

      Hapus
  7. Balasan
    1. saya kan bukan guru mas, jika saya bisa melakukannya, mas juga pasti bisa, cukup copy kode-kode diatas, dan kalau ada masalah tentang kodenya, silahkan mas tanyakan, InsyaAllah saya akan pandu untuk penerapannya

      Hapus
  8. jadi makin menarik yah blognya mbak,
    makin kece-kece aja nih tutorial-tutorialnya :D

    BalasHapus
  9. Jadi keren deh hasilnya karena ada modifikasinya hehe

    BalasHapus
  10. Waah. ternyata CSS bisa buat ginian ya... mantap tutornya

    BalasHapus
  11. Keren keren artikel untuk mempercantik Blognya Mbak, kami harus belajar banyak disini nih Mbak. Boleh Kan?

    BalasHapus
    Balasan
    1. dengan senang hati sob..karena saya juga masih belajar kok,,hehe

      Hapus
  12. apanya neh yang dilanjutkan teruss..hehehe

    BalasHapus
  13. mantap artikelnya, nambah pengetahuan jadinya

    BalasHapus
  14. kalau bahas CSS aku langsung nyerah dech....soalnya nggak terlalu paham.....keep happy blogging always...salam dari Makassar :-)

    BalasHapus
  15. wah, dah ahli nih di bidang css ... boleh nggak ajari sy ...? :)

    BalasHapus
    Balasan
    1. kalau saya ajarin kesannya saya jadi lebih pintar dari mas, gimana kalau sama-sama kita bahas dalam penerapannya, jika mas ada kesulitan dalam menggunakan kode diatas, dengan senang hati saya akan jawab pertanyaan mas dalam komentar,

      karena saya juga masih butuh untuk diajarin kok, hehe

      Hapus
    2. hehehehehe, ah bisa aja balesnya.... :),.. oya blog sy kn klo blm ada komentar masuk, kok klom komentar ada dua, itu knp yah ?

      Hapus
    3. saya belum paham yang mas tanyakan, karena banyak blog yang kolom komentarnya lebih dari 2, komentar blogger,komentar google+ komentar fb dan masih banyak lagi, itu bukan default tetapi ada script yang ditambahkan, jadi yang mas maksud bagaimana ya,,hehe
      Hmmm.. coba saya lihat dulu dech blognya, biar tahu dimana letak masalahnya,ditunggu ya

      Hapus
  16. Efek jatuhnya spontan bikin gak ngeh, keren, mbak. tulisan jadi makin hidup.

    BalasHapus
    Balasan
    1. first delay (efek pertama) pada kodenya sengaja saya perlambat mas, sehingga sewaktu tutorial terbuka efek akan membutuhkan 6 detik baru bekerja, agar sedikit terlihat ada sensasi baru,,

      Hapus
  17. mengingatkan saya sewaktu pertama kali saya ingin jadi BLOGAZINE saya menggunakan text-shadow dan efek CSS animasi....

    bagus ne buat yang ingin tahu efek css animasi

    BalasHapus
    Balasan
    1. kalau text shadow hanya sebatas memberikan bayangan, dan animasi sebagai style, sedangkan efeknya kita harus menggunakan kode yang ramah buat pembacaan peramban browser

      Hapus
  18. ini anak makan ap ya..!,

    untuk pemasangan judul artikel, ..lupa..! bntr lg brtanya..!

    BalasHapus
    Balasan
    1. hahaha..makanan sampe dibawa-bawa,apa hubungannya mas,,hehe..
      saya hanya seorang cewek biasa yang lagi berusaha menyelesaikan pekerjaan saya dibidang desainer web,
      pengen mau buat template cuma kudu konsentrasi dan butuh waktu sedikit lama, jadi gak ada salahnya kan bagi-bagi ilmu yang nantinya semua tutor ini saya pajang pada template buatan saya,,gitu mas..hehe

      Hapus
  19. saya sepertinya ketinggalan nh, tetapi tidak apalah. yang penting ilmunya mbak Devy saya dapatkan, thanks mbak :))

    BalasHapus
  20. Numpang ngopi sebentar mbak, capek (c) . Blog ini penuh warna banget ya, bisa menghilangkan penat (h) . Memang dengan membuat efek CSS animasi pada tulisan membuat artikel lebih diminati. Kapan-kapan perlu dicoba nih.

    BalasHapus
  21. wiihh keren, ijin coba ya sist :D

    BalasHapus
  22. efek tulisan melorotnya bikin kaget Mbak Devy (h)

    BalasHapus
  23. wah keren nih Mbak, saya belajar dulu ya :)

    BalasHapus
  24. keren mbak ijin coba, nanti kalo misalnya ada yang pengen ane tanyain, ane bakal balik kesini lagi ya mbak :)

    BalasHapus
  25. subhanaloh,sudah cantik pinnter pula ,kereeen artikelnya.makaci y kaka.

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK