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
列印頁面
上一頁
下一頁
廣告

© . All rights reserved.