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.

One thought on “Membuat Animasi Fade Pada Div Dengan Gambar Bergantian

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