Auto-Moving Parallax Background - JQUERY

paralaks adalah efek di mana ada berbagai lapisan latar belakang bahwa semua bergerak pada tingkat yang berbeda menciptakan efek 3D yang sangat unik (Sonic the Hedgehog berpikir). Dalam demo yang asli, satu-satunya cara untuk melihat aksi paralaks terjadi adalah mengubah ukuran jendela browser.

Baru-baru ini, Paulus Hayes yang mengambil contoh dan berlari dengan itu. Dia menggunakan sangat dingin-WebKit-transisi atribut untuk membuat efek paralaks bergerak tanpa perlu mengubah ukuran jendela browser atau menggunakan javascript. Paulus melakukan pekerjaan yang mengagumkan dan demo karya besar, tapi tentu saja karena dia menggunakan perpanjangan css proprietary, hanya bisa bekerja di browser sangat modern berbasis WebKit (Safari 4 dan Google Chrome).

Walaupun contoh Paulus adalah ideal bagaimana jenis efek ini akan dilakukan di masa depan, aku pikir mungkin keren untuk melemparkan sedikit JavaScript asli dan mendapatkan versi auto-pindah di luar sana yang harus bekerja di semua browser *. (saya kutip dari web http://css-tricks.com/)

untuk penjelasannya mari kita coba

Demo parallaks

Download source code

untuk bagian Html sebagai berikut :

<div id="background"></div>
<div id="midground"></div>
<div id="foreground"></div>

untuk bagian CSS seperti ini :

#background {
background: url(../images/background.png) repeat 5% 5%;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 100;
}

#midground {
background: url(../images/midground.png) repeat 20% 20%;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 200;
}

#foreground {
background: url(../images/foreground.png) repeat 90% 110%;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 300;
}


Gambar background yang berulang dan ditetapkan dengan persentase. Persentase adalah apa yang membuat efek paralaks bekerja normal. Tapi dalam hal ini JavaScript versi baru, akan menimpa background yang ada dan menghidupkan nilai-nilai sebagai gantinya. Hal ini membutuhkan penggunaan backgroundPosition plugin untuk jQuery, sebagai out-of-the-box jQuery tidak dapat menghidupkan properti backgroundPosition.
kemudian pemanggilan jquery dan pemasangannya.

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.backgroundPosition.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){

$('#midground').css({backgroundPosition: '0px 0px'});
$('#foreground').css({backgroundPosition: '0px 0px'});
$('#background').css({backgroundPosition: '0px 0px'});

$('#midground').animate({
backgroundPosition:"(-10000px -2000px)"
}, 240000, 'linear');

$('#foreground').animate({
backgroundPosition:"(-10000px -2000px)"
}, 120000, 'linear');

$('#background').animate({
backgroundPosition:"(-10000px -2000px)"
}, 480000, 'linear');

});
</script>

Catatan sebelum kita melakukannya dari animasi kita harus mengatur ulang backgroundPosition di dalam JavaScript.tapi itu adalah persyaratan untuk plugin untuk bekerja dengan baik.

Memperluas panjang animasi

Angka-angka besar dalam fungsi animasi (misalnya 120.000) berdiri untuk perseribu detik. Jadi, 120.000 = 120 detik = 2 menit. Mengubah angka-angka Anda dapat memperpanjang atau memperpendek jangka waktu animasi yang Anda peroleh. Ini tidak terbatas meskipun ... Mungkin ada cara untuk mendapatkan yang dilakukan, saya hanya tidak berpikir itu semua melalui. Mungkin abstrak animasi untuk fungsi yang dapat dipanggil dan kemudian menelepon lagi selama panggilan balik (atau sesuatu).

* Hal paralaks ini sangat tergantung pada transparansi. Jika Anda membutuhkannya bekerja di IE 6, memeriksa memperbaiki Unit PNG atau DD_belatedPNG tersebut.
sekian cukup sekian artikel kali ini..
semoga dapat dikembangkan lagi...