เทคนิค JavaScript

ในการสร้างเอฟเฟกต์ Parallax วิธีที่ได้รับความนิยมมากที่สุดคือการใช้ JavaScript จากบทนี้เป็นต้นไปเราจะพูดถึงแนวคิดของ JavaScript และไลบรารีบางส่วนที่ใช้ในการเลื่อนพารัลแลกซ์

การใช้ JavaScript บริสุทธิ์เหมาะสมที่จะรักษาประสิทธิภาพของเว็บไซต์ให้ดีที่สุด มีข้อดีอื่น ๆ อีกมากมายของการใช้ไลบรารีจากแง่มุมของประสิทธิภาพ อย่างไรก็ตามเพื่อให้เข้าใจองค์กรโค้ดได้ดีขึ้นเราจะเริ่มต้นด้วยการใช้งานพารัลแลกซ์ JavaScript ที่บริสุทธิ์ ข้อเท็จจริงที่น่าสนุกบางครั้งเรียก JavaScript บริสุทธิ์vanilla JavaScript

Parallax Scrolling โดยใช้ Pure 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, สร้างไฟล์ใน notepad และบันทึกเป็น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

รหัสจาก line number 1 to 4 แสดงถึงฟังก์ชันตัวช่วย

ในบรรทัดที่ 6 เราเลือกองค์ประกอบพารัลแลกซ์และเพิ่ม scrollเหตุการณ์ไปที่หน้าต่าง ในการกำหนดพื้นที่ที่จะเลื่อนเรากำลังใช้scrolledHeightทรัพย์สิน. เมื่อหน้าจอเลื่อนลงbackgroundPositionY ได้รับการอัปเดตสำหรับองค์ประกอบพารัลแลกซ์

เพื่อทำให้เอฟเฟกต์พารัลแลกซ์ช้าลงเราหารด้วย 1.5 จำนวนนี้สามารถเปลี่ยนเป็นตัวเลขใดก็ได้ที่คุณต้องการ

ตอนนี้คุณจะสามารถเห็นหน้าเลื่อนลงตามที่ให้ไว้ในภาพหน้าจอด้านล่าง

การใช้ ScrollMagic JavaScript Library

ตามที่กล่าวไว้ในหัวข้อก่อนหน้านี้ในขณะที่เราสามารถใช้ JavaScript บริสุทธิ์เพื่อสร้างเอฟเฟกต์พารัลแลกซ์ แต่ก็มีไลบรารี JavaScript ที่มีประสิทธิภาพซึ่งจะช่วยเพิ่มประสบการณ์ของผู้ใช้ ScrollMagic เป็นหนึ่งในไลบรารีสำหรับสร้างการโต้ตอบการเลื่อนพารัลแลกซ์

ให้เราพูดคุยเพิ่มเติมเกี่ยวกับเรื่องนี้ด้วยความช่วยเหลือของตัวอย่างที่ให้ไว้ด้านล่าง -

Note- ในตัวอย่างนี้เพื่อให้ง่ายเราจะมี 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>

ดังที่แสดงในโค้ดด้านบนเราจำเป็นต้องมีการอ้างอิงไลบรารี JavaScript จาก line 3 to 6. โค้ด CSS ถูกระบุตั้งแต่บรรทัดที่ 9 ถึง 19

เครือข่ายการจัดส่งเนื้อหา

การอ้างอิงสคริปต์จากบรรทัดที่ 3 ถึง 6 ชี้ไปที่ URL ของ ScrollMagic Content Delivery Network (CDN) การใช้ CDN เหมาะสมกับการพัฒนาเว็บไซต์สมัยใหม่เนื่องจากคุณสามารถโหลดไลบรารีที่ต้องการได้โดยไม่ทำให้เว็บไซต์ของคุณช้าลง

หากมีการกำหนดเองที่จำเป็นในไลบรารีเราจะต้องโฮสต์ไลบรารีบนเซิร์ฟเวอร์ของตนเพื่อใช้เอฟเฟกต์เหล่านี้ หากคุณกำลังใช้ฟังก์ชันพื้นฐานจากไลบรารีการใช้ CDN URL จะมีประสิทธิภาพ

โค้ด HTML ด้านบนแสดงรูปภาพที่คั่นด้วย 2 ดิวิชั่น ส่วนแรกปรากฏขึ้นพร้อมกับหัวเรื่อง -These are bricks และส่วนที่สองปรากฏด้วย - Some More Bricks.

สังเกตว่าในโค้ด CSS จากบรรทัดที่ 9 ถึง 19 เราระบุเฉพาะตำแหน่งและสไตล์สำหรับ Parallax Div ที่เกี่ยวข้องเท่านั้น

ผลงานการสร้างพารัลแลกซ์ที่นุ่มนวลนี้ sceneทำได้โดยไลบรารี ScrollMagic หากคุณอ้างถึงรหัสสคริปต์จากบรรทัดที่ 43 ถึง 62 ScrollMagiccontroller ถูกเรียกใช้และ a scene ถูกสร้างขึ้น

ฉากจะแนะนำ DOM เพื่อสร้างเอฟเฟกต์พารัลแลกซ์เมื่อ 80% ของหน้าจอถูกครอบครอง JavaScript ใช้เพื่อทำความเข้าใจทริกเกอร์การเลื่อน ด้วยเหตุนี้สิ่งที่คุณจะได้รับคือประสบการณ์ลอยๆในหน้านี้

Note - เมื่อพิจารณาภาพด้านบนเป็นภาพ GIF คุณจะไม่สังเกตเห็นเอฟเฟกต์ที่ราบรื่นของการแบ่งข้อความ

ทริกเกอร์แอนิเมชัน

ความเป็นไปได้ในการสร้างประสบการณ์การใช้งานที่หลากหลายนั้นไม่มีที่สิ้นสุดด้วย ScrollMagic Library สังเกตข้อมูลโค้ดที่ระบุด้านล่างเพื่อทริกเกอร์ภาพเคลื่อนไหวเมื่อเลื่อน

โปรดทราบว่าสำหรับสิ่งนี้คุณต้องมีสองไฟล์ * ลบ; ไฟล์ 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 เริ่มต้นจาก line 17 และดำเนินต่อไปจนถึง line 25. ในส่วนนี้เรากำลังสร้างฉาก ScrollMagic สองฉาก ฉากแรกมีไว้สำหรับภาพอิฐและอีกฉากเป็นภาพเคลื่อนไหวของแบนเนอร์

ตามที่ระบุไว้ใน setTween เปิดฟังก์ชั่น line 20เมื่อการเลื่อนเกิดขึ้นที่ 40% ของขนาดหน้าจอฉากต่อไปจะเริ่มขึ้นซึ่งจะแสดงแบนเนอร์นี่แหล่ะ!

ความทึบของ div กับ id - square ถูกควบคุมในไฟล์ CSS บน line 10 และ line 15.

ดังนั้นคุณจะเห็นภาพเคลื่อนไหวด้านล่างในหน้า

การเลื่อนแนวนอน

นอกจากนี้เรายังสามารถใช้การเลื่อนแบบพารัลแลกซ์และเลื่อนตามแนวนอนได้ ไลบรารี ScrollMagic สามารถใช้เพื่อสร้างเอฟเฟกต์การเลื่อนในแนวนอน ดูโค้ดด้านล่าง

แม้ว่าโค้ดจะตรงไปตรงมาเพื่อสร้างเอฟเฟกต์การเลื่อนแนวนอน แต่เราจำเป็นต้องมีการอ้างอิง jquery เพื่อให้ได้การเคลื่อนไหวในแนวนอนของหน้าจอ รายละเอียดของ jQuery อยู่ในบทถัดไปสำหรับตอนนี้เพียงทำตามโค้ดที่ระบุด้านล่าง

เราจะสร้างไฟล์แยกกันสามไฟล์ - ไฟล์ HTML สำหรับโค้ดหลักไฟล์ CSS สำหรับสไตล์และไฟล์ JS สำหรับการเรียกฟังก์ชัน ScrollMagic

นี่คือรหัสสำหรับเอกสาร 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>

สังเกตว่าเรามีสามส่วนซึ่งจะปรากฏขึ้นหลังจากเลื่อน ทั้งสามส่วนแสดงด้วย ids title1, title2 และ title3 ในบรรทัดที่ 15,19 และ 23 ตามลำดับ

รหัสสำหรับเอกสาร 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;  
}

การวิเคราะห์รหัส

สีพื้นหลังสำหรับสามหน้าจอ (หรือส่วน) มีให้บน lines 10, 22 และ 25.

เรากำลังคำนวณความกว้างสัมพัทธ์ของแต่ละหน้าจอในโค้ดที่เริ่มต้น line 13.

โค้ด JavaScript สำหรับ ScrollMagic มีให้ด้านล่าง -

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

สังเกต triggerHookคุณสมบัติในบรรทัดที่ 8 คุณสมบัตินี้มีหน้าที่ในการจัดเตรียมเอฟเฟกต์การเลื่อนเมื่อผู้ใช้ไปถึงเหตุการณ์เลื่อนที่เสร็จสมบูรณ์ ฟังก์ชั่นTimelineMax มีหน้าที่จัดทำเอฟเฟกต์การเลื่อนแนวนอนให้กับหน้าจอของเรา

เมื่อสร้างไฟล์ตามลำดับแล้วคุณจะสามารถเห็นภาพเคลื่อนไหวการเลื่อนแนวนอนดังที่แสดงด้านล่าง