Membuat animasi text warna bergantian dengan css dan jquery

Sekedar untuk bermain main mari membuat animasi text warna bergantian menggunakan kode css dan jquery. warna berganti dari div yang satu ke div yang lain. caranya mudah copas kode dibawah dan silahkan coba modif sesuai dengan kebutuhan sobat-sobat sadaya. jangan lupa text ‘[hapus]’ nya dihilangkan dulu biar jalan.

<[hapus]!DOCTYPE html>
<[hapus]html lang="en">
<[hapus]head>
 <[hapus]meta charset="UTF-8">
 <[hapus]title>Scroller<[hapus]/title>
 <[hapus]style>
 .scroller{ 
 margin: 50px auto;
 width: 300px;
 }
 .i-scroller{
 width: 100%;
 }
 <[hapus]/style>
 <[hapus]script src="js/jquery.min.js"><[hapus]/script> 
<[hapus]/head>
<[hapus]body>
 <[hapus]div class="scroller">
 <[hapus]div class="i-scroller">Helo 1<[hapus]/div>
 <[hapus]div class="i-scroller">Helo 2<[hapus]/div>
 <[hapus]div class="i-scroller">Helo 3<[hapus]/div>
 <[hapus]div class="i-scroller">Helo 4<[hapus]/div>
 <[hapus]/div>

 <[hapus]script type="text/javascript">
 
 var i = 0;
 var iMax = $(".scroller").children().length; 
 
 function changeScroller() {
 $(".i-scroller").each(function( index ) {
 if(index == i) { 
 $(this).css("color", "red");
 $(this).css("display", "block");
 } else {
 $(this).css("color", "black");
 $(this).css("display", "none");
 }
 }); 
 
 i++;
 // cek if i = max
 if(i == iMax) {
 i = 0;
 }

 setTimeout(changeScroller, 5000);
 }

 changeScroller();
 <[hapus]/script>
<[hapus]/body>
<[hapus]/html>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s