JavaScript 技术
要创建视差效果，最流行的方法是使用 JavaScript。从本章开始，我们将讨论 JavaScript 的概念以及一些用于实现视差滚动的库。
使用纯 JavaScript 对于保持网站最佳性能是有意义的。从性能方面来看，使用库还有许多其他优点。然而，为了更好地理解代码组织，我们将从纯 JavaScript 视差实现开始。有趣的是，有时纯 JavaScript 也称为普通JavaScript。
使用纯 JavaScript 进行视差滚动
首先，使用如下所示的代码创建主 HTML 文件。HTML 页面仅包含四个标题文本。
<html>
<head>
<link rel = "stylesheet" href = "styles.css">
<script src = "myscripts.js"></script>
</head>
<body>
<section class = "parallax">
<h1>The First Scroll</h1>
</section>
<section class = "parallax">
<h1>The Second One</h1>
</section>
<section class = "parallax">
<h1>GoingOn !!</h1>
</section>
<section class = "parallax">
<h1>And we've reached the bottom!!</h1>
</section>
</body>
</html>
请注意，在第 4 行中，对于本示例，我们使用myscripts.js文件，该文件将存储在与 HTML 文件和 CSS 文件相同的文件夹中。
现在，让我们准备 CSS 文件，如下所示。
header {
height: 4em;
background: #845;
}
.parallax {
background-repeat: no-repeat;
background-size: cover;
}
.parallax h1 {
text-align: center;
margin: 0;
font-size: 2.5em;
letter-spacing: .2em;
color: red;
padding: 10rem 0;
mix-blend-mode: exclusion;
}
.parallax:nth-of-type(1) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(1) h1 {
padding: 15rem 0;
}
.parallax:nth-of-type(2) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(2) h1 {
padding: 12rem 0;
}
.parallax:nth-of-type(3) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
.parallax:nth-of-type(4) {
background: url(https://pixabay.com/get/ea35b10621f0083ed1534705fb0938c9bd22ffd41cb2114296f0c679a4/background-3009949_1920.jpg);
}
现在是 JavaScript 部分，在记事本中创建一个文件并将其另存为myscripts.js。
function $$(selector, context) {
context = context || document;
var elements = context.querySelectorAll(selector);
return Array.prototype.slice.call(elements);
}
window.addEventListener("scroll", function() {
var scrolledHeight= window.pageYOffset;
$$(".parallax").forEach(function(el,index,array) {
var limit = el.offsetTop+ el.offsetHeight;
if(scrolledHeight > el.offsetTop && scrolledHeight &l;= limit) {
el.style.backgroundPositionY= (scrolledHeight - el.offsetTop) /1.5+ "px";
} else {
el.style.backgroundPositionY= "0";
}
});
});
代码分析
让我们分析一下 JavaScript 代码。
第 1 行到第 4 行的代码代表辅助函数。
在第 6 行中，我们选择视差元素并向窗口添加滚动事件。为了确定滚动的区域大小，我们使用scrolledHeight属性。当屏幕向下滚动时，backgroundPositionY会针对视差元素进行更新。
为了减缓视差效果，我们除以1.5，这个数字可以更改为您想要的任何数字。
现在，您将能够看到页面向下滚动，如下面的屏幕截图所示。
使用 ScrollMagic JavaScript 库
正如上一节所讨论的，虽然我们可以使用纯 JavaScript 来创建视差效果，但有一些强大的 JavaScript 库可以增强用户体验。ScrollMagic 就是这样一个用于创建视差滚动交互的库。
让我们借助下面给出的示例来详细讨论这一点 -
注意- 在本例中，为了简单起见，我们将 CSS 存储在 HTML 文件中。此外，JavaScript 代码将出现在同一文档中。简而言之，我们将只创建一个 HTML 文件，它将引用 ScrollMagic 库以及所需的 CSS。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
</head>
<body>
<style type = "text/css">
.parallaxParent {
height: 100vh;
overflow: hidden;
}
.parallaxParent > * {
height: 200%;
position: relative;
top: -100%;
}
</style>
<div class = "spacing0"></div>
<div id = "parallax1" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing1">
<div style = "background-color:cyan">
<p>These are bricks</p>
</div>
</div>
<div class = "spacing0"></div>
<div id="parallax2" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing1">
<div style = "background-color:yellow">
<p>Some More Bricks</p>
</div>
</div>
<div class = "spacing0"></div>
<div id = "parallax3" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div class = "spacing2"></div>
<script>
// init controller
var controller = new ScrollMagic.Controller({
globalSceneOptions: {triggerHook: "onEnter", duration: "200%"}});
// build scenes
new ScrollMagic.Scene({triggerElement: "#parallax1"})
.setTween("#parallax1 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
new ScrollMagic.Scene({triggerElement: "#parallax2"})
.setTween("#parallax2 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
new ScrollMagic.Scene({triggerElement: "#parallax3"})
.setTween("#parallax3 > div", {y: "80%", ease: Linear.easeNone})
.addIndicators()
.addTo(controller);
</script>
</body>
</html>
如上面的代码所示，我们需要从第 3 行到第 6行引用 JavaScript 库。CSS 代码从第 9 行到第 19 行指定。
内容交付网络
第 3 行到第 6 行的脚本引用指向 ScrollMagic 内容交付网络 (CDN) URL。使用 CDN 在现代网站开发中很有意义，因为您可以加载所需的库，而不会减慢网站速度。
如果库中需要自定义，则必须将库托管在各自的服务器上才能利用这些效果。如果您使用库中的基本功能，则使用 CDN URL 会更有效。
上面的 HTML 代码显示了由 2 个分区分隔的图像。第一个分区的标题为 –这些是砖块，第二个分区的标题为 –更多砖块。
请注意，在第 9 行到第 19 行的 CSS 代码中，我们仅指定相应视差 div 的位置和样式。
创建这个软视差场景的工作是由 ScrollMagic 库完成的。如果您引用第 43 行到第 62 行的脚本代码，则会调用ScrollMagic控制器并创建场景。
当屏幕占据 80% 时，场景引导 DOM 创建视差效果。JavaScript 用于理解滚动触发器。结果，您在此页面上获得的是浮动体验。
注意- 将上图视为 GIF 图像，您将无法观察到文本分割的平滑效果。
触发动画
ScrollMagic Library 创造不同用户体验的可能性是无限的。观察下面给出的代码片段以触发滚动动画。
请注意，为此您需要两个文件*减；一个 HTML 文件和一个 CSS 文件。
使用下面所示的代码创建 HTML 文件 -
<html>
<head>
<link rel = "stylesheet" href = "style.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src = "http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script>
</head>
<body>
<div class = "spacing0"></div>
<div id = "parallax1" class = "parallaxParent">
<div style = "background-image: url(https://cdn.pixabay.com/photo/2015/05/16/19/13/stones-770264_640.jpg);"></div>
</div>
<div style = "height:450px;"></div>
<div id = "square" class = "square">This is it!</div>
<div style = "height:450px;"></div>
<script>
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({triggerElement: "#parallax1"})
.setTween("#parallax1 > div", {y: "40%", ease: Linear.easeNone})
.addTo(controller);
var scene = new ScrollMagic.Scene({triggerElement: '.square'})
.setClassToggle('.square', 'show')
.addTo(controller);
</script>
</body>
</html>
现在，创建一个 CSS 文件，其中包含以下代码。
.square {
background: aqua;
margin: 0 auto;
display: block;
padding: 40px 0;
text-align: center;
color: #000;
font-size: 40px;
font-weight: bold;
opacity: 0;
transition: .3s;
width: 0%;
}
.square.show{
opacity: 1;
width: 100%;
}
.parallaxParent {
height: 100vh;
overflow: hidden;
}
.parallaxParent > * {
height: 200%;
position: relative;
top: -100%;
}
代码分析
参考 HTML 代码，ScrollMagic 代码从第 17 行开始，一直持续到第 25 行。在本节中，我们将创建两个 ScrollMagic 场景。第一个场景用于砖块图像，另一个场景用于横幅动画。
正如第 20 行setTween函数中所指定的，当滚动操作发生在屏幕尺寸的 40% 时，下一个场景将开始，并显示横幅“就是这样！”
id- square的 div 的不透明度在 CSS 文件的第 10 行和第 15 行中进行控制。
结果，您将在页面上看到以下动画。
水平滚动
我们还可以应用视差滚动并实现水平滚动。ScrollMagic 库可用于创建水平滚动效果。请参阅下面的代码。
虽然代码很简单，可以创建水平滚动效果，但我们需要引用 jquery 来实现屏幕的水平移动。jQuery 的详细信息将在下一章中提供，现在只需按照下面给出的代码进行操作即可。
我们将创建三个单独的文件——用于主代码的 HTML 文件、用于样式的 CSS 文件和用于 ScrollMagic 函数调用的 JS 文件。
这是 HTML 文档的代码。
<html>
<head>
<link rel = "stylesheet" href = "style.css">
</head>
<script src = 'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src = 'http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/ScrollMagic.min.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/animation.gsap.js'></script>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/debug.addIndicators.min.js'></script>
<script src = "animation.js"></script>
<body>
<div class = "wrapper" id = "js-wrapper">
<div class = "sections" id = "js-slideContainer">
<section class = "section">
<span class = "section__title" id = "title1">Scroll Once</span>
<span id = "trigger--title1"></span>
</section>
<section class = "section">
<span class = "section__title" id = "title2">Do It Again</span>
<span id = "trigger--title2"></span>
</section>
<section class = "section">
<span class = "section__title" id = "title3">Thank You!</span>
<span id = "trigger--title3"></span>
</div>
</div>
</body>
</html>
观察我们有三个部分，滚动后将出现。这三个部分分别由第 15,19 和 23 行的 id title1、title2 和 title3 表示。
CSS 文档的代码如下 -
body {
font-family: serif;
}
body, html {
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
overflow: hidden;
}
.section {
height: 100%;
width: calc( 100% / 5 );
float: left;
position: relative;
}
.section:nth-child(1) {
background: green;
}
.section:nth-child(2) {
background: orange;
}
.section:nth-child(3) {
background: red;
}
.sections {
width: 500%;
height: 100%;
}
.section__title {
position: absolute;
top: 50%;
left: 50%;
font-size: 30px;
color: #fff;
}
代码分析
第 10、22和25行提供了三个屏幕（或部分）的背景颜色。
我们在第 13 行开始的代码中计算每个屏幕的相对宽度。
ScrollMagic 的 JavaScript 代码如下 -
$(function () {
var controller = new ScrollMagic.Controller();
var horizontalSlide = new TimelineMax()
.to("#js-slideContainer", 1, {x: "-20%"})
.to("#js-slideContainer", 1, {x: "-40%"})
new ScrollMagic.Scene({
triggerElement: "#js-wrapper",
triggerHook: "onLeave",
duration: "400%"
})
.setPin("#js-wrapper")
.setTween(horizontalSlide)
.addTo(controller);
});
请注意第 8 行的triggerHook属性。该属性负责在用户完成滚动事件时提供滚动效果。TimelineMax函数负责为我们的屏幕提供水平滚动效果。
创建相应的文件后，您将能够看到水平滚动动画，如下所示。
