>本教程演示了如何使用jQuery創(chuàng)建迷人的視差背景效果。 我們將構(gòu)建一個(gè)帶有分層圖像的標(biāo)題橫幅，從而創(chuàng)造出令人驚嘆的視覺深度。 更新的插件可與JQuery 1.6.4及以后一起使用。

> 下載圖像

您將需要四個(gè)背景圖像：

1. layer1：主要背景（例如，綠色向量背景）。
>
2. layer2：覆蓋圖像（例如，青蛙，透明的png）。
3. layer3：覆蓋圖像（例如草，透明的PNG）。
4. ：覆蓋圖像（例如蝴蝶，透明的png）。layer4

• http://www.miracleart.cn/link/88cd5f09652e5b4b4b12be5e4444148c3444c
• http://www.miracleart.cn/link/e3a12e12e15821a821a8fcf9814777770bb57
>
• > http://www.miracleart.cn/link/8ec7ff1ac324a4bed44cc51d362e5b94
>>>>
• http://www.miracleart.cn/link/link/7de504cb196a4909cba94d8005d2e8d2e8dff
• > http://www.miracleart.cn/link/437D432E1262626269160C1CC4E0FC72F1EE

（注意：您需要Adobe Illustrator或Photoshop之類的軟件來編輯Vector文件。）

jquery.event.frame.js jquery.jparallax.min.js（注意：可能包含在

>將圖像層添加到您的HTML的：>

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

記?。阂暡钤氐淖釉刈兂蓪?，并自動(dòng)放置絕對(duì)位置?？梢曅栽乇旧硇枰?/p>或

。 position: relative;>防止層延伸到視口之外。調(diào)整圖像尺寸以微調(diào)動(dòng)畫速度。較小的圖像移動(dòng)速度更快。position: absolute; overflow: hidden;這完成了基本的視差效應(yīng)。實(shí)驗(yàn)圖像尺寸和位置以實(shí)現(xiàn)您所需的動(dòng)畫。

>常見問題部分已被省略，因?yàn)樗c核心視差實(shí)施無關(guān)，并為已經(jīng)釋義的響應(yīng)增加了不必要的長度。

以上是jQuery視差教程 - 動(dòng)畫標(biāo)題背景的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！