Membuat animasi text muncul bergantian dengan effek fade menggunakan css dan jquery

Melanjutkan dari postingan sebelumnya, selanjutnya saya tambahkan effek fade, sehingga terlihat lebih cantik dan menarik. silahkan di pelajari dengan seksama. Jika ingin mencobanya, jangan lupa di sertakan pula file jquerynya, biar bisa berjalan sebagai mana mestinya.

<[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">The .each() method is designed to make DOM looping constructs concise and less error-prone. When called it iterates over the DOM elements that are part of the jQuery object. Each time the callback runs, it is passed the current loop iteration, beginning from 0. More importantly, the callback is fired in the context of the current DOM element, so the keyword this refers to the element.<[hapus]/div>
 <[hapus]div class="i-scroller">Note: most jQuery methods that return a jQuery object also loop through the set of elements in the jQuery collection — a process known as implicit iteration. When this occurs, it is often unnecessary to explicitly iterate with the .each() method:<[hapus]/div>
 <[hapus]div class="i-scroller">Basically we work our way right down to find the elements with the class 'someclass': $('#container a .someclass'), and then from there work our way back up to the enclosing anchor: .parents('a'), which is where the class 'anotherclass' needs to be added.<[hapus]/div> 
 <[hapus]/div>

<[hapus]script type="text/javascript">

var opacity = 0;
 var incOpacity = 1; 
 var delay = 50;

var i = 0;
 var iMax = $(".scroller").children().length; 
 
 function changeScroller() {
 opacity = 0;
 incOpacity = 1;

$('.scroller').css("opacity", opacity);

$(".i-scroller").each(function( index ) {
 if(index == i) { 
 $(this).css("display", "block");
 } else { 
 $(this).css("display", "none");
 }
 });

i++;
 // cek if i = max
 if(i == iMax) {
 i = 0;
 }

fadeIn();

setTimeout(changeScroller, 5000);
 }

function fadeIn() { 
 opacity = incOpacity / delay; 
 if(incOpacity <[hapus]= delay) {
 $('.scroller').css("opacity", opacity); 
 setTimeout(fadeIn, 100);
 incOpacity++; 
 } 
 }

changeScroller();

<[hapus]/script>
<[hapus]/body>
<[hapus]/html>

Demikian , wassalam.

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>

Membuat Animasi Fade Pada Div Dengan Gambar Bergantian

Pada tulisan sebelumnya sudah di tayangkan mengenai kode untuk membuat gambar tampil bergantian. Selanjutnya akan di jelaskan bagaimana caranya menambahkan effek fade pada saat awal gambar tersebut muncul, sehingga terlihat lebih smooth setiap kali ganti gambar.

Kode HTML

<[hapus]div class="header"></div>

Kode Javascript

<[hapus]script> 
var i = 0;
// inisialisasi gambar
var img = new Array( 
 "bg-1.png", 
 "bi2.jpg", 
 "bi3.jpg", 
 "bi4.jpg");

var opacity = 0;
var incOpacity = 1; 
var delay = 100;

// fungsi ganti gambar
function changeBg() {
  opacity = 0;
  incOpacity = 1;

  $('.header').css("opacity", opacity);
  $('.header').css("background-image", "url(images/" + img[i] + " )");

  i++;
  // cek if i = max
  if(i == img.length) {
    i = 0;
  }

  fadeIn();

  setTimeout(changeBg, 10000);
}

// fungsi effek fade 
function fadeIn() { 
  opacity = incOpacity / delay; 
  if(incOpacity <[hapus]= delay) {
    $('.header').css("opacity", opacity); 
    setTimeout(fadeIn, 100);
    incOpacity++; 
  } 
}
// inisialisai fungsi gambar
changeBg();
</script>

sekian semoga tulisan ini ada manfaat. terimakasih, wassalam.

Membuat effect background gambar pada div bergantian di halaman web

Bagaimana cara membuat atribut background pada div bisa bergantian dengan menggunakan css dan jquery atau javascript selama interval tertentu. misal pertama yang muncul background gambar kucing terus kemudian setelah 5 detik gambar gajah dan seterusnya.

cara membuat efek gambar bergantian dengan menggunakan css dan javascript caranya adalah mudah, ikuti contoh kode berikut ini.

kode html :

<[hapus]div class="header"> 
...
<[hapus]/div>

kode javascript :

<[hapus]script> 
 var i = 0;
 var img = new Array( "bg-1.png", "bg-2.png", "bg-3.jpg", "bg-4.jpg", "bg-5.jpg");

function changeBg() {
 $('.header').css("background-image", "url(images/" + img[i] + " )"); 
 i++;

if(i == img.length) {
 i = 0;
 }

setTimeout(changeBg, 5000);
 }

changeBg();
</script>

keterangan . replace [hapus] .