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 行，我们选择视差元素并向窗口添加 scroll 事件。为了确定滚动的区域大小，我们使用 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 库可以创建无限多样的用户体验。请遵循下面给出的代码片段以在滚动时触发动画。

请注意，为此您需要两个文件 *minus;一个 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 负责为我们的屏幕提供水平滚动效果。

创建相应的文件后，您将能够看到如下所示的水平滚动动画。