jQuery 技术
在前面的章节中，我们已经了解了如何使用 JavaScript 库为网站添加良好的效果。JavaScript 与 jQuery 结合使用时，可以提供惊人的灵活性，并且可以轻松地向您的网站添加视差滚动。
在本章中，我们将介绍三个用于添加视差滚动效果的 jQuery 插件。就像我们在上一章中引用 JavaScript 一样，我们将在 HTML 代码中使用 jQuery 引用来创建强大的 jQuery 视差滚动。
关于 jQuery 插件需要注意的重要一点是，插件通常不会更新，因此在开始使用任何视差滚动插件之前，您需要进行一些研究。
使用 Parallax.js 进行简单视差滚动
使用 Parallax.js jQuery 插件，我们可以轻松创建视差滚动效果。考虑到 jQuery 插件需要高端包含库，例如 bootstrap。请注意，本章的代码中将包含 HTML5 标签。
让我们看一下下面显示的 HTML 文件 -
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Parallax.js | Simple Parallax Scrolling Effect with jQuery</title>
<meta charset = "utf-8">
<meta http-equiv = "X-UA-Compatible" content = "IE = edge">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<link href = "css/style.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>
</head>
<body>
<section>
<div class = "container">
<h1>Example on Parallax.js</h1>
<p data-pg-collapsed>
This is an example of parallax scrolling using Parallax.js jQuery Plugin.
</p>
<br/>
</div>
</section>
<div class = "parallax-container" data-parallax = "scroll"
data-position = "top" data-bleed = "10"
data-image-src = "https://pixabay.com/get/ea31b90a2af5093ed1534705fb0938c9bd22ffd41cb2114595f9c67dae/clematis-3485218_1920.jpg"
data-natural-width = "1600" data-natural-height = "800" >
</div>
<section>
<div class = "container">
<h2 id = "sampleLorem">Sample Text Here</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec
odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla
quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent
mauris. Fusce nec tellus sed augue semper porta. Mauris massa.
Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
<br/>
<br/>
Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean
quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis
tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus
risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis
quis ligula lacinia aliquet. Mauris ipsum.
<br/>
<br/>
Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.
Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Nam nec
ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing
diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla.
Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet.
Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu
magna luctus suscipit.
<br/>
<br/>
Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus
vitae pharetra auctor, sem massa mattis sem, at interdum magna augue
eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent
blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum.
Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc,
viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt
malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris.
Morbi in dui quis est pulvinar ullamcorper.
<br/>
<br/>
Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed
aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis,
venenatis tristique, dignissim in, ultrices sit amet, augue. Proin
sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi
lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus,
accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium
blandit orci.
<br/>
<br/>
Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non,
convallis id, sagittis at, neque. Nullam mauris orci, aliquet et,
iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam
imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus
et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
nisi. Nulla quis sem at nibh elementum imperdiet.
<br/>
<br/>
</p>
</div>
</section>
<div class = "parallax-container" data-parallax = "scroll"
data-bleed = "10" data-speed = "0.2"
data-image-src = "https://pixabay.com/get/ea31b90620f0063ed1534705fb0938c9bd22ffd41cb2114594f0c37cae/chamomile-3489847_1920.jpg"
data-natural-width = "1600" data-natural-height = "801"
data-pg-name = "PARALLAX IMAGE 002">
</div>
</body>
</html>
代码分析
上面的代码片段显示了包含两个图像和它们之间的示例文本的页面的代码。
正如您所看到的，代码以<!DOCTYPE html>开头，这是让浏览器知道代码是基于 HTML5 的典型方式。
第 4 行到第 6 行的<meta>标记显示了供机器解释的代码。您将无法看到此代码的影响。这里需要注意的重要一点是 - 通过元标记，网络开发人员可以更好地控制所显示的数据。
此外，在第 8 行和第 9 行，我们将 CSS 样式表与 Bootstrap 一起包含在内。对于特定的字体和版式，Bootstrap 是广泛使用的库。
第 10 行和第 11 行负责 jQuery 和 Parallax.js 库。包含 Parallax.js 对于控制图像的视差效果非常重要。您将能够在第 21 行找到div的data-parallax属性，这足以调用 parallax.js 库来实现所需的视差效果。
视差效果可以在第 21 行和第 40 行的代码中看到。使用 parallax.js 实现这种效果的重要属性是 – data-parallax、data-image-src、data-natural-width、data-natural-height。
对于 CSS 文件，我们只需提供一个属性。如下所示 -
.parallax-container {
height: 500px;
width: 100%;
}
在上面的 HTML 代码中，我们为 CSS 文件创建了特定的结构。我们将有一个名为css 的文件夹，其中包含 CSS 文件 – bootstrap.min.css和style.css。
一旦文档的一切都完成了，您将能够看到视差效果，如下所示 -
使用视差器 jQuery 插件
Parallaxator 插件提供了最好的 jQuery 视差滚动效果并且易于使用。您可以从此链接下载 Parallaxator 插件及其 CSS 和 JS 文件 - Parallaxator GitHub。
下载 CSS 和 JS 文件后，您可以使用下面所示的代码来创建 HTML 代码。
<!DOCTYPE html>
<html>
<head>
<title>Parallaxator Plugin</title>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8">
<link rel = "stylesheet" href = "fm.parallaxator.jquery.css">
<link rel = "stylesheet" href = "style.css">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "fm.parallaxator.jquery.js"></script>
</head>
<body>
<div class = "section1 parallaxator">
<img class = "parallax_child" src = "img/landscape.jpg" width = "100%">
<h1 class = "mega_text parallax_child">Nature</h1>
</div>
<div class = "section2 parallaxator">
<img class = "parallax_child" src = "img/architecture.jpg" width = "100%">
<h1 class = "mega_text parallax_child">
Architecture<br>
</h1>
</div>
<div class = "section3 parallaxator">
<img class = "parallax_child" src = "img/architecture1.jpg" width = "100%">
<h1 class = "mega_text parallax_child" data-parallaxator-reverse = "true" data-parallaxator-velocity = "0.35">
Architecture again!
</h1>
</div>
</body>
</html>
代码分析
视差效果由 parallax_child 类提供，该类随每个 img 标签一起提供。parallax_child 与下面提供的 CSS 和 JS 文件挂钩。
为了使视差器插件正常工作，我们添加了 fm.parallaxator.jquery.css 和 fm.parallaxator.jquery.js。这些文件需要与 HTML 文件位于同一目录中。
CSS 的代码如下所示 -
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
.section1,.section2, .section3 {
border-bottom: 32px solid #fff;
padding-top: 40%;
}
.section1 {
background-color: #fdb;
}
.section2 {
background-color: #bdf;
}
.section3 {
background-color: #fbd;
}
.mega_text {
font-weight: bold;
font-size: 100px;
margin: 0;
text-shadow: 0 10px 100px #fff, 0 0 15px #fff;
padding: 64px;
display: block;
}
通过上述代码，您将能够看到视差效果。
Stellar.js 用于视差滚动的 jQuery 插件
Stellar.js 是视差 jQuery 插件列表中的另一个新成员。虽然它不再维护，但使用过其稳定版本的开发人员可以轻松使用视差滚动效果。它与最新版本的 jQuery 兼容并且易于实现。
您需要从Stellar.js插件的官方网站下载最新的 jquery.stellar.js。下载后，在与 HTML 和 CSS 文件相同的文件夹中创建此插件文件。
让我们看一下 HTML 代码。
<!doctype html>
<html>
<head>
<title>Stellar.js Demo</title>
<link href = "style.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src = "jquery.stellar.js"></script>
<script>
$(function(){
$.stellar({
horizontalScrolling: false,
verticalOffset: 40
});
});
</script>
</head>
<body>
<h1>Demo Site</h1>
<div class = "image architecture" data-stellar-background-ratio = "0.5">
<span>Architecture</span>
</div>
<div class = "image abstract" data-stellar-background-ratio = "0.5">
<span>Abstract</span>
</div>
<div class = "image landscape" data-stellar-background-ratio = "0.5">
<span>Landscape</span>
</div>
<div class = "image window" data-stellar-background-ratio = "0.5">
<span>Window</span>
</div>
</body>
</html>
代码分析
为了使 Stellar.js 正常工作，我们在第 6 行引用 jQuery 插件后立即包含了 jquery.stellar.js 库。
恒星视差函数在第 8行到第 15 行的脚本标签中调用。通过属性data-stellar-background-ratio，我们为正在显示的图像设置偏移量。这是在第 19、20、21 和 22 行完成的。
CSS 代码如下：
body {
font-family: helvetica, arial;
padding-top: 40px;
}
h1 {
background-color: black;
color: white;
height: 40px;
font-size: 24px;
font-weight: normal;
left: 0;
line-height: 40px;
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 1;
}
h1 a {
border-bottom: 1px solid white;
color: white;
display: inline-block;
line-height: 30px;
text-decoration: none;
}
.image {
background-attachment: fixed;
background-position: 50% 0;
background-repeat: no-repeat;
height: 450px;
position: relative;
}
.image span {
bottom: 0;
color: white;
display: block;
left: 50%;
margin-left: -640px;
font-size: 38px;
padding: 10px;
position: absolute;
text-shadow: 0 2px 0 black, 0 0 10px black;
width: 1280px;
}
.architecture {
background-image: url(img/architecture.jpg);
}
.abstract {
background-image: url(img/ruin.jpg);
}
.landscape {
background-image: url(img/landscape.jpg);
}
.window {
background-image: url(img/window.jpg);
}
一旦创建了这两个文件并且 stellar.js 插件文件包含在同一文件夹中，您应该能够看到如下屏幕截图所示的效果 -
