JQuery Parallax Tutorial - Latar Belakang Header Animasi

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:

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

(Nota: Anda memerlukan perisian seperti Adobe Illustrator atau Photoshop untuk mengedit fail vektor.)

Kod

Sertakan fail yang diperlukan dalam html anda:

(nota:

mungkin dimasukkan ke dalam

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

:

Mulakan plugin Parallax di 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>

:

tambah CSS yang diperlukan:

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;
}

menamatkan

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!