Kỹ thuật JavaScript

Để tạo hiệu ứng Parallax, phương pháp phổ biến nhất là sử dụng JavaScript. Từ chương này trở đi, chúng ta sẽ thảo luận về các khái niệm của JavaScript và một số thư viện được sử dụng để đạt được Parallax scrolling.

Sử dụng JavaScript thuần túy có ý nghĩa để giữ hiệu suất trang web tối ưu. Có nhiều lợi thế khác của việc sử dụng thư viện từ khía cạnh hiệu suất. Tuy nhiên, để hiểu tổ chức mã tốt hơn, chúng ta sẽ bắt đầu với việc triển khai thị sai JavaScript thuần túy. Sự thật thú vị, đôi khi JavaScript thuần túy cũng được gọi làvanilla JavaScript.

Di chuyển thị sai sử dụng JavaScript thuần túy

Đầu tiên, tạo tệp HTML chính với mã hiển thị bên dưới. Trang HTML sẽ chỉ bao gồm bốn văn bản tiêu đề.

<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>

Quan sát rằng trong dòng số 4, ví dụ này, chúng tôi đang sử dụng myscripts.js tệp sẽ được lưu trữ trong cùng một thư mục với tệp HTML và tệp CSS.

Bây giờ, chúng ta hãy chuẩn bị tệp CSS của chúng ta như hình dưới đây.

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);  
}

Bây giờ đến phần JavaScript, tạo một tệp trong notepad và lưu nó dưới dạng 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";  
      }  
   });  
});

Phân tích mã

Hãy để chúng tôi phân tích mã JavaScript.

Mã từ line number 1 to 4 đại diện cho chức năng trợ giúp.

Trong dòng 6, chúng tôi chọn phần tử thị sai của chúng tôi và thêm scrollsự kiện vào cửa sổ. Để xác định bao nhiêu diện tích được cuộn, chúng tôi đang sử dụngscrolledHeightbất động sản. Khi màn hình cuộn xuống,backgroundPositionY được cập nhật cho phần tử thị sai.

Để làm chậm hiệu ứng thị sai, chúng tôi chia cho 1,5, số này có thể được thay đổi thành bất kỳ số nào bạn muốn.

Bây giờ, bạn sẽ có thể thấy trang cuộn xuống như được cung cấp trong ảnh chụp màn hình bên dưới.

Sử dụng Thư viện JavaScript ScrollMagic

Như đã thảo luận trong phần trước, mặc dù chúng ta có thể sử dụng JavaScript thuần túy để tạo hiệu ứng thị sai, nhưng có một số thư viện JavaScript mạnh mẽ sẽ nâng cao trải nghiệm người dùng. ScrollMagic là một trong những thư viện như vậy để tạo các tương tác cuộn thị sai.

Hãy để chúng tôi thảo luận thêm về điều này với sự trợ giúp của một ví dụ như dưới đây -

Note- Trong ví dụ này, để đơn giản, chúng ta sẽ có CSS ​​được lưu trữ trong tệp HTML. Ngoài ra, mã JavaScript sẽ có trong cùng một tài liệu. Tóm lại, chúng tôi sẽ chỉ tạo một tệp HTML và nó sẽ có các thư viện ScrollMagic được tham chiếu cùng với CSS bắt buộc.

<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>

Như được hiển thị trong đoạn mã trên, chúng tôi yêu cầu các tham chiếu thư viện JavaScript từ line 3 to 6. Mã CSS được chỉ định từ dòng 9 đến dòng 19.

Mạng phân phối nội dung

Tham chiếu tập lệnh từ dòng 3 đến dòng 6 trỏ tới URL của Mạng phân phối nội dung ScrollMagic (CDN). Sử dụng CDN có ý nghĩa trong việc phát triển trang web hiện đại, vì bạn có thể tải các thư viện cần thiết mà không làm chậm trang web của mình.

Nếu có các tùy chỉnh được yêu cầu trong các thư viện, người ta sẽ phải lưu trữ các thư viện trên máy chủ tương ứng của chúng để sử dụng các hiệu ứng này. Nếu bạn đang sử dụng các chức năng cơ bản từ thư viện, sử dụng URL CDN sẽ rất hiệu quả.

Đoạn mã HTML ở trên hiển thị một hình ảnh được phân tách bằng 2 vạch chia. Bộ phận đầu tiên xuất hiện với tiêu đề -These are bricks và phép chia thứ hai xuất hiện với - Some More Bricks.

Lưu ý rằng trong mã CSS từ dòng 9 đến dòng 19, chúng tôi chỉ xác định vị trí và kiểu cho div thị sai tương ứng.

Công việc tạo ra thị sai mềm này sceneđược thực hiện bởi thư viện ScrollMagic. Nếu bạn tham khảo mã tập lệnh từ dòng 43 đến dòng 62, ScrollMagiccontroller được gọi và một scene được tạo ra.

Các cảnh hướng dẫn DOM tạo hiệu ứng thị sai khi chiếm 80% màn hình. JavaScript được sử dụng để hiểu trình kích hoạt cuộn. Kết quả là, những gì bạn nhận được là trải nghiệm nổi trên trang này.

Note - Coi ảnh trên là ảnh GIF, bạn sẽ không quan sát được hiệu ứng mượt mà của các phần chia văn bản.

Kích hoạt hoạt ảnh

Khả năng tạo trải nghiệm người dùng đa dạng là vô tận với Thư viện ScrollMagic. Quan sát các đoạn mã được đưa ra bên dưới để kích hoạt hoạt ảnh khi cuộn.

Lưu ý rằng đối với điều này, bạn cần hai tệp * dấu trừ; một tệp HTML và một tệp CSS.

Tạo tệp HTML với mã hiển thị bên dưới -

<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>

Bây giờ, hãy tạo một tệp CSS với mã sau trong đó.

.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%;  
}

Phân tích mã

Đề cập đến mã HTML, mã ScrollMagic bắt đầu từ line 17 và tiếp tục cho đến khi line 25. Trong phần này, chúng tôi đang tạo hai cảnh ScrollMagic. Cảnh đầu tiên dành cho hình ảnh viên gạch và cảnh còn lại dành cho hoạt ảnh biểu ngữ.

Như được chỉ định trong setTween chức năng trên line 20, khi hành động cuộn xảy ra ở 40% kích thước màn hình, cảnh tiếp theo sẽ bắt đầu hiển thị biểu ngữ Đây rồi!

Độ mờ của div với id - square được kiểm soát trong tệp CSS trên line 10line 15.

Kết quả là, bạn sẽ thấy hoạt ảnh bên dưới trên trang.

Cuộn ngang

Chúng ta cũng có thể áp dụng thao tác cuộn thị sai và đạt được kiểu cuộn ngang. Thư viện ScrollMagic có thể được sử dụng để tạo hiệu ứng cuộn theo chiều ngang. Xem mã bên dưới.

Mặc dù mã được chuyển thẳng về phía trước để tạo hiệu ứng cuộn ngang, chúng ta sẽ cần tham chiếu jquery để đạt được chuyển động ngang của màn hình. Chi tiết về jQuery được cung cấp trong chương tiếp theo, bây giờ, chỉ cần làm theo mã như dưới đây.

Chúng tôi sẽ tạo ba tệp riêng biệt - tệp HTML cho mã chính, tệp CSS cho các kiểu và tệp JS cho các lệnh gọi hàm ScrollMagic.

Đây là mã cho tài liệu 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>

Quan sát rằng chúng ta có ba phần, sẽ xuất hiện sau khi cuộn. Ba phần được biểu thị bằng id title1, title2 và title3 trên các dòng 15,19 và 23 tương ứng.

Mã cho tài liệu CSS được cung cấp bên dưới:

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;  
}

Phân tích mã

Màu nền cho ba màn hình (hoặc các phần) được cung cấp trên lines 10, 2225.

Chúng tôi đang tính toán chiều rộng tương đối của mỗi màn hình trong đoạn mã bắt đầu từ line 13.

Mã JavaScript cho ScrollMagic được cung cấp bên dưới:

$(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);    
});

Chú ý triggerHookthuộc tính trên dòng 8. Thuộc tính này chịu trách nhiệm cung cấp hiệu ứng cuộn khi người dùng hoàn thành sự kiện cuộn. Chức năngTimelineMax chịu trách nhiệm cung cấp hiệu ứng cuộn ngang cho màn hình của chúng tôi.

Sau khi tạo các tệp tương ứng, bạn sẽ có thể thấy hình ảnh động cuộn ngang như hình dưới đây.