JavaScript技术 - 芒果文档

📌 相关文章

📜 JavaScript技术

📅 最后修改于: 2020-10-21 06:05:25 🧑 作者: Mango

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

使用纯JavaScript可以使网站性能保持最佳状态。从性能的角度来看，使用库还有许多其他优点。但是，为了更好地理解代码组织，我们将从纯JavaScript视差实现开始。有趣的是，有时纯JavaScript也称为Vanilla JavaScript。

使用纯JavaScript的视差滚动

首先，使用下面的代码创建主HTML文件。 HTML页面仅包含四个标题文本。

  
        
     
   
     
        
         The First Scroll
             
      
        
         The Second One
             
      
        
         GoingOn !!
             
      
        
         And we've reached the bottom!!

请注意，在本例中，在第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。

  
      
        
        
     
   
      
        
        
      
        
           
        
      
        
           
         These are bricks  
           
      
      
        
        
           
        
      
        
           
            Some More Bricks

如上面的代码所示，我们需要从第3行到第6行的JavaScript库引用。 CSS代码从第9行到第19行指定。

内容传递网络

从第3行到第6行的脚本引用指向ScrollMagic Content Delivery Network（CDN）URL。在现代网站开发中，使用CDN很有意义，因为您可以加载所需的库而不会降低网站的速度。

如果库中需要自定义，则必须将库托管在其各自的服务器上以利用这些效果。如果您正在使用库中的基本功能，则使用CDN URL是有效的。

上面的HTML代码显示了一个由2个分区分开的图像。第一部分显示标题-这些是砖头，第二部分显示标题-一些砖头。

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

ScrollMagic库完成创建此软视差场景的工作。如果您从第43至62行引用脚本代码，则会调用ScrollMagic控制器并创建一个场景。

当80％的屏幕被占用时，这些场景将引导DOM创建视差效果。 JavaScript用于理解滚动触发器。结果，您在此页面上获得的是浮动体验。

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

触发动画

ScrollMagic Library带来了创造各种用户体验的无限可能。遵守下面给出的代码片段，以触发滚动动画。

注意，为此，您需要两个文件*减；一个HTML文件和一个CSS文件。

使用以下代码创建HTML文件-

  
   
        
        
        
        
     
   
      
        
        
           
        
      
        
      This is it!

现在，创建一个包含以下代码的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％时，下一个场景开始显示横幅。

在第10行和第15行的CSS文件中控制id为square的div的不透明度。

结果，您将在页面上看到以下动画。

动画砖墙

水平滚动

我们还可以应用视差滚动并实现水平滚动。 ScrollMagic库可用于创建水平滚动效果。请参见下面的代码。

尽管代码可以直接创建水平滚动效果，但我们仍需要jquery引用来实现屏幕的水平移动。下一章将提供jQuery的详细信息，现在，只需遵循以下代码即可。

我们将创建三个单独的文件-用于主代码的HTML文件，用于样式的CSS文件和用于ScrollMagic函数调用的JS文件。

这是HTML文档的代码。

  
     
   
     
     
    
    
     
     
   
     
        
           
              
               Scroll Once  
                 
              
            
              
               Do It Again  
                 
              
            
              
            Thank You!

观察到我们有三个部分，将在滚动后显示。第15、19和23行分别用ids 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属性。当用户达到scroll事件的完成状态时，此属性负责提供滚动效果。 TimelineMax函数负责向我们的屏幕提供水平滚动效果。

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

水平滚动动画