JavaScript技巧

上一页
下一页

要创建视差效果，最流行的方法是使用JavaScript。从本章开始，我们将讨论JavaScript的概念以及一些用于实现视差滚动的库。

利用纯JavaScript可以使网站性能保持最佳。从性能方面来看，使用库还有许多其他优点。但是，为了更好地理解代码组织，我们将从纯JavaScript视差实现开始。有趣的事实是，有时纯JavaScript也被称为vanilla 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，这个数字可以更改为您想要的任何数字。

现在，您将能够看到页面如以下屏幕截图所示向下滚动。

Page Scrolling Down

使用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个div分隔的图像。第一个div显示标题 – 这些是砖块，第二个div显示 – 更多砖块。

请注意，在第9行到第19行的CSS代码中，我们仅为相应的视差div指定位置和样式。

创建此柔和视差场景的工作由ScrollMagic库完成。如果您参考第43行到第62行的脚本代码，则会调用ScrollMagic控制器并创建场景。

当屏幕占用80%时，场景引导DOM创建视差效果。JavaScript用于理解滚动触发器。因此，您在此页面上获得的是一种漂浮体验。

Bricks Wall

注意 - 将上面图像视为GIF图像，您将无法观察到文本div的平滑效果。

触发动画

使用ScrollMagic库可以创建各种用户体验，可能性是无限的。请观察下面给出的代码片段以在滚动时触发动画。

请注意，为此您需要两个文件*减号；一个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行中控制。

因此，您将在页面上看到以下动画。

Brick Wall with Animation

水平滚动

我们还可以应用视差滚动并实现水平滚动。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函数负责为我们的屏幕提供水平滚动效果。

创建完各个文件后，您将能够看到以下所示的水平滚动动画。

Horizontal Scroll Animation
打印页面
上一页
下一页
广告