ดูวิธีใช้งานไทม์ไลน์การเลื่อนและ "ดูไทม์ไลน์" เพื่อสร้างภาพเคลื่อนไหวแบบเลื่อนในลักษณะที่ชัดเจน
ภาพเคลื่อนไหวที่ใช้การเลื่อน
ภาพเคลื่อนไหวที่ใช้การเลื่อนเป็นรูปแบบ UX ทั่วไปบนเว็บ ภาพเคลื่อนไหวจากการเลื่อนจะลิงก์กับตำแหน่งการเลื่อนของคอนเทนเนอร์การเลื่อน ซึ่งหมายความว่าเมื่อคุณเลื่อนขึ้นหรือลง ภาพเคลื่อนไหวที่ลิงก์จะสครับไปข้างหน้าหรือข้างหลังในการตอบกลับโดยตรง เช่น เอฟเฟกต์ต่างๆ เช่น ภาพพื้นหลังแบบพารัลแลกซ์หรือสัญญาณบอกสถานะการอ่านซึ่งจะเคลื่อนไหวขณะที่คุณเลื่อนดู
ภาพเคลื่อนไหวประเภทเดียวกับที่ขับเคลื่อนด้วยการเลื่อนคือภาพเคลื่อนไหวที่ลิงก์กับตำแหน่งขององค์ประกอบภายในคอนเทนเนอร์การเลื่อน เช่น องค์ประกอบอาจค่อยๆ ปรากฏขึ้นมาในมุมมอง
วิธีดั้งเดิมในการได้รับเอฟเฟกต์ประเภทนี้คือการตอบกลับเหตุการณ์การเลื่อนในเทรดหลัก ซึ่งนําไปสู่ปัญหาหลัก 2 ประการดังนี้
- เบราว์เซอร์สมัยใหม่จะดำเนินการเลื่อนในกระบวนการที่แยกต่างหาก ดังนั้นจึงส่งเหตุการณ์การเลื่อนแบบไม่พร้อมกัน
- ภาพเคลื่อนไหวของเทรดหลักขึ้นอยู่กับความยุ่งยาก
จึงทำให้การสร้างภาพเคลื่อนไหวแบบเลื่อนที่มีประสิทธิภาพซึ่งซิงค์กับการเลื่อนหน้าเว็บไม่ได้หรือยากมาก
ใน Chrome เวอร์ชัน 115 มี API และแนวคิดชุดใหม่ที่คุณสามารถใช้เพื่อเปิดใช้ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนแบบประกาศข้อความได้ ซึ่งก็คือ "ไทม์ไลน์การเลื่อน" และ "ดูไทม์ไลน์"
แนวคิดใหม่นี้ผสานรวมกับ Web Animations API (WAAPI) และ CSS Animations API ที่มีอยู่ ซึ่งช่วยให้พวกเขาได้ประโยชน์จาก API ที่มีอยู่เหล่านี้ ซึ่งรวมถึงความสามารถในการทำให้ภาพเคลื่อนไหวที่ขับเคลื่อนโดยการเลื่อนทำงานนอกเทรดหลัก ใช่ อ่านให้ถูกวิธี ตอนนี้คุณจะได้ภาพเคลื่อนไหวที่ลื่นไหลไม่มีสะดุดซึ่งขับเคลื่อนด้วยการเลื่อนและทำงานผ่านเทรดหลัก โดยมีโค้ดเพิ่มเติมเพียงไม่กี่บรรทัด อะไรคือสิ่งที่ไม่ชอบ
ภาพเคลื่อนไหวในเว็บ สรุปสั้นๆ
ภาพเคลื่อนไหวในเว็บด้วย CSS
หากต้องการสร้างภาพเคลื่อนไหวใน CSS ให้กำหนดชุดของคีย์เฟรมโดยใช้กฎ @keyframes
ลิงก์โมเดลกับองค์ประกอบโดยใช้พร็อพเพอร์ตี้ animation-name
ขณะเดียวกันก็ตั้งค่า animation-duration
เพื่อกำหนดความยาวของภาพเคลื่อนไหวด้วย เรามีanimation-*
คุณสมบัติระยะยาวให้ใช้งานมากกว่า animation-easing-function
และ animation-fill-mode
เป็นเพียงตัวอย่างบางส่วนเท่านั้น ซึ่งทั้งหมดสามารถรวมกันเป็นanimation
ชวเลข
ลองดูตัวอย่างภาพเคลื่อนไหวที่ปรับขนาดองค์ประกอบบนแกน X พร้อมเปลี่ยนสีพื้นหลัง
@keyframes scale-up {
from {
background-color: red;
transform: scaleX(0);
}
to {
background-color: darkred;
transform: scaleX(1);
}
}
#progressbar {
animation: 2.5s linear forwards scale-up;
}
ภาพเคลื่อนไหวในเว็บโดยใช้ JavaScript
ใน JavaScript คุณใช้ Web Animations API เพื่อบรรลุเป้าหมายเดียวกันได้ ซึ่งทำได้โดยการสร้างอินสแตนซ์ Animation
และ KeyFrameEffect
ใหม่ หรือใช้ Element
animate()
เมธอดที่สั้นลงมาก
document.querySelector('#progressbar').animate(
{
backgroundColor: ['red', 'darkred'],
transform: ['scaleX(0)', 'scaleX(1)'],
},
{
duration: 2500,
fill: 'forwards',
easing: 'linear',
}
);
ผลการค้นหาภาพของข้อมูลโค้ด JavaScript ด้านบนนี้เหมือนกับ CSS เวอร์ชันก่อนหน้า
ไทม์ไลน์ของภาพเคลื่อนไหว
โดยค่าเริ่มต้น ภาพเคลื่อนไหวที่แนบกับองค์ประกอบจะทำงานบนไทม์ไลน์ของเอกสาร เวลาเริ่มต้นของหน้าแรกจะเริ่มที่ 0 เมื่อโหลดหน้าเว็บ และเริ่มเลื่อนไปข้างหน้าเมื่อเวลาของนาฬิกาเคลื่อนที่ไปเรื่อยๆ นี่เป็นไทม์ไลน์ภาพเคลื่อนไหวเริ่มต้นและก่อนหน้านี้เป็นเพียงไทม์ไลน์ภาพเคลื่อนไหวเดียวที่คุณเข้าถึงได้
ข้อกำหนดภาพเคลื่อนไหวจากการเลื่อนจะกำหนดไทม์ไลน์ประเภทใหม่ 2 ประเภทที่คุณใช้ได้ ดังนี้
- ไทม์ไลน์ความคืบหน้าของการเลื่อน: ไทม์ไลน์ที่ลิงก์กับตำแหน่งการเลื่อนของคอนเทนเนอร์การเลื่อนตามแกนที่เฉพาะเจาะจง
- ดูไทม์ไลน์ความคืบหน้า: ไทม์ไลน์ที่ลิงก์กับตำแหน่งสัมพัทธ์ขององค์ประกอบหนึ่งๆ ภายในคอนเทนเนอร์การเลื่อน
เลื่อนไทม์ไลน์ความคืบหน้า
ไทม์ไลน์ความคืบหน้าของการเลื่อนคือไทม์ไลน์ของภาพเคลื่อนไหวที่ลิงก์กับความคืบหน้าในตําแหน่งการเลื่อนของคอนเทนเนอร์การเลื่อน หรือที่เรียกว่า scrollport หรือ scroller ควบคู่ไปกับแกน จะแปลงตำแหน่งในช่วงการเลื่อนเป็นเปอร์เซ็นต์ของความคืบหน้า
ตำแหน่งการเลื่อนเริ่มต้นแสดงความคืบหน้า 0% และตำแหน่งการเลื่อนสิ้นสุดหมายถึงความคืบหน้า 100% จากการแสดงภาพต่อไปนี้ คุณจะเห็นว่ามีการนับความคืบหน้าจาก 0% เป็น 100% เมื่อเลื่อนตัวเลื่อนจากบนลงล่าง
✨ ทดลองใช้ด้วยตัวคุณเอง
ไทม์ไลน์ความคืบหน้าของการเลื่อนมักจะเรียกสั้นๆ ว่า "เลื่อนไทม์ไลน์"
ดูไทม์ไลน์ความคืบหน้า
ไทม์ไลน์ประเภทนี้จะลิงก์กับความคืบหน้าสัมพัทธ์ขององค์ประกอบหนึ่งๆ ภายในคอนเทนเนอร์การเลื่อน จะมีการติดตามออฟเซ็ตการเลื่อนของแถบเลื่อนเช่นเดียวกับไทม์ไลน์ของความคืบหน้าในการเลื่อน ซึ่งเป็นตำแหน่งสัมพัทธ์ของวัตถุภายในตัวเลื่อนนั้นซึ่งกำหนดความคืบหน้า ซึ่งต่างจากไทม์ไลน์ความคืบหน้าของการเลื่อน
ข้อมูลนี้ค่อนข้างเทียบได้กับวิธีการทำงานของ IntersectionObserver
ซึ่งติดตามได้ว่าองค์ประกอบหนึ่งๆ แสดงในแถบเลื่อนได้มากน้อยเพียงใด หากองค์ประกอบไม่ปรากฏในตัวเลื่อน แสดงว่าองค์ประกอบไม่ตัดกัน หากมองเห็นได้ภายในตัวเลื่อน แม้ว่าจะเป็นส่วนที่เล็กที่สุดก็ตาม นั่นก็จะตัดกันอยู่
ไทม์ไลน์ความคืบหน้าของการดูจะเริ่มต้นจากเวลาที่วัตถุเริ่มตัดกับแถบเลื่อนและสิ้นสุดเมื่อวัตถุหยุดตัดกับแถบเลื่อน จากการแสดงภาพต่อไปนี้ คุณจะเห็นว่าความคืบหน้าเริ่มนับขึ้นจาก 0% เมื่อวัตถุเข้าสู่คอนเทนเนอร์การเลื่อนและถึง 100% ทันทีที่วัตถุออกจากคอนเทนเนอร์การเลื่อน
✨ ทดลองใช้ด้วยตัวคุณเอง
ไทม์ไลน์ความคืบหน้าของการดูมักจะย่อสั้นๆ ว่า "ดูไทม์ไลน์" คุณสามารถกําหนดเป้าหมายส่วนที่เจาะจงของไทม์ไลน์การดูได้โดยอิงตามขนาดของวัตถุ แต่จะระบุเพิ่มเติมได้ในภายหลัง
ใช้ประโยชน์ได้จริงด้วยไทม์ไลน์ความคืบหน้าของการเลื่อน
การสร้างไทม์ไลน์ความคืบหน้าของการเลื่อนแบบไม่ระบุชื่อใน CSS
วิธีที่ง่ายที่สุดในการสร้างไทม์ไลน์การเลื่อนใน CSS คือการใช้ฟังก์ชัน scroll()
การดำเนินการนี้จะสร้างไทม์ไลน์การเลื่อนแบบไม่ระบุชื่อ ซึ่งคุณสามารถตั้งเป็นค่าสำหรับพร็อพเพอร์ตี้ animation-timeline
ใหม่ได้
ตัวอย่าง
@keyframes animate-it { … }
.subject {
animation: animate-it linear;
animation-timeline: scroll(root block);
}
ฟังก์ชัน scroll()
ยอมรับ <scroller>
และอาร์กิวเมนต์ <axis>
ค่าที่ยอมรับสำหรับอาร์กิวเมนต์ <scroller>
คือ
nearest
: ใช้คอนเทนเนอร์การเลื่อนระดับบนที่ใกล้ที่สุด (ค่าเริ่มต้น)root
: ใช้วิวพอร์ตของเอกสารเป็นคอนเทนเนอร์การเลื่อนself
: ใช้องค์ประกอบเป็นคอนเทนเนอร์การเลื่อน
ค่าที่ยอมรับสำหรับอาร์กิวเมนต์ <axis>
คือ
block
: ใช้การวัดความคืบหน้าตามแกนบล็อกของคอนเทนเนอร์การเลื่อน (ค่าเริ่มต้น)inline
: ใช้การวัดความคืบหน้าตามแกนในบรรทัดของคอนเทนเนอร์ที่เลื่อนy
: ใช้การวัดความคืบหน้าตามแกน Y ของคอนเทนเนอร์ที่เลื่อนx
: ใช้การวัดความคืบหน้าตามแกน x ของคอนเทนเนอร์การเลื่อน
ตัวอย่างเช่น หากต้องการเชื่อมโยงภาพเคลื่อนไหวกับแถบเลื่อนรูทบนแกนบล็อก ค่าที่จะส่งผ่านไปยัง scroll()
คือ root
และ block
เมื่อนำมารวมกันแล้ว ค่าคือ scroll(root block)
การสาธิต: สัญญาณบอกสถานะความคืบหน้าในการอ่าน
การสาธิตนี้มีสัญญาณบอกสถานะความคืบหน้าในการอ่านแก้ไขไว้ที่ด้านบนของวิวพอร์ต เมื่อคุณเลื่อนหน้าลง แถบความคืบหน้าจะขยายจนเต็มความกว้างของวิวพอร์ตเมื่ออ่านไปจนถึงส่วนท้ายของเอกสาร ไทม์ไลน์ความคืบหน้าของการเลื่อนแบบไม่ระบุชื่อจะใช้ในการขับเคลื่อนภาพเคลื่อนไหว
✨ ทดลองใช้ด้วยตัวคุณเอง
สัญญาณบอกสถานะความคืบหน้าในการอ่านจะอยู่ที่ด้านบนสุดของหน้าโดยใช้ตําแหน่งคงที่ เพื่อใช้ประโยชน์จากภาพเคลื่อนไหวแบบผสม ไม่ใช่ที่ width
กำลังเคลื่อนไหว แต่องค์ประกอบจะลดขนาดลงบนแกน x โดยใช้ transform
<body>
<div id="progress"></div>
…
</body>
@keyframes grow-progress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
#progress {
position: fixed;
left: 0; top: 0;
width: 100%; height: 1em;
background: red;
transform-origin: 0 50%;
animation: grow-progress auto linear;
animation-timeline: scroll();
}
ไทม์ไลน์สำหรับภาพเคลื่อนไหว grow-progress
ในองค์ประกอบ #progress
มีการตั้งค่าเป็นไทม์ไลน์แบบไม่ระบุตัวตนซึ่งสร้างขึ้นโดยใช้ scroll()
ไม่ได้กำหนดอาร์กิวเมนต์ให้กับ scroll()
ดังนั้นระบบจะกลับไปใช้ค่าเริ่มต้น
แถบเลื่อนเริ่มต้นที่จะติดตามคือ nearest
และแกนเริ่มต้นคือ block
ซึ่งจะกำหนดเป้าหมายแถบเลื่อนรูทได้อย่างมีประสิทธิภาพเนื่องจากเป็นแถบเลื่อนที่ใกล้ที่สุดขององค์ประกอบ #progress
ขณะติดตามทิศทางการบล็อก
การสร้างไทม์ไลน์ความคืบหน้าของการเลื่อนที่มีชื่อใน CSS
อีกวิธีหนึ่งในการกำหนดไทม์ไลน์ความคืบหน้าของการเลื่อนคือการใช้ชื่อที่ระบุ ถึงจะมีความละเอียดมากขึ้น แต่ก็มีประโยชน์เมื่อคุณไม่ได้กำหนดเป้าหมายที่ตัวเลื่อนหลักหรือตัวเลื่อนรูท หรือเมื่อหน้าเว็บใช้ไทม์ไลน์หลายไทม์ไลน์หรือเมื่อการค้นหาอัตโนมัติไม่ทำงาน วิธีนี้ช่วยให้คุณระบุไทม์ไลน์ความคืบหน้าของการเลื่อนได้ด้วยชื่อที่ตั้งไว้
หากต้องการสร้างไทม์ไลน์ความคืบหน้าในการเลื่อนที่มีชื่อในองค์ประกอบ ให้ตั้งค่าพร็อพเพอร์ตี้ CSS scroll-timeline-name
ในคอนเทนเนอร์การเลื่อนเป็นตัวระบุที่คุณชอบ ค่าต้องขึ้นต้นด้วย --
หากต้องการปรับเปลี่ยนแกนที่จะติดตาม ให้ประกาศพร็อพเพอร์ตี้ scroll-timeline-axis
ด้วย ค่าที่อนุญาตเหมือนกับอาร์กิวเมนต์ <axis>
ของ scroll()
สุดท้าย หากต้องการลิงก์ภาพเคลื่อนไหวกับไทม์ไลน์ความคืบหน้าของการเลื่อน ให้ตั้งค่าพร็อพเพอร์ตี้ animation-timeline
ในองค์ประกอบที่ต้องทำให้เคลื่อนไหวเป็นค่าเดียวกับตัวระบุที่ใช้สำหรับ scroll-timeline-name
ตัวอย่างโค้ด
@keyframes animate-it { … }
.scroller {
scroll-timeline-name: --my-scroller;
scroll-timeline-axis: inline;
}
.scroller .subject {
animation: animate-it linear;
animation-timeline: --my-scroller;
}
หากต้องการ คุณสามารถรวม scroll-timeline-name
และ scroll-timeline-axis
ในชวเลข scroll-timeline
เข้าด้วยกันได้ เช่น
scroll-timeline: --my-scroller inline;
การสาธิต: สัญญาณบอกสถานะขั้นตอนของภาพสไลด์แนวนอน
การสาธิตนี้มีตัวบ่งชี้ขั้นตอนที่แสดงเหนือภาพสไลด์แต่ละภาพ เมื่อภาพสไลด์มีภาพ 3 ภาพ แถบตัวบ่งชี้จะเริ่มที่ความกว้าง 33% เพื่อแสดงว่าคุณกำลังดูรูปภาพที่ 1 จาก 3 ภาพ เมื่อรูปภาพสุดท้ายอยู่ในมุมมองซึ่งกำหนดโดยแถบเลื่อนที่เลื่อนลงไปจนสุด ตัวบ่งชี้จะแสดงความกว้างเต็มของแถบเลื่อน ไทม์ไลน์ความคืบหน้าของการเลื่อนที่มีชื่อจะใช้ในการขับเคลื่อนภาพเคลื่อนไหว
✨ ทดลองใช้ด้วยตัวคุณเอง
มาร์กอัปฐานสำหรับแกลเลอรีคือ
<div class="gallery" style="--num-images: 2;">
<div class="gallery__scrollcontainer">
<div class="gallery__progress"></div>
<div class="gallery__entry">…</div>
<div class="gallery__entry">…</div>
</div>
</div>
องค์ประกอบ .gallery__progress
อยู่ในตำแหน่งที่แน่นอนภายในองค์ประกอบ Wrapper .gallery
ขนาดเริ่มต้นจะกำหนดโดยพร็อพเพอร์ตี้ที่กำหนดเอง --num-images
.gallery {
position: relative;
}
.gallery__progress {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1em;
transform: scaleX(calc(1 / var(--num-images)));
}
.gallery__scrollcontainer
จัดวางองค์ประกอบ .gallery__entry
ที่มีอยู่ในแนวนอนและเป็นองค์ประกอบที่เลื่อน การติดตามตำแหน่งการเลื่อนจะทำให้ .gallery__progress
เคลื่อนไหว ซึ่งทำได้โดยอ้างอิงถึงไทม์ไลน์ความคืบหน้าของการเลื่อนที่ชื่อว่า --gallery__scrollcontainer
@keyframes grow-progress {
to { transform: scaleX(1); }
}
.gallery__scrollcontainer {
overflow-x: scroll;
scroll-timeline: --gallery__scrollcontainer inline;
}
.gallery__progress {
animation: auto grow-progress linear forwards;
animation-timeline: --gallery__scrollcontainer;
}
การสร้างไทม์ไลน์ความคืบหน้าของการเลื่อนด้วย JavaScript
หากต้องการสร้างไทม์ไลน์แบบเลื่อนใน JavaScript ให้สร้างอินสแตนซ์ใหม่ของคลาส ScrollTimeline
ส่งบัตรทรัพย์สินที่มีsource
และaxis
ที่ต้องการติดตาม
source
: การอ้างอิงองค์ประกอบที่มีแถบเลื่อนที่คุณต้องการติดตาม ใช้document.documentElement
เพื่อกำหนดเป้าหมายแถบเลื่อนรูทaxis
: กำหนดแกนที่จะติดตาม ค่าที่ยอมรับคือblock
,inline
,x
และy
เช่นเดียวกับตัวแปร CSS
const tl = new ScrollTimeline({
source: document.documentElement,
});
หากต้องการแนบไปยังภาพเคลื่อนไหวในเว็บ ให้ส่งลิงก์เป็นพร็อพเพอร์ตี้ timeline
และละเว้น duration
(หากมี)
$el.animate({
opacity: [0, 1],
}, {
timeline: tl,
});
การสาธิต: สัญญาณบอกสถานะความคืบหน้าในการอ่าน ตรวจสอบแล้ว
หากต้องการสร้างตัวบ่งชี้ความคืบหน้าในการอ่านด้วย JavaScript อีกครั้ง ในขณะที่ใช้มาร์กอัปเดียวกัน ให้ใช้โค้ด JavaScript ต่อไปนี้:
const $progressbar = document.querySelector('#progress');
$progressbar.style.transformOrigin = '0% 50%';
$progressbar.animate(
{
transform: ['scaleX(0)', 'scaleX(1)'],
},
{
fill: 'forwards',
timeline: new ScrollTimeline({
source: document.documentElement,
}),
}
);
ผลการค้นหาที่มองเห็นจะเหมือนกับในเวอร์ชัน CSS โดย timeline
ที่สร้างขึ้นจะติดตามแถบเลื่อนรูทและปรับขนาด #progress
ขึ้นบนแกน x จาก 0% เป็น 100% เมื่อคุณเลื่อนหน้า
✨ ทดลองใช้ด้วยตัวคุณเอง
การนำไปใช้ได้จริงด้วย "ดูไทม์ไลน์ความคืบหน้า"
การสร้างไทม์ไลน์ความคืบหน้าของการดูโดยไม่ระบุชื่อใน CSS
หากต้องการสร้างไทม์ไลน์ความคืบหน้าในการดู ให้ใช้ฟังก์ชัน view()
อาร์กิวเมนต์ที่ยอมรับคือ <axis>
และ <view-timeline-inset>
<axis>
เหมือนกับจากไทม์ไลน์ความคืบหน้าของการเลื่อนและกําหนดแกนที่จะติดตาม ค่าเริ่มต้นคือblock
- เมื่อใช้
<view-timeline-inset>
คุณจะระบุออฟเซ็ต (เชิงบวกหรือเชิงลบ) เพื่อปรับขอบเขตเมื่อถือว่าองค์ประกอบอยู่ในมุมมองหรือไม่ ค่าต้องเป็นเปอร์เซ็นต์หรือauto
โดยมีauto
เป็นค่าเริ่มต้น
เช่น หากต้องการเชื่อมโยงภาพเคลื่อนไหวกับองค์ประกอบที่ตัดกับตัวเลื่อนขององค์ประกอบบนแกนบล็อก ให้ใช้ view(block)
เช่นเดียวกับ scroll()
ให้ตั้งค่านี้เป็นค่าสำหรับพร็อพเพอร์ตี้ animation-timeline
และอย่าลืมตั้งค่า animation-duration
เป็น auto
เมื่อใช้โค้ดต่อไปนี้ ทุก img
จะจางเข้ามาเมื่อข้ามวิวพอร์ตขณะที่คุณเลื่อน
@keyframes reveal {
from { opacity: 0; }
to { opacity: 1; }
}
img {
animation: reveal linear;
animation-timeline: view();
}
Intermezzo: ดูช่วงไทม์ไลน์
โดยค่าเริ่มต้น ภาพเคลื่อนไหวที่ลิงก์กับไทม์ไลน์ "ดูไทม์ไลน์" จะแนบอยู่กับช่วงไทม์ไลน์ทั้งหมด จะเริ่มเมื่อวัตถุกำลังจะเข้าสู่แถบเลื่อนและสิ้นสุดเมื่อวัตถุออกจากแถบเลื่อนไปแล้ว
นอกจากนี้ยังสามารถลิงก์กับส่วนใดส่วนหนึ่งของไทม์ไลน์การดูได้โดยระบุช่วงที่ควรแนบ เช่น กรณีนี้อาจทำได้เฉพาะเมื่อวัตถุกำลังเข้าสู่แถบเลื่อน ในการแสดงภาพต่อไปนี้ ความคืบหน้าจะเริ่มนับขึ้นจาก 0% เมื่อวัตถุเข้าสู่คอนเทนเนอร์การเลื่อน แต่ถึง 100% นับจากตอนที่วัตถุดังกล่าวบรรจบกันทั้งหมด
ช่วงไทม์ไลน์การดูที่คุณกําหนดเป้าหมายได้มีดังนี้
cover
: แสดงไทม์ไลน์ความคืบหน้าของการดูทั้งหมดentry
: แสดงช่วงที่ช่องรายการหลักป้อนช่วงระดับการมองเห็นความคืบหน้าของการดูexit
: แสดงช่วงที่ช่องรายการหลักกำลังออกจากช่วงระดับการมองเห็นความคืบหน้าในการดูentry-crossing
: แสดงช่วงที่ช่องรายการหลักพาดผ่านขอบเส้นขอบสิ้นสุดexit-crossing
: แสดงช่วงที่ช่องรายการหลักข้ามขอบของเส้นขอบเริ่มต้นcontain
: แสดงช่วงที่ช่องรายการหลักครอบคลุมทั้งหมดหรือครอบคลุมทั้งหมด ช่วงระดับการมองเห็นความคืบหน้าของการดูภายในแถบเลื่อน ขึ้นอยู่กับว่าวัตถุนั้นสูงหรือสั้นกว่าแถบเลื่อน
หากต้องการกำหนดช่วง คุณต้องตั้งค่าจุดเริ่มต้นและจุดสิ้นสุดของช่วง แต่ละรายการประกอบด้วยชื่อช่วง (ดูรายการด้านบน) และออฟเซ็ตของช่วงเพื่อกำหนดตำแหน่งภายในชื่อช่วงนั้น โดยทั่วไป ค่าชดเชยของช่วงจะเป็นเปอร์เซ็นต์ตั้งแต่ 0%
ถึง 100%
แต่คุณยังสามารถระบุความยาวคงที่ เช่น 20em
ได้
ตัวอย่างเช่น หากต้องการเรียกใช้ภาพเคลื่อนไหวทันทีที่วัตถุส่ง ให้เลือก entry 0%
เป็นจุดเริ่มต้นของช่วง หากต้องการให้ระบบเสร็จสิ้นภายในเวลาที่ป้อนวัตถุ ให้เลือก entry 100%
เป็นค่าสำหรับจุดสิ้นสุดของช่วง
ใน CSS ให้ตั้งค่านี้โดยใช้พร็อพเพอร์ตี้ animation-range
ตัวอย่าง
animation-range: entry 0% entry 100%;
ใน JavaScript ให้ใช้พร็อพเพอร์ตี้ rangeStart
และ rangeEnd
$el.animate(
keyframes,
{
timeline: tl,
rangeStart: 'entry 0%',
rangeEnd: 'entry 100%',
}
);
ใช้เครื่องมือที่ฝังไว้ด้านล่างเพื่อดูว่าชื่อช่วงแต่ละชื่อแสดงถึงอะไรและเปอร์เซ็นต์มีผลต่อตำแหน่งเริ่มต้นและสิ้นสุดอย่างไร ลองตั้งค่าจุดเริ่มต้นของช่วงเป็น entry 0%
และสิ้นสุดช่วงเป็น cover 50%
จากนั้นลากแถบเลื่อนเพื่อดูผลภาพเคลื่อนไหว
ดูเทปบันทึกภาพ
คุณอาจสังเกตเห็นว่าขณะลองใช้เครื่องมือดูช่วงไทม์ไลน์นี้ บางช่วงอาจได้รับการกำหนดเป้าหมายด้วยชุดค่าผสม 2 ชื่อที่แตกต่างกันสำหรับชื่อช่วง + ออฟเซ็ตของช่วง เช่น entry 0%
, entry-crossing 0%
และ cover 0%
ต่างกำหนดเป้าหมายพื้นที่เดียวกัน
เมื่อเป้าหมายเริ่มต้นของช่วงและจุดสิ้นสุดของช่วงเป็นชื่อของช่วงเดียวกันและครอบคลุมทั้งช่วงตั้งแต่ 0% ถึง 100% คุณสามารถลดค่าให้เหลือเพียงชื่อของช่วงได้ เช่น animation-range: entry 0% entry 100%;
อาจเขียนใหม่เป็น animation-range: entry
ที่สั้นลงมาก
สาธิต: การเปิดเผยรูปภาพ
การสาธิตนี้จะค่อยๆ จางหายไปในรูปภาพเมื่อเข้าสู่แถบเลื่อน โดยใช้ไทม์ไลน์การดูแบบไม่ระบุตัวตน ช่วงของภาพเคลื่อนไหวได้รับการปรับเปลี่ยนเพื่อให้รูปภาพแต่ละภาพทึบแสงเต็มที่เมื่อเลื่อนมาถึงครึ่งทาง
✨ ทดลองใช้ด้วยตัวคุณเอง
เอฟเฟกต์การขยายจะทำได้โดยใช้เส้นทางคลิปที่เป็นภาพเคลื่อนไหว CSS ที่ใช้สำหรับเอฟเฟกต์นี้คือ
@keyframes reveal {
from { opacity: 0; clip-path: inset(0% 60% 0% 50%); }
to { opacity: 1; clip-path: inset(0% 0% 0% 0%); }
}
.revealing-image {
animation: auto linear reveal both;
animation-timeline: view();
animation-range: entry 25% cover 50%;
}
การสร้างไทม์ไลน์ความคืบหน้าของการดูที่มีชื่อใน CSS
เช่นเดียวกับที่ไทม์ไลน์การเลื่อนตั้งชื่อเวอร์ชันได้ คุณสามารถสร้างชื่อ "ดูไทม์ไลน์" ได้ด้วย คุณใช้ตัวแปรที่นำหน้า view-timeline-
ได้แทนพร็อพเพอร์ตี้ scroll-timeline-*
ซึ่งได้แก่ view-timeline-name
และ view-timeline-axis
ระบบจะใช้ค่าประเภทเดียวกัน และใช้กฎเดียวกันสำหรับการค้นหาไทม์ไลน์ที่มีชื่อ
การสาธิต: เปิดเผยรูปภาพ, กลับไปดูอีกครั้ง
ทำการปรับปรุงการสาธิตการแสดงรูปภาพจากเวอร์ชันก่อนหน้านี้ โค้ดที่แก้ไขจะมีลักษณะดังนี้
.revealing-image {
view-timeline-name: --revealing-image;
view-timeline-axis: block;
animation: auto linear reveal both;
animation-timeline: --revealing-image;
animation-range: entry 25% cover 50%;
}
เมื่อใช้ view-timeline-name: revealing-image
องค์ประกอบจะได้รับการติดตามภายในแถบเลื่อนที่ใกล้ที่สุด จากนั้นจึงใช้ค่าเดียวกันนี้เป็นค่าของพร็อพเพอร์ตี้ animation-timeline
เอาต์พุตภาพจะเหมือนกับก่อนหน้านี้ทุกประการ
✨ ทดลองใช้ด้วยตัวคุณเอง
การสร้างไทม์ไลน์ความคืบหน้าของการดูใน JavaScript
หากต้องการสร้างไทม์ไลน์การดูใน JavaScript ให้สร้างอินสแตนซ์ใหม่ของคลาส ViewTimeline
ส่งผ่านกระเป๋าทรัพย์สินที่มีsubject
ที่คุณต้องการติดตาม, axis
และinset
subject
: การอ้างอิงถึงองค์ประกอบที่คุณต้องการติดตามภายในตัวเลื่อนขององค์ประกอบนั้นaxis
: แกนที่จะติดตาม ค่าที่ยอมรับคือblock
,inline
,x
และy
เช่นเดียวกับตัวแปร CSSinset
: การปรับ (เชิงบวก) หรือเริ่มต้น (เชิงลบ) ของแถบเลื่อนเมื่อพิจารณาว่าช่องอยู่ในมุมมองหรือไม่
const tl = new ViewTimeline({
subject: document.getElementById('subject'),
});
หากต้องการแนบไปยังภาพเคลื่อนไหวในเว็บ ให้ส่งลิงก์เป็นพร็อพเพอร์ตี้ timeline
และละเว้น duration
(หากมี) (ไม่บังคับ) ส่งข้อมูลช่วงโดยใช้พร็อพเพอร์ตี้ rangeStart
และ rangeEnd
$el.animate({
opacity: [0, 1],
}, {
timeline: tl,
rangeStart: 'entry 25%',
rangeEnd: 'cover 50%',
});
✨ ทดลองใช้ด้วยตัวคุณเอง
สิ่งอื่นๆ ที่น่าลอง
การแนบกับช่วงไทม์ไลน์ของมุมมองหลายช่วงโดยมีชุดคีย์เฟรม 1 ชุด
ลองมาดูการสาธิตรายการรายชื่อติดต่อนี้ ซึ่งจะมีการเปลี่ยนแปลงข้อมูลของรายชื่อเหล่านั้นเป็นภาพเคลื่อนไหว เมื่อเริ่มรายการจะเข้าสู่แถบเลื่อนจากด้านล่าง จะมีการเลื่อน+เฟดเข้ามา และเมื่อออกจากแถบเลื่อนที่ด้านบนจะเลื่อน+จางลง
✨ ทดลองใช้ด้วยตัวคุณเอง
ในการสาธิตนี้ องค์ประกอบแต่ละรายการจะตกแต่งด้วยไทม์ไลน์การดู 1 เส้น ซึ่งจะติดตามองค์ประกอบในขณะที่ข้ามแถบเลื่อนของตัวเอง แต่ก็มีภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อน 2 ภาพแนบอยู่ ภาพเคลื่อนไหว animate-in
แนบกับช่วง entry
ของไทม์ไลน์ และภาพเคลื่อนไหว animate-out
ในช่วง exit
ของไทม์ไลน์
@keyframes animate-in {
0% { opacity: 0; transform: translateY(100%); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes animate-out {
0% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-100%); }
}
#list-view li {
animation: animate-in linear forwards,
animate-out linear forwards;
animation-timeline: view();
animation-range: entry, exit;
}
แทนที่จะเรียกใช้ภาพเคลื่อนไหว 2 แบบซึ่งติดอยู่กับช่วงที่ต่างกัน 2 ช่วง คุณก็สร้างคีย์เฟรม 1 ชุดที่มีข้อมูลของช่วงอยู่แล้วได้
@keyframes animate-in-and-out {
entry 0% {
opacity: 0; transform: translateY(100%);
}
entry 100% {
opacity: 1; transform: translateY(0);
}
exit 0% {
opacity: 1; transform: translateY(0);
}
exit 100% {
opacity: 0; transform: translateY(-100%);
}
}
#list-view li {
animation: linear animate-in-and-out;
animation-timeline: view();
}
คุณไม่จำเป็นต้องระบุ animation-range
เนื่องจากคีย์เฟรมมีข้อมูลช่วงอยู่ ผลลัพธ์จะเหมือนกับก่อนหน้านี้ทุกประการ
✨ ทดลองใช้ด้วยตัวคุณเอง
การแนบกับไทม์ไลน์การเลื่อนที่ไม่ใช่ระดับบน
กลไกการค้นหาสำหรับไทม์ไลน์ของการเลื่อนชื่อและเส้นบอกเวลาการดูชื่อจะจำกัดไว้เพียงระดับบนในการเลื่อนเท่านั้น อย่างไรก็ตาม ในหลายๆ ครั้ง องค์ประกอบที่จำเป็นให้เป็นภาพเคลื่อนไหวจะไม่ใช่องค์ประกอบย่อยของแถบเลื่อนที่ต้องติดตาม
หากต้องการดำเนินการนี้ ให้ใช้พร็อพเพอร์ตี้ timeline-scope
คุณใช้พร็อพเพอร์ตี้นี้เพื่อประกาศไทม์ไลน์ที่มีชื่อนั้นโดยไม่ต้องสร้างจริง วิธีนี้จะช่วยให้ไทม์ไลน์ของชื่อมีขอบเขตที่กว้างขึ้น ในทางปฏิบัติ คุณจะใช้พร็อพเพอร์ตี้ timeline-scope
ในองค์ประกอบระดับบนสุดที่แชร์เพื่อให้ไทม์ไลน์ของแถบเลื่อนย่อยแนบไปกับองค์ประกอบนั้นได้
เช่น
.parent {
timeline-scope: --tl;
}
.parent .scroller {
scroll-timeline: --tl;
}
.parent .scroller ~ .subject {
animation: animate linear;
animation-timeline: --tl;
}
ในข้อมูลโค้ดนี้
- องค์ประกอบ
.parent
ประกาศไทม์ไลน์ที่ใช้ชื่อ--tl
หน่วยขององค์กรย่อยจะค้นหาและใช้ค่าดังกล่าวเป็นค่าสำหรับพร็อพเพอร์ตี้animation-timeline
ได้ - องค์ประกอบ
.scroller
ระบุไทม์ไลน์ของการเลื่อนโดยใช้ชื่อ--tl
โดยค่าเริ่มต้น เนื้อหาดังกล่าวจะปรากฏเฉพาะแก่บุตรหลาน แต่เนื่องจาก.parent
ตั้งค่าไว้เป็นscroll-timeline-root
จึงมีไฟล์แนบมากับตัว - องค์ประกอบ
.subject
ใช้ไทม์ไลน์--tl
มันเดินขึ้นไปบนต้นไม้ต้นตระกูลของมัน แล้วเจอ--tl
บน.parent
เมื่อ--tl
บน.parent
ชี้ไปยัง--tl
ของ.scroller
.subject
จะติดตามไทม์ไลน์ความคืบหน้าของการเลื่อนของ.scroller
เป็นหลัก
กล่าวอีกนัยหนึ่งคือ คุณสามารถใช้ timeline-root
เพื่อเลื่อนไทม์ไลน์ขึ้นไปที่ระดับบน (หรือที่เรียกว่าการยก) เพื่อให้รายการย่อยทั้งหมดของระดับบนเข้าถึงได้
คุณสามารถใช้พร็อพเพอร์ตี้ timeline-scope
กับทั้งไทม์ไลน์ในการเลื่อนและไทม์ไลน์การดู
การสาธิตและแหล่งข้อมูลเพิ่มเติม
การสาธิตทั้งหมดในบทความนี้เกี่ยวกับเว็บไซต์ขนาดเล็กที่ขับเคลื่อนด้วยการเลื่อน-ภาพเคลื่อนไหว.style เว็บไซต์นี้มีการสาธิตอื่นๆ อีกมากมายเพื่อเน้นสิ่งที่เป็นไปได้ด้วยภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อน
หนึ่งในเดโมเพิ่มเติมคือรายการปกอัลบั้มนี้ หน้าปกแต่ละฉบับจะหมุนในแบบ 3 มิติโดยใช้สปอตไลท์ตรงกลาง
✨ ทดลองใช้ด้วยตัวคุณเอง
หรือการสาธิตการ์ดกองซ้อนนี้ที่ใช้ประโยชน์จาก position: sticky
เมื่อกองไพ่ซ้อนกันแล้ว การ์ดที่ค้างอยู่แล้วจะลดขนาดลง ทำให้เกิดเอฟเฟกต์ความลึกที่ยอดเยี่ยม ในท้ายที่สุด ทั้งกองจะเลื่อนออกจากมุมมองเป็นกลุ่ม
✨ ทดลองใช้ด้วยตัวคุณเอง
นอกจากนี้ เรายังนำเสนอใน scroll-powered-animations.style เป็นคอลเล็กชันเครื่องมือ เช่น การแสดงภาพความคืบหน้าของช่วงไทม์ไลน์ในการแสดงผล ซึ่งรวมอยู่ในที่ก่อนหน้านี้ของโพสต์นี้
นอกจากนี้ ยังมีเนื้อหาอื่นๆ ที่ขับเคลื่อนด้วยการเลื่อนได้ในมีอะไรใหม่ใน Web Animations ที่งาน Google I/O ปี 2023