การสร้างไทม์ไลน์เชิงโต้ตอบด้วย CSS และ JavaScript
ประเด็นที่สำคัญ
สามารถสร้างไทม์ไลน์ที่น่าสนใจได้อย่างง่ายดายโดยใช้ CSS และ JavaScript
เริ่มต้นด้วยการจัดระเบียบความก้าวหน้าชั่วคราวของเหตุการณ์ผ่านการสร้างโครงสร้าง HTML ที่ครอบคลุมองค์ประกอบต่างๆ เช่น ส่วนหัว ย่อหน้า รูปภาพ และเนื้อหามัลติมีเดียอื่นๆ นอกจากนี้ ใช้ Cascading Style Sheets (CSS) เพื่อมอบคุณสมบัติด้านสุนทรียะให้กับส่วนประกอบเหล่านี้ ดังนั้นจึงสร้างอินเทอร์เฟซที่ดึงดูดสายตาซึ่งจะช่วยปรับปรุงประสบการณ์ผู้ใช้ในขณะที่นำทางไทม์ไลน์
javascript//ตั้งค่าผู้สังเกตการณ์ทางแยกสำหรับไทม์ไลน์ elementconst Observer=new IntersectionObserver(entries=> {entries.forEach(entry=> {//หากมองเห็นองค์ประกอบได้ ให้จางหายไปด้วย CSS transitionif (entry.isIntersecting) {entry.target. classList.add(‘fade-in’);} else {entry.target.classList.remove(‘fade-in’);}});});//เพิ่มคลาส’fade-in’ให้กับองค์ประกอบไทม์ไลน์ทั้งหมด beginningconst timelineItems=document.querySelectorAll(’.timeline__item’);timelineItems.forEach(item=> item.classList.add(‘fade-in’));//สังเกตแต่ละองค์ประกอบไทม์ไลน์const timelineObserved
เส้นเวลาทำหน้าที่เป็นตัวช่วยในการมองเห็นและทำความเข้าใจเหตุการณ์ตามลำดับเหตุการณ์ได้อย่างมีประสิทธิภาพ ค้นพบวิธีสร้างไทม์ไลน์เชิงโต้ตอบผ่านการใช้ CSS และ JavaScript ซึ่งรวมกันเป็นการผสมผสานที่มีประสิทธิภาพในเรื่องนี้
การสร้างโครงสร้างไทม์ไลน์
คุณสามารถตรวจสอบโค้ดเต็มสำหรับโปรเจ็กต์นี้ได้จาก พื้นที่เก็บข้อมูล GitHub
ในการเริ่มต้น จำเป็นต้องสร้างสถาปัตยกรรม HTML ภายในไฟล์ “index.html” สิ่งนี้เกี่ยวข้องกับการแยกแยะเหตุการณ์และการนัดหมายเป็นองค์ประกอบแต่ละรายการ ดังนั้นจึงเป็นพื้นฐานสำหรับไทม์ไลน์ที่เชื่อมโยงถึงกันซึ่งอำนวยความสะดวกในการโต้ตอบของผู้ใช้
<body>
<section class="timeline-section">
<div class="container">
<div class="Timeline__header">
<h2>Timeline</h2>
<p class="heading--title">
Here is the breakdown of the time we anticipate <br />
using for the upcoming event.
</p>
</div>
<div class="Timeline__content">
<div class="Timeline__item">
<div class="Timeline__text">
<h3>Occasion 1</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Corporis, explicabo.
</p>
<span class="circle">1</span>
</div>
<h3 class="Timeline__date">12 Dec. 2023</h3>
</div>
<div class="Timeline__item">
<div class="Timeline__text">
<h3>Occasion 2</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Corporis, explicabo.
</p>
<span class="circle">2</span>
</div>
<h3 class="Timeline__date">12 Dec. 2023</h3>
</div>
<!-- More Items -->
</div>
</div>
</section>
</body>
ในปัจจุบัน รูปลักษณ์ของส่วนประกอบของคุณสามารถอธิบายได้ดังนี้:
เลือกเค้าโครงสำหรับไทม์ไลน์ของคุณ: แนวตั้งกับแนวนอน
เมื่อสร้างไทม์ไลน์แบบโต้ตอบ เราอาจเลือกใช้การวางแนวในแนวตั้งหรือแนวนอนก็ได้ แบบแรกนำเสนอความสะดวกในการใช้งาน โดยเฉพาะอย่างยิ่งบนอุปกรณ์เคลื่อนที่ เนื่องจากมีความสอดคล้องกับพฤติกรรมการเลื่อนแบบเดิมๆ นอกจากนี้ หากไทม์ไลน์มีข้อมูลมากมาย ก็ถือเป็นเหตุผลที่การกำหนดค่าดังกล่าวจะให้ความสะดวกสูงสุด
ไทม์ไลน์ในแนวนอนดูน่าดึงดูดใจเมื่อแสดงผ่านหน้าจอที่กว้างขวาง โดยเฉพาะอย่างยิ่งในกรณีที่ต้องใช้การเลื่อนด้านข้างเพียงเล็กน้อย สไตล์เหล่านี้เหมาะสำหรับเว็บไซต์สร้างสรรค์ที่มีเนื้อหาที่ต้องการรายละเอียดที่ซับซ้อนน้อยกว่า ในทางกลับกัน ไทม์ไลน์แนวตั้งอาจเหมาะกับแพลตฟอร์มที่มีโครงสร้างหรือมีข้อมูลหนาแน่นมากกว่า ซึ่งจำเป็นต้องมีการเรียกดูอย่างกว้างขวาง ทางเลือกระหว่างสองทางเลือกนี้ท้ายที่สุดแล้วขึ้นอยู่กับความต้องการและความชอบเฉพาะของทั้งนักออกแบบและผู้ใช้
จัดสไตล์ไทม์ไลน์ด้วย CSS
คือส่วนของเส้นตรง การแสดงโหนด และตัวบ่งชี้เวลา
⭐ เส้น: เส้นแนวตั้งตรงกลางที่สร้างขึ้นโดยใช้ Timeline__content::after องค์ประกอบหลอก ทำหน้าที่เป็นกระดูกสันหลังของไทม์ไลน์ มันถูกจัดสไตล์ด้วยความกว้างและสีเฉพาะ โดยอยู่ในตำแหน่งที่แน่นอนเพื่อให้สอดคล้องกับจุดกึ่งกลางของรายการไทม์ไลน์
.Timeline__content::after {
background-color: var(--clr-purple);
content: "";
position: absolute;
left: calc(50%-2px);
width: 0.4rem;
height: 97%;
z-index: -5;
}
⭐ โหนด: วงกลม ซึ่งจัดสไตล์โดยใช้คลาสวงกลม ทำหน้าที่เป็นโหนดบนไทม์ไลน์ สิ่งเหล่านี้ถูกวางตำแหน่งไว้ที่กึ่งกลางของแต่ละรายการในไทม์ไลน์และมีความแตกต่างทางสายตาด้วยสีพื้นหลัง ซึ่งถือเป็นจุดสำคัญตลอดไทม์ไลน์
.circle {
position: absolute;
background: var(--clr-purple);
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
max-width: 6.8rem;
width: 100%;
aspect-ratio: 1/ 1;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index: 3;
font-size: 1.6rem;
}
⭐ เครื่องหมายวันที่: วันที่ซึ่งจัดรูปแบบโดยใช้คลาส Timeline__date จะแสดงที่ด้านใดด้านหนึ่งของไทม์ไลน์ การวางตำแหน่งจะสลับระหว่างซ้ายและขวาสำหรับแต่ละรายการในไทม์ไลน์ ทำให้เกิดรูปลักษณ์ที่เซและสมดุลตลอดไทม์ไลน์
.Timeline__text,
.Timeline__date { width: 50%; }
.Timeline__item:nth-child(even) { flex-direction: row-reverse;}
.Timeline_item:nth-child(even) .Timeline_date {
text-align: right;
padding-right: 8.3rem;
}
.Timeline_item:nth-child(even) .Timeline_text { padding-left: 8.3rem;}
.Timeline_item:nth-child(odd) .Timeline_text {
text-align: right;
align-items: flex-end;
padding-right: 8.3rem;
}
.Timeline_item:nth-child(odd) .Timeline_date { padding-left: 8.3rem;}
ตรวจสอบชุดสไตล์ทั้งหมดได้จาก GitHub repo ใน style.css
หลังจากใช้สไตล์ที่จำเป็นกับส่วนประกอบ HTML และ CSS ของหน้าเว็บแล้ว ผลลัพธ์สุดท้ายจะมีลักษณะคล้ายกับเค้าโครงที่มีโครงสร้างที่ดี ดึงดูดสายตาและใช้งานง่าย การออกแบบอาจรวมองค์ประกอบต่างๆ เช่น รูปภาพ กล่องข้อความ ตาราง แบบฟอร์ม และปุ่ม ทั้งหมดนี้จัดเรียงอย่างเป็นระเบียบเพื่ออำนวยความสะดวกในการโต้ตอบของผู้ใช้กับเนื้อหา นอกจากนี้ การใช้โทนสี การพิมพ์ และพื้นที่สีขาวสามารถช่วยสร้างประสบการณ์การมองเห็นที่กลมกลืนสำหรับผู้ใช้ที่เรียกดูเว็บไซต์
การสร้างภาพเคลื่อนไหวด้วย JavaScript
หากต้องการทำให้องค์ประกอบนี้มีชีวิตชีวา ให้ใช้ Intersection Observer API เพื่อสร้างภาพเคลื่อนไหวรายการไทม์ไลน์ขณะเลื่อนโดยการรวมข้อมูลโค้ดต่อไปนี้ไว้ในไฟล์ script.js:
ตั้งค่าเริ่มต้น
ขั้นแรก ให้เลือกส่วนประกอบทั้งหมดที่มีแอตทริบิวต์คลาส"Timeline__item"
const timelineItems = document.querySelectorAll(".Timeline__item");
การจัดสไตล์เริ่มต้นของรายการไทม์ไลน์
ขั้นแรก ให้ตั้งค่าอัลฟ่าของทุกๆ องค์ประกอบให้เป็นศูนย์ ซึ่งจะทำให้มองไม่เห็นองค์ประกอบเหล่านั้น จากนั้นใช้การเปลี่ยน CSS เพื่อให้ได้เอฟเฟกต์การซีดจางที่ราบรื่นดังต่อไปนี้:
timelineItems.forEach((item) => {
item.style.opacity = 0;
item.style.transition = "opacity 0.6s ease-out";
}
ด้วยการรวมสไตล์สำหรับไทม์ไลน์ภายในไฟล์ JavaScript แทนที่จะรวมไว้ในสไตล์ชีต เราจึงสามารถนำการปรับปรุงแบบก้าวหน้าไปใช้ได้อย่างมีประสิทธิภาพ กลยุทธ์นี้ช่วยให้แน่ใจว่าแม้ว่า JavaScript จะทำงานไม่ถูกต้อง แต่โครงสร้างพื้นฐานและเค้าโครงของไทม์ไลน์จะยังคงมองเห็นได้ ดังนั้นจึงช่วยให้ผู้ใช้มีฟังก์ชันการทำงานในระดับหนึ่ง โดยไม่คำนึงถึงปัญหาทางเทคนิคที่อาจเกิดขึ้น
โทรกลับผู้สังเกตการณ์ทางแยก
สร้างฟังก์ชัน fadeInOnScroll ที่ปรับเปลี่ยนความทึบขององค์ประกอบให้เป็นค่าเดียว ทำให้มองเห็นได้เมื่อสัมผัสกับหน้าจอของผู้ดู
const fadeInOnScroll = (entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.style.opacity = 1;
}
});
};
ตัวเลือกผู้สังเกตการณ์สี่แยก
กำหนดค่าผู้สังเกตการณ์โดยการตั้งค่าพารามิเตอร์ให้รวมค่าเกณฑ์ที่ 0.1 ซึ่งบ่งชี้ว่าภาพเคลื่อนไหวจะถูกทริกเกอร์เมื่อมองเห็นวัตถุได้ 10%
const options = {
root: null,
rootMargin: "0px",
threshold: 0.1,
}
การสร้างและการใช้ผู้สังเกตการณ์ทางแยก
สรุปโดยการสร้างอ็อบเจ็กต์ IntersectionObserver ที่รวมพารามิเตอร์ที่ระบุ และผนวกเข้ากับทุกอินสแตนซ์ของส่วนประกอบไทม์ไลน์
const observer = new IntersectionObserver(fadeInOnScroll, options);
timelineItems.forEach((item) => {
observer.observe(item);
});
ผลลัพธ์สุดท้ายควรมีลักษณะดังนี้:
เบราว์เซอร์ของคุณไม่รองรับแท็กวิดีโอ
แนวทางปฏิบัติที่ดีที่สุดขององค์ประกอบไทม์ไลน์
แนวปฏิบัติบางประการที่ต้องปฏิบัติตาม ได้แก่:
ปรับปรุงความสามารถในการปรับเปลี่ยนเค้าโครงของคุณโดยนำหลักการออกแบบที่ตอบสนองมาใช้ เปิดใช้งานประสบการณ์ผู้ใช้ที่สม่ำเสมอและไม่สะดุดบนหน้าจอและอุปกรณ์ต่างๆ ผ่านการพิจารณาอย่างรอบคอบเกี่ยวกับสัดส่วน ขนาด ตารางกริดที่ลื่นไหล รูปภาพ ข้อความค้นหาสื่อ และแนวทางที่เน้นอุปกรณ์เคลื่อนที่เป็นอันดับแรก
การใช้เทคนิคการเขียนโปรแกรมที่มีประสิทธิภาพถือเป็นสิ่งสำคัญในการรับประกันประสิทธิภาพแอนิเมชั่นที่ราบรื่น
ใช้องค์ประกอบ HTML ที่เหมาะสมทางความหมาย ตรวจสอบอัตราส่วนคอนทราสต์ที่เหมาะสมที่สุดระหว่างสีข้อความและพื้นหลัง และใช้แอตทริบิวต์ ARIA เพื่อปรับปรุงการเข้าถึงเนื้อหาเว็บโดยรวมของคุณ
ทำให้ไทม์ไลน์ของคุณมีชีวิต: การเดินทางในการออกแบบเว็บไซต์
การสร้างไทม์ไลน์เชิงโต้ตอบนั้นเหนือกว่าการนำเสนอข้อมูลเท่านั้น แต่เกี่ยวข้องกับการสร้างการเผชิญหน้าอันน่าหลงใหลและกระจ่างแจ้งแก่ผู้ชม การใช้สถาปัตยกรรม HTML, ศิลปะ CSS และเทคนิคแอนิเมชัน JavaScript ช่วยให้สามารถพัฒนาไทม์ไลน์ที่น่าดึงดูด ซึ่งไม่เพียงดึงดูดความสนใจของผู้ชมเท่านั้น แต่ยังถ่ายทอดข้อมูลที่สำคัญในลักษณะที่น่าดึงดูดอีกด้วย