jQuery視差教程 - 動畫標題背景

>本教程演示瞭如何使用jQuery創建迷人的視差背景效果。 我們將構建一個帶有分層圖像的標題橫幅，從而創造出令人驚嘆的視覺深度。 更新的插件可與JQuery 1.6.4及以後一起使用。

>

> 下載圖像

您將需要四個背景圖像：

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

>在這些網站上查找免費的向量背景圖像：

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

>

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

代碼

在您的html中包括必要的文件：

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>

在您的html的

中初始化視差插件：>

添加所需的CSS：

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

完成

記住：視差元素的子元素變成層，並自動放置絕對位置。可視性元素本身需要

或

。 position: relative;>防止層延伸到視口之外。調整圖像尺寸以微調動畫速度。較小的圖像移動速度更快。 position: absolute; overflow: hidden;這完成了基本的視差效應。實驗圖像尺寸和位置以實現您所需的動畫。

>常見問題部分已被省略，因為它與核心視差實施無關，並為已經釋義的響應增加了不必要的長度。

以上是jQuery視差教程 - 動畫標題背景的詳細內容。更多資訊請關注PHP中文網其他相關文章！