เทคนิค 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 มีหน้าที่จัดทำเอฟเฟกต์การเลื่อนแนวนอนให้กับหน้าจอของเรา
เมื่อสร้างไฟล์ตามลำดับแล้วคุณจะสามารถเห็นภาพเคลื่อนไหวการเลื่อนแนวนอนดังที่แสดงด้านล่าง