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/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174136555324986.png?x-oss-process=image/resize,p_40" class="lazy" alt="jQuery Parallax Tutorial - Animated Header Background ">
    </div>
    <div class="parallax-layer" style="width:500px; height:250px;">
        <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174136555497450.png?x-oss-process=image/resize,p_40" class="lazy" alt="jQuery Parallax Tutorial - Animated Header Background ">
    </div>
    <div class="parallax-layer" style="width:1200px; height:300px;">
        <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174136555488103.png?x-oss-process=image/resize,p_40" 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中文网其他相关文章！