25.12.14
48
Animasi Teks Hitam Putih Dengan Marquee - Efek marquee seperti yang sudah Anda ketahui merupakan animasi untuk membuat teks bergerak. Namun pada beberapa peramban seperti IE (Internet Expoler), animasi marquee tidak dapat bekerja karena kode tersebut sudah tidak valid digunakan pada browser tersebut. Jika Anda pengguna setia chrome atau mozilla efek teks bergerak dengan animasi marquee masih dapat Anda nikmati seperti gerakan teks ini:


<< MACAM >><< MACAM >>
ANIMASI TEKS DENGAN MARQUEE



Salah satu gaya teks bergerak yang dapat dihasilkan dengan animasi marquee untuk Mempercantik Tampilan Blog Dengan Membuat Teks Berjalan adalah efek teks bergerak yang memantul bolak-balik dari kiri-kekanan dengan deklarasi kode marquee seperti ini:


<marquee behavior="alternate" scrollamount="10">SB-77 Design</marquee>


Bahkan Anda bisa Membuat Efek CSS Animasi Pada Tulisan dengan gaya teks-jatuh seperti pada postingan saya sebelumnya, sekarang giliran Anda akan membuat efek animasi apa yang akan Anda ciptakan lagi untuk membuat teks bergerak dengan style marquee pada teks berikutnya. Namun sebelumnya, kesempatan kali ini saya akan memberikan sedikit tips modifikasi efek teks beergerak dengan Animasi Teks Hitam Putih Dengan Marquee seperti gambar berikut:


Animasi text image



Gaya dan tampilan tidak berbeda pada efek memantul marquee seperti diatas, namun efeknya saya ganti dengan deklarasi 2 warna yang berbeda yaitu HITAM  PUTIH   saat animasi teks mulai dijalankan dengan CSS seperti ini:

.right {right:0;background:#101010}
.left {left:0;background:#fff}
.left, .right {
  position: absolute;width: 50%;
  top: 0;height: 100%;overflow: hidden
}


Dengan CSS diatas, Anda sudah membuat rangkaian teks dengan 2 warna yang berbeda, sekarang tinggal menggerakkan teks tersebut menggunakan perintah @keyframes dengan efek animation-infinite (Gerakan Tidak Terbatas). Sehingga hasilnya akan terlihat seperti ini:




DEMO SHOW




Bagaimana, cukup mudah bukan.?
Pilihan ada ditangan Anda, sudah memikirkan teks yang mana yang akan Anda buat animasi marquee seperti ini, title blog header-page atau ucapan selamat datang pada halaman beranda.?, kode lengkapnya seperti ini:



<style type='text/css'>
/*-------------------------------------------
Animasi Teks Hitam Putih Dengan Marquee
code input='css only','keyframes-marquee'
modified by. Devy Indriyani
visit= http://sahabatblogger77.blogspot.com
--------------------------------------------*/
.marquee {position: absolute;height: 100%;width:100%}
.right {right:0;background:#101010}
.left {left:0;background:#fff}
.left, .right {
  position: absolute;width: 50%;
  top: 0;height: 100%;overflow: hidden}

.right .text {left:-100%;color: #fff;}
.text {
  width: 200%;text-align: center;
  position: absolute !important;
  top:14%;color: #101010;
  white-space: nowrap;font-size: 4rem;
  -webkit-animation: marquee 2s 0.5s infinite alternate both;
  -moz-animation: marquee 2s 0.5s infinite alternate both;
  animation: marquee 2s 0.5s infinite alternate both}

@-webkit-keyframes marquee {0% {width: 100%} 100% {width: 300%}}
@-moz-keyframes marquee {0% {width: 100%} 100% {width: 300%}}
@keyframes marquee {0% {width: 100%} 100% {width: 300%}}
</style>


<div class="marquee">
       <div class="left">
             <h1 class="text">SB~77 Design</h1>
       </div>
       <div class="right">
             <h1 class="text">SB~77 Design</h1>
       </div>
</div>

URL Referensi - Contoh Bentuk-Bentuk Konsep Animasi

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Animasi Teks Hitam Putih Dengan Marquee
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 =

48 komentar

  1. Balasan
    1. tadi baru bangun jam 23.30 mas Al, jadi sudah sulit lagi neh mau bobo, mending begadang dech sebentar, sambil membahas animasi teks. hehe..!!

      Hapus
    2. oooo.. kirain bgadang.. efeknya lucu..!

      Hapus
    3. tetapi mas Al disana tidak tertawa kan.?
      soalnya sudah pagi mas, takutnya ada tetangga yang dengar, jadi diduga mas Al ngigau dech, hehe..!!

      Hapus
    4. efek bagus koq diketawaiin..
      cuma imajinasi efeknya ke pikiran ke tempat lain hehehe

      Hapus
  2. wah kayaknya keren nih, ijin ctrl+d dulu ya mbak :D

    oya salam kenal dari saya

    follow sukses, jika berkenan silahkan follback ya :)

    BalasHapus
  3. Devy ada aja ih ide nya ...
    selali terlihat menawan smua karyanya ....

    BalasHapus
    Balasan
    1. hmmm..ini termasuk pujian tau hanya sekedar rayuan gombal mas Fiu.!
      soalnya devy khawatir jatuh karena terlalu dipuji seperti itu.hehe..

      Hapus
    2. Itu bkn dua2nya ... tpi sbg support buat devy, klo devy jatuh kn da sy, ntr sy bntu berdriin ... heeeeeeeeeeee

      Hapus
    3. huuuuhhh...maunya..!! [-(

      Hapus
    4. hehehe, tpi gpp kaaaan sy bntu berdiriin devy ,,,, (f)

      Hapus
  4. Cantik ni ya..kalau di letak di blog...
    terima kasih info nya..
    Salam kenal Miss Devy :)

    BalasHapus
    Balasan
    1. secantik cik fidah pastinya, hehe..!! salam kenal juga cik

      Hapus
  5. bisa keluar masuk gitu mbak..
    jadi lebih menarik tampilannya, makasih, tinggal praktek

    BalasHapus
  6. teks berjalan mirip kayak di berita-berita yang ada di TV :)

    BalasHapus
  7. mbak Dev in hebat ya, ngerti tentang css desainer, kreatif, cantik pula.

    BalasHapus
    Balasan
    1. cuma sekedar hobby saja kok mas, membuat sesuatu yang bisa mendatangkan hal untuk dikomentari dan dibahas bersama sahabat semua pecinta SAHABAT BLOGGER 77

      Hapus
    2. mas buret : saya suka komentar anda yang terakhir 'cantik pula' (c)

      Hapus
    3. emang ada apa dengan CINTA.!
      eh..dengan kata cantik kang jum.?

      Hapus
    4. takutnya mbak devy terbuai dengan kata cantik ntar malah lupa bikin artikel :d

      Hapus
    5. takutnya mbak devy langsung terbang dan terbuai hingga akhirnya lupa buat atikel kerenz lagi :d

      Hapus
    6. tunggu sebentar kang, devy bercermin dulu, apakah benar Devy cantik apa gak ya. soalnya baru ini dan orang yang pertama bilang kalau devy itu cantik, hehe..!!

      Hapus
    7. boleh ditemenin ga mbak.
      mumpung yang ganteng-ganteng belum pada datang : mas fiu, mas em albar, kang saud, pak mas haji, kang yanto cungkup.
      #cari_kesempatan...

      Hapus
    8. Hei hei ...walah bru tw sy ini ada yg lg nyri kesemptan .... adooooooohhhh.....

      Hapus
  8. Keren Mbak Devy. Yang bikin keren itu, warna tulisannya bisa dibedakan. Cocok kalau dipakai untuk memasang pengumuman.

    BalasHapus
    Balasan
    1. tetapi tolong jangan diumumkan ya mas, kalau ini sumbernya dari Devy,hehe..!!

      Hapus
  9. keren banget mba devy .. :)

    BalasHapus
    Balasan
    1. pasti kerenz lah, orang adminnya ajha juga kerenz :d

      Hapus
  10. edunnn selalu unix nihh animasi yang disediakan mbak devi :D jadi ksemsem nih :D

    BalasHapus
  11. Waha! di kolom komentarnya ada blogger malaysia! tamu blog kamu jauh juga ya dev hahahHaa

    BalasHapus
  12. karya-karya mbak devy emang top top dach...
    sampai-sampai bikin pusing pala saya terus :d (c)

    BalasHapus
  13. amboy keren sekali, nak coba dulu

    BalasHapus
  14. kalau yang ini saya sedikit paham mbak untuk mempelajarinya, terima kasih dah sharing yang bermanfaat :D

    BalasHapus
    Balasan
    1. emang diartikel yang mana membuat mas Ibrahim sulit mempelajarinya, kan devy memberikan jabaran kode yang simple dalam setiap posting.!!
      hehe..!!

      Hapus
    2. kayanya semuanya dech mbak (c)

      Hapus
  15. Wah unik nie, saya belum pernah lihat animasi text hitam putih seperti punya mbak Devy di atas. dua jempol untuk karya mbak Devy ini. (h)

    BalasHapus
  16. unik sekali mbak dev,tinggal di praktekin nih :).terimaksih sudah share :)

    BalasHapus
    Balasan
    1. silahkan dipraktekin mbak devina (c)

      Hapus
  17. keren sob... nanti aq coba terapkan

    BalasHapus
    Balasan
    1. jangan lama-lama ya mbak, karena watunya tinggal 1bulan lagi terhitung dari sekarang, lewat dari itu, sudah expired, xixixixi....!!

      Hapus
  18. sekali-sekali bahas tentang notifikasi yang seperti di wordpress dund mbak.
    maksudnya : kalau kita komen diblog lain kita bisa tahu kalau komen kita dibalas komennya sama adminnya.

    BalasHapus
    Balasan
    1. intinya seperti 'pemberitahuan' yang ada dipesbuk.

      Hapus
    2. ganti form komentar dengan formulir google+, lalu pasang dan aktifkan notifikasinya dengan widget, maka tampilannya sama seperti pemberitahuan masuk seperti fb yang mas inginkan.

      setiap membuka blog, maka tombol notifikasi akan ditandai dengan angka, dimana disana terdapat semua pemberitahuan yang berhubungan dengan blog tersebut, seperti berbagi ulang oleh pengunjung, komentar dan masih banyak lagi

      Hapus
    3. prakteke piye kuwi mbak?
      malah gawe wong mumet wae to yo........
      hadech.......

      Hapus
    4. Xxixixixi.... kek sy nih klo tny .. giliran dikash jawab malah piyeng ... eh .... tpi kli yg ni sh gmpng kg jum ... di pengaturan kn ada tug mw mnggunakan komntr blog ato google+ ... hehe
      Eh bner gtu gk yah ... ahahahah

      Hapus
  19. gan hujan hujan enaknya tidur hehe?

    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