Tutorial ini menunjukkan cara membuat kesan latar belakang paralaks yang menawan menggunakan jQuery. Kami akan membina sepanduk header dengan imej berlapis yang mewujudkan kedalaman visual yang menakjubkan. Plugin yang dikemas kini berfungsi dengan jQuery 1.6.4 dan kemudian.

Muat turun imej

anda memerlukan empat imej latar belakang:

1. layer1: latar belakang utama (mis., Latar belakang vektor hijau).
2. layer2: imej overlay (mis., Katak, png telus).
3. layer3: imej overlay (mis., Rumput, png telus).
4. layer4: imej overlay (mis., Rama -rama, png telus).

Cari imej latar belakang vektor percuma di laman web ini:

• http://www.miracleart.cn/link/88cd5f09652e5b4b12be5e44148c344c
• http://www.miracleart.cn/link/e3a12e198d15821a8fcf98714770bb57
• http://www.miracleart.cn/link/8ec7ff1ac324a4bed44cc51d362e5b94
• http://www.miracleart.cn/link/7de504cb196a4909cba94d8005d2e8df
• http://www.miracleart.cn/link/437d432e126269160c1cc4e0fc72f1ee

Sertakan fail yang diperlukan dalam html anda:

. Jika ya, keluarkan kemasukan yang berlebihan.) jquery.event.frame.js jquery.jparallax.min.js tambahkan lapisan imej ke html anda

<div id="parallax" class="clear">
    <div class="parallax-layer" style="width:1200px; height:250px;">
        <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174136555324986.png" class="lazy" alt="jQuery Parallax Tutorial - Animated Header Background ">
    </div>
    <div class="parallax-layer" style="width:500px; height:250px;">
        <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174136555497450.png" class="lazy" alt="jQuery Parallax Tutorial - Animated Header Background ">
    </div>
    <div class="parallax-layer" style="width:1200px; height:300px;">
        <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174136555488103.png" class="lazy" alt="jQuery Parallax Tutorial - Animated Header Background ">
    </div>
</div>

jQuery(document).ready(function() {
    $('#parallax .parallax-layer').parallax({
        mouseport: $('#parallax')
    });
});

#parallax {
    position: relative;
    overflow: hidden;
    width: 950px;
    height: 250px;
    background-image: url('background.jpg');
}
.parallax-viewport {
    position: relative; /* relative, absolute, fixed */
    overflow: hidden;
}
.parallax-layer {
    position: absolute;
}

Ingat: Unsur -unsur kanak -kanak elemen paralaks yang menjadi lapisan dan secara automatik diposisikan. Unsur paralaks itu sendiri memerlukan atau

menghalang lapisan dari melangkaui viewport. Laraskan dimensi imej ke kelajuan animasi halus. Imej yang lebih kecil bergerak lebih cepat. position: relative; position: absolute; Ini melengkapkan kesan paralaks asas. Eksperimen dengan saiz dan kedudukan imej untuk mencapai animasi yang anda inginkan. overflow: hidden;

Seksyen Soalan Lazim telah ditinggalkan kerana ia tidak berkaitan dengan pelaksanaan paralaks teras dan menambah panjang yang tidak perlu kepada tindak balas yang sudah paraphrase.

Atas ialah kandungan terperinci JQuery Parallax Tutorial - Latar Belakang Header Animasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!