Insane
Home » Article » Jquery » Jquery Plugin: Cara Membuat Random Background Gambar Dengan Fadebgimages

jQuery Plugin: Cara membuat random background gambar dengan fadeBGImages

f_huda19   01 Juli 2015   21:52:53   0 Suka   Favorit

fadeBGImages adalah jQuery plugin sederhana yang dirancang khusus untuk merubah background gambar di website Anda setiap detik sesuai kebutuhan. menggunakan HTML <span></span> yang dipadu dengan css background-image() property memungkinkan background gambar yang Anda gunakan dapat menyesuaikan lebar dan tinggi pada layar perangkat.

Syntax:

$("#selector").fadeBGImages({source:['source.jpg', 'images.jpg'], transition:3000, interval:5000, easing:"linear"});

Arguments:

Key Type Default Description
source Array - [Dibutuhkan] Sumber gambar yang akan dijadikan background
transition Integer 3000 [Opsional] Waktu yang dibutuhkan untuk melakukan pergantian gambar (dalam satuan milisecond)
interval Integer 5000 [Opsional] Jeda gambar sebelum diganti oleh gambar lain (dalam satuan milisecond)
easing String linear [Opsional] Gaya yang diberikan ketika background sedang terjadi pergantian. Daftar easing dapat Anda lihat disini

Cara pemasangan plugin fadeBGImages secara utuh dapat Anda lihat pada contoh di bawah ini:

<html>
<head>
<title>Simple Random Background With fadeBGImages</title>
<script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="//cb4me.gq/assets/js/plugin/fadeBGImages.js"></script>
<script type="text/javascript">
$("document").ready(function() {
var images= ['/img/sumber.jpg', '/img/gambar.jpg', '/img/anda.jpg', '/img/disini.jpg'];
$("#wrapper").fadeBGImages({source:images, transition:3000, interval:5000, easing:"swing"}); });
</script>
</head>
<body>

<div id="wrapper"></div>

<!-- konten utama situs anda -->

</body>
</head>

Walaupun menggunakan plugin fadeBGImages dapat menyebabkan website Anda ganteng maksimal, tapi cobalah untuk mempertimbangkan kembali dalam pemilihan gambar yang sesuai secara ukuran dan resolusi. Supaya website Anda tetap dapat bekerja secara maksimal.

DEMO

KOMENTAR

Qategori

Qategori 04 Jul 15

Wanita nya cantik, kira - kira berapa ukuran maksimal gambar biar nggak berat?

f_huda19

Admin 05 Jul 15

ukurannya relatif sih gan, 512px x 512px menurut ane sudah bagus.. kalau bisa dibawah 200kb

eqaguhvehe

eqaguhvehe 22 Jul 18

http://doxycycline-cheapbuy.site/ - doxycycline-cheapbuy.site.ankor <a href="http://onlinebuycytotec.site/">onlinebuycytotec.site.ankor</a>

yocigadac

yocigadac 22 Jul 18

http://doxycycline-cheapbuy.site/ - doxycycline-cheapbuy.site.ankor <a href="http://onlinebuycytotec.site/">onlinebuycytotec.site.ankor</a>

ocubedol

ocubedol 22 Jul 18

http://doxycycline-cheapbuy.site/ - doxycycline-cheapbuy.site.ankor <a href="http://onlinebuycytotec.site/">onlinebuycytotec.site.ankor</a>

asozumiqal

asozumiqal 22 Jul 18

http://doxycycline-cheapbuy.site/ - doxycycline-cheapbuy.site.ankor <a href="http://onlinebuycytotec.site/">onlinebuycytotec.site.ankor</a>

ohoifatulapa

ohoifatulapa 22 Jul 18

http://doxycycline-cheapbuy.site/ - doxycycline-cheapbuy.site.ankor <a href="http://onlinebuycytotec.site/">onlinebuycytotec.site.ankor</a>

KIRIM KOMENTAR