Animasi Teks Hitam Putih Dengan Marquee

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:

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