เริ่มต้นใช้งานภาพเคลื่อนไหวแบบเลื่อนใน CSS

1. ก่อนเริ่มต้น

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

ฟีเจอร์ใหม่ใน Chrome 115 คือการรองรับชุดคลาส JavaScript และพร็อพเพอร์ตี้ CSS ที่ช่วยให้คุณสร้างภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนแบบประกาศได้ง่ายๆ API ใหม่เหล่านี้ทำงานร่วมกับ API ของ Web Animations และ CSS Animations ที่มีอยู่

Codelab นี้จะสอนวิธีสร้างภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนโดยใช้ CSS การทำ Codelab นี้จะช่วยให้คุณคุ้นเคยกับพร็อพเพอร์ตี้ CSS ใหม่ๆ มากมายที่ฟีเจอร์ที่น่าตื่นเต้นนี้เปิดตัว เช่น scroll-timeline, view-timeline, animation-timeline และ animation-range

หมายเหตุ: Codelab นี้จะไม่ครอบคลุม JavaScript ที่เทียบเท่าซึ่งระบุไว้ในข้อกำหนดภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อน

สิ่งที่คุณจะได้เรียนรู้

• วิธีสร้างเอฟเฟกต์พื้นหลังแบบพารัลแลกซ์ด้วยไทม์ไลน์การเลื่อนใน CSS
• วิธีสร้างแถบความคืบหน้าด้วยไทม์ไลน์การเลื่อนใน CSS
• วิธีสร้างเอฟเฟกต์การเปิดเผยรูปภาพด้วยไทม์ไลน์มุมมองใน CSS
• วิธีกำหนดเป้าหมายช่วงเวลาประเภทต่างๆ ของไทม์ไลน์การดูใน CSS

สิ่งที่คุณต้องมี

ชุดค่าผสมของอุปกรณ์อย่างใดอย่างหนึ่งต่อไปนี้

• Chrome เวอร์ชันล่าสุด (115 ขึ้นไป) ใน ChromeOS, macOS หรือ Windows ที่ตั้งค่าสถานะ "ฟีเจอร์แพลตฟอร์มเว็บเวอร์ชันทดลอง" เป็นเปิดใช้
• ความเข้าใจพื้นฐานเกี่ยวกับ HTML
• ความเข้าใจพื้นฐานเกี่ยวกับ CSS โดยเฉพาะภาพเคลื่อนไหวใน CSS

2. ตั้งค่า

ทุกสิ่งที่คุณต้องการสำหรับโปรเจ็กต์นี้มีอยู่ในที่เก็บ GitHub หากต้องการเริ่มต้นใช้งาน ให้โคลนโค้ดแล้วเปิดในสภาพแวดล้อมการพัฒนาที่คุณชื่นชอบ

1. เปิดแท็บใหม่ในเบราว์เซอร์ แล้วไปที่ https://github.com/googlechromelabs/io23-scroll-driven-animations-codelab
2. โคลนที่เก็บ
3. เปิดโค้ดใน IDE ที่ต้องการ
4. เรียกใช้ npm install เพื่อติดตั้งการอ้างอิง
5. เรียกใช้ npm start แล้วไปที่ http://localhost:3000/
6. หรือหากไม่ได้ติดตั้ง npm ให้เปิดไฟล์ src/index.html ใน Chrome

3. ดูข้อมูลเกี่ยวกับไทม์ไลน์ภาพเคลื่อนไหว

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

ภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนจะช่วยให้คุณเข้าถึงไทม์ไลน์ 2 ประเภทใหม่ ได้แก่

• เลื่อนไทม์ไลน์ความคืบหน้า
• ดูไทม์ไลน์ความคืบหน้า

ใน CSS คุณสามารถแนบลำดับเวลาเหล่านี้เข้ากับการเคลื่อนไหวได้โดยใช้พร็อพเพอร์ตี้ animation-timeline มาดูกันว่าไทม์ไลน์ใหม่เหล่านี้มีความหมายอย่างไรและแตกต่างกันอย่างไร

เลื่อนไทม์ไลน์ความคืบหน้า

ไทม์ไลน์ความคืบหน้าในการเลื่อนคือไทม์ไลน์ภาพเคลื่อนไหวที่ลิงก์กับความคืบหน้าในตำแหน่งการเลื่อนของคอนเทนเนอร์ที่เลื่อนได้ ซึ่งเรียกอีกอย่างว่า Scrollport หรือ Scroller ตามแกนใดแกนหนึ่ง โดยจะแปลงตำแหน่งในช่วงการเลื่อนเป็นเปอร์เซ็นต์ของความคืบหน้าตามไทม์ไลน์

ตำแหน่งการเลื่อนเริ่มต้นแสดงถึงความคืบหน้า 0% และตำแหน่งการเลื่อนสิ้นสุดแสดงถึงความคืบหน้า 100% ในภาพต่อไปนี้ โปรดสังเกตว่าความคืบหน้าจะเพิ่มขึ้นจาก 0% เป็น 100% เมื่อคุณเลื่อนแถบเลื่อนลง

ดูไทม์ไลน์ความคืบหน้า

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

ไทม์ไลน์ความคืบหน้าในการดูจะเริ่มตั้งแต่ช่วงเวลาที่วัตถุเริ่มตัดกับแถบเลื่อนและสิ้นสุดเมื่อวัตถุหยุดตัดกับแถบเลื่อน ในภาพต่อไปนี้ โปรดทราบว่าความคืบหน้าจะเริ่มนับจาก 0% เมื่อออบเจ็กต์เข้าสู่คอนเทนเนอร์เลื่อน และจะถึง 100% เมื่อออบเจ็กต์ออกจากคอนเทนเนอร์เลื่อน

โดยค่าเริ่มต้น ภาพเคลื่อนไหวที่ลิงก์กับไทม์ไลน์ความคืบหน้าของมุมมองจะแนบกับช่วงทั้งหมดของไทม์ไลน์ โดยจะเริ่มตั้งแต่ตอนที่วัตถุเข้าสู่ Scrollport และสิ้นสุดเมื่อวัตถุออกจาก Scrollport

นอกจากนี้ คุณยังลิงก์ไปยังส่วนที่เฉพาะเจาะจงของไทม์ไลน์ความคืบหน้าในการดูได้ด้วยการระบุช่วงที่ควรแนบ เช่น เมื่อวัตถุเข้าสู่แถบเลื่อนเท่านั้น ในภาพด้านล่าง ความคืบหน้าจะเริ่มนับจาก 0% เมื่อวัตถุเข้าสู่คอนเทนเนอร์เลื่อน แต่จะไปถึง 100% ตั้งแต่ช่วงเวลาที่วัตถุตัดกันทั้งหมด

ช่วงเวลาดูไทม์ไลน์ที่คุณกำหนดเป้าหมายได้คือ cover, contain, entry, exit, entry-crossing และ exit-crossing ช่วงเหล่านี้จะอธิบายในภายหลังใน Codelab นี้ แต่หากคุณรอไม่ไหวที่จะทราบ ให้ใช้เครื่องมือที่ https://goo.gle/view-timeline-range-tool เพื่อดูว่าแต่ละช่วงแสดงถึงอะไร

4. สร้างเอฟเฟกต์พื้นหลังแบบพารัลแลกซ์

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

หากต้องการใช้ฟีเจอร์นี้ คุณต้องทำตาม 2 ขั้นตอนต่อไปนี้

1. สร้างภาพเคลื่อนไหวที่ย้ายตำแหน่งของภาพพื้นหลัง
2. ลิงก์ภาพเคลื่อนไหวกับความคืบหน้าในการเลื่อนของเอกสาร

สร้างภาพเคลื่อนไหว

1. หากต้องการสร้างภาพเคลื่อนไหว ให้ใช้ชุดคีย์เฟรมปกติ ในนั้น ให้ย้ายตำแหน่งพื้นหลังจาก 0% ในแนวตั้งเป็น 100% ดังนี้

src/styles.css

@keyframes move-background {
  from {
    background-position: 50% 0%;
  }
  to {
    background-position: 50% 100%;
  }
}

2. ตอนนี้ให้แนบคีย์เฟรมเหล่านี้กับองค์ประกอบเนื้อหา

src/styles.css

body {
  animation: 1s linear move-background;
}

โค้ดนี้จะเพิ่มภาพเคลื่อนไหว move-background ลงในองค์ประกอบ body พร็อพเพอร์ตี้ animation-duration ตั้งค่าเป็น 1 วินาที และใช้การเปลี่ยนภาพ linear

หมายเหตุ: หากบันทึกไฟล์ CSS และตรวจสอบเว็บไซต์ในเบราว์เซอร์ คุณจะเห็นพื้นหลังเคลื่อนไหวเมื่อหน้าเว็บโหลด ซึ่งเป็นเรื่องปกติเนื่องจากคุณยังไม่ได้แนบไทม์ไลน์การเลื่อนกับวิดีโอ ภาพเคลื่อนไหวจะทำงานในไทม์ไลน์ของเอกสารเริ่มต้น

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

วิธีที่ง่ายที่สุดในการสร้างไทม์ไลน์ความคืบหน้าในการเลื่อนคือการใช้ฟังก์ชัน scroll() ซึ่งจะสร้างไทม์ไลน์ความคืบหน้าในการเลื่อนแบบไม่ระบุตัวตนที่คุณตั้งเป็นค่าสำหรับพร็อพเพอร์ตี้ animation-timeline ได้

ฟังก์ชัน scroll() รับอาร์กิวเมนต์ <scroller> และ <axis>

ค่าที่ยอมรับสำหรับอาร์กิวเมนต์ <scroller> มีดังนี้

• nearest. ใช้คอนเทนเนอร์เลื่อนระดับบนสุดที่ใกล้ที่สุด (ค่าเริ่มต้น)
• root. ใช้ Viewport ของเอกสารเป็นคอนเทนเนอร์เลื่อน
• self ใช้องค์ประกอบนั้นๆ เป็นคอนเทนเนอร์เลื่อน

ค่าที่ยอมรับสำหรับอาร์กิวเมนต์ <axis> มีดังนี้

• block ใช้การวัดความคืบหน้าตามแกนบล็อกของคอนเทนเนอร์เลื่อน (ค่าเริ่มต้น)
• inline ใช้การวัดความคืบหน้าตามแกนในของคอนเทนเนอร์เลื่อน
• y ใช้การวัดความคืบหน้าตามแกน Y ของคอนเทนเนอร์เลื่อน
• x ใช้การวัดความคืบหน้าตามแกน x ของคอนเทนเนอร์เลื่อน

หากต้องการลิงก์ภาพเคลื่อนไหวกับตัวเลื่อนรูทในแกนบล็อก ค่าที่จะส่งไปยัง scroll() คือ root และ block เมื่อรวมกันแล้ว ค่าคือ scroll(root block)

• ตั้งค่า scroll(root block) เป็นค่าสำหรับพร็อพเพอร์ตี้ animation-timeline ในเนื้อหา
• นอกจากนี้ เนื่องจาก animation-duration ที่แสดงเป็นวินาทีไม่มีความหมาย ให้ตั้งค่าระยะเวลาเป็น auto หากไม่ได้ระบุ animation-duration ค่าเริ่มต้นจะเป็น auto

src/styles.css

body {
  animation: linear move-background;
  animation-duration: auto;
  animation-timeline: scroll(root block);
}

เนื่องจากตัวเลื่อนรูทเป็นตัวเลื่อนระดับบนที่ใกล้ที่สุดสำหรับองค์ประกอบเนื้อหา คุณจึงใช้ค่า nearest ได้ด้วย

src/styles.css

body {
  animation: linear move-background;
  animation-duration: auto;
  animation-timeline: scroll(nearest block);
}

เนื่องจาก nearest และ block เป็นค่าเริ่มต้น คุณจึงเลือกที่จะละเว้นได้ ในกรณีนี้ คุณสามารถลดความซับซ้อนของโค้ดได้ดังนี้

src/styles.css

body {
  animation: linear move-background;
  animation-duration: auto;
  animation-timeline: scroll();
}

ยืนยันการเปลี่ยนแปลง

หากทุกอย่างเป็นไปด้วยดี คุณควรเห็นสิ่งต่อไปนี้

หากยังไม่ได้ติดตั้ง โปรดดูสาขา solution-step-1 ของโค้ด

5. สร้างแถบความคืบหน้าสำหรับแกลเลอรีรูปภาพ

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

มาร์กอัปสำหรับภาพหมุนจะมีลักษณะดังนี้

src/index.html

<div class="gallery">
  <div class="gallery__scrollcontainer" style="--num-images: 3;">
    <div class="gallery__progress"></div>
    <div class="gallery__entry">
      ...
    </div>
    <div class="gallery__entry">
      ...
    </div>
    <div class="gallery__entry">
      ...
    </div>
  </div>
</div>

คีย์เฟรมสำหรับแถบความคืบหน้าพร้อมใช้งานแล้วและมีลักษณะดังนี้

src/styles.css

@keyframes adjust-progress {
  from {
    transform: scaleX(calc(1 / var(--num-images)));
  }
  to {
    transform: scaleX(1);
  }
}

หมายเหตุ: ชุดคีย์เฟรมนี้มีscaleX()เริ่มต้นซึ่งอิงตามจำนวนองค์ประกอบ .gallery__entry ที่ .gallery__scrollcontainer มี ซึ่งระบุโดย--num-childrenพร็อพเพอร์ตี้ที่กำหนดเองในแอตทริบิวต์รูปแบบของแถบเลื่อน ซึ่งจะช่วยให้แถบเลื่อนมีความกว้างที่แน่นอนเมื่อเริ่มภาพเคลื่อนไหว เช่น หากมีองค์ประกอบ 4 รายการในคอนเทนเนอร์เลื่อน ความกว้างเริ่มต้นของแถบความคืบหน้าควรเป็น 25% ดังที่เห็นในรูปภาพ 1 จาก 4

คุณต้องแนบภาพเคลื่อนไหวนี้กับองค์ประกอบ gallery__progress ที่มีไทม์ไลน์ความคืบหน้าในการเลื่อน ดังที่แสดงในขั้นตอนก่อนหน้า คุณสามารถทำได้โดยสร้างไทม์ไลน์ความคืบหน้าในการเลื่อนแบบไม่ระบุตัวตนด้วยฟังก์ชัน scroll()

src/styles.css

.gallery__progress {
  animation: linear adjust-progress;
  animation-duration: auto;
  animation-timeline: scroll(nearest inline);
}

แม้ว่าโค้ดส่วนนี้อาจดูเหมือนจะใช้งานได้ แต่ก็ใช้ไม่ได้เนื่องจากลักษณะการทำงานของการค้นหาคอนเทนเนอร์เลื่อนอัตโนมัติโดยใช้ nearest เมื่อค้นหา Scroller ที่ใกล้ที่สุด องค์ประกอบจะพิจารณาเฉพาะองค์ประกอบที่อาจส่งผลต่อตำแหน่งขององค์ประกอบนั้น เนื่องจาก .gallery__progress มีการกำหนดตำแหน่งแบบสัมบูรณ์ องค์ประกอบระดับบนแรกที่จะกำหนดตำแหน่งขององค์ประกอบนี้คือองค์ประกอบ .gallery เนื่องจากมีการใช้ position: relative ซึ่งหมายความว่าระบบจะไม่พิจารณาองค์ประกอบ .gallery__scrollcontainer ซึ่งเป็นตัวเลื่อนที่ต้องกำหนดเป้าหมายเลยในระหว่างการค้นหาอัตโนมัตินี้

หากต้องการหลีกเลี่ยงปัญหานี้ ให้สร้างไทม์ไลน์ความคืบหน้าในการเลื่อนที่มีชื่อในองค์ประกอบ .gallery__scrollcontainer และลิงก์ .gallery__progress กับไทม์ไลน์ดังกล่าวโดยใช้ชื่อนั้น

สร้างและลิงก์ไทม์ไลน์ความคืบหน้าในการเลื่อนที่มีชื่อ

หากต้องการสร้างไทม์ไลน์ความคืบหน้าในการเลื่อนที่มีชื่อในองค์ประกอบ ให้ตั้งค่าพร็อพเพอร์ตี้ CSS scroll-timeline-name ในคอนเทนเนอร์การเลื่อนเป็นค่าที่คุณต้องการ ค่าต้องขึ้นต้นด้วย --

เนื่องจากแกลเลอรีเลื่อนในแนวนอน คุณจึงต้องตั้งค่าพร็อพเพอร์ตี้ scroll-timeline-axis ด้วย ค่าที่อนุญาตจะเหมือนกับอาร์กิวเมนต์ <axis> ของ scroll()

สุดท้าย หากต้องการลิงก์ภาพเคลื่อนไหวกับไทม์ไลน์ความคืบหน้าในการเลื่อน ให้ตั้งค่าพร็อพเพอร์ตี้ animation-timeline ในองค์ประกอบที่ต้องเคลื่อนไหวให้มีค่าเดียวกับตัวระบุที่ใช้สำหรับ scroll-timeline-name

• เปลี่ยนไฟล์ styles.css ให้มีค่าต่อไปนี้

src/styles.css

.gallery__scrollcontainer {
  /* Create the gallery-is-scrolling timeline */
  scroll-timeline-name: --gallery-is-scrolling;
  scroll-timeline-axis: inline;
}

.gallery__progress {
  animation: linear adjust-progress;
  animation-duration: auto;
  /* Set gallery-is-scrolling as the timeline */
  animation-timeline: --gallery-is-scrolling;
}

ยืนยันการเปลี่ยนแปลง

หากทุกอย่างเป็นไปด้วยดี คุณควรเห็นสิ่งต่อไปนี้

หากยังไม่ได้ติดตั้ง โปรดดูสาขา solution-step-2 ของโค้ด

6. ทำให้อิมเมจในแกลเลอรีเคลื่อนไหวขณะเข้าและออกจาก Scrollport

จางรูปภาพในแกลเลอรี

ตั้งค่าไทม์ไลน์ความคืบหน้าในการดูแบบไม่ระบุชื่อ

เอฟเฟกต์ที่ควรเพิ่มคือการค่อยๆ แสดงรูปภาพในแกลเลอรีเมื่อรูปภาพปรากฏในมุมมอง คุณสามารถใช้ไทม์ไลน์ความคืบหน้าในการดูเพื่อดำเนินการนี้

หากต้องการสร้างไทม์ไลน์ความคืบหน้าในการดู ให้ใช้ฟังก์ชัน view() อาร์กิวเมนต์ที่ยอมรับคือ <axis> และ <view-timeline-inset>

• <axis> เหมือนกับจากไทม์ไลน์ความคืบหน้าในการเลื่อน และกำหนดแกนที่จะติดตาม
• <view-timeline-inset> ช่วยให้คุณระบุออฟเซ็ต (บวกหรือลบ) เพื่อปรับขอบเขตเมื่อระบบพิจารณาว่าองค์ประกอบอยู่ในหรือไม่อยู่ในมุมมอง

หมายเหตุ: ไม่สามารถระบุ <scroller> ของไทม์ไลน์การดูได้ เนื่องจากไทม์ไลน์จะติดตามออบเจ็กต์ภายในองค์ประกอบเลื่อนระดับบนสุดที่ใกล้ที่สุดเสมอ

• คีย์เฟรมจะอยู่ในตำแหน่งที่ถูกต้องอยู่แล้ว คุณจึงเพียงแค่แนบคีย์เฟรม โดยสร้างไทม์ไลน์ความคืบหน้าของมุมมองในองค์ประกอบ .gallery__entry แต่ละรายการ

src/styles.css

@keyframes animate-in {
  from {
    opacity: 0;
    clip-path: inset(50% 0% 50% 0%);
  }
  to {
    opacity: 1;
    clip-path: inset(0% 0% 0% 0%);
  }
}

.gallery__entry {
  animation: linear animate-in;
  animation-duration: auto;
  animation-timeline: view(inline);
}

หมายเหตุ: การใช้ view() จะเป็นการสร้างไทม์ไลน์ความคืบหน้าในการดูแบบไม่ระบุตัวตน คุณสามารถสร้างไทม์ไลน์ความคืบหน้าในการดูที่มีชื่อได้โดยใช้พร็อพเพอร์ตี้เฉพาะสำหรับไทม์ไลน์ดังกล่าว ซึ่งคล้ายกับการสร้างไทม์ไลน์ความคืบหน้าในการเลื่อนที่มีชื่อ พร็อพเพอร์ตี้คือ view-timeline-name และ view-timeline-axis ซึ่งทำงานคล้ายกับscroll-timeline-*

จำกัดช่วงของไทม์ไลน์ความคืบหน้าในการดู

หากบันทึก CSS และโหลดหน้าเว็บ คุณจะเห็นองค์ประกอบค่อยๆ ปรากฏขึ้น แต่ดูเหมือนว่าจะมีบางอย่างผิดปกติ องค์ประกอบจะเริ่มที่ความทึบ 0 เมื่ออยู่นอกมุมมองโดยสมบูรณ์ และจะสิ้นสุดที่ความทึบ 1 เมื่อออกจากมุมมองโดยสมบูรณ์

เนื่องจากช่วงเริ่มต้นสำหรับไทม์ไลน์ความคืบหน้าในการดูคือช่วงทั้งหมด ซึ่งเรียกว่าcoverช่วง

1. หากต้องการกำหนดเป้าหมายเฉพาะช่วง entry ของออบเจ็กต์ ให้ใช้พร็อพเพอร์ตี้ CSS animation-range เพื่อจำกัดเวลาที่ควรเรียกใช้ภาพเคลื่อนไหว

src/styles.css

.gallery__entry {
  animation: linear fade-in;
  animation-duration: auto;
  animation-timeline: view(inline);
  animation-range: entry 0% entry 100%;
}

ตอนนี้ภาพเคลื่อนไหวจะทำงานจาก entry 0% (วัตถุกำลังจะเข้าสู่แถบเลื่อน) ไปยัง entry 100% (วัตถุเข้าสู่แถบเลื่อนอย่างเต็มรูปแบบ)

ช่วงไทม์ไลน์ของมุมมองที่เป็นไปได้มีดังต่อไปนี้

• cover แสดงช่วงทั้งหมดของไทม์ไลน์ความคืบหน้าในการดู
• entry แสดงช่วงที่กล่องหลักเข้าสู่ช่วงระดับการมองเห็นความคืบหน้าในการดู
• exit แสดงช่วงที่กล่องหลักกำลังออกจากช่วงการมองเห็นความคืบหน้าในการดู
• entry-crossing แสดงช่วงเวลาที่กรอบหลักข้ามขอบเขตสิ้นสุด
• exit-crossing. แสดงช่วงเวลาที่กรอบหลักข้ามขอบเขตเริ่มต้น
• contain แสดงช่วงที่กล่องหลักมีขอบเขตครอบคลุมทั้งหมด หรือครอบคลุมทั้งหมดในช่วงการมองเห็นความคืบหน้าในการดูภายใน Scrollport ซึ่งขึ้นอยู่กับว่าวัตถุสูงกว่าหรือต่ำกว่าแถบเลื่อน

ใช้เครื่องมือที่ https://goo.gle/view-timeline-range-tool เพื่อดูว่าแต่ละช่วงหมายถึงอะไรและเปอร์เซ็นต์ส่งผลต่อตำแหน่งเริ่มต้นและสิ้นสุดอย่างไร

หมายเหตุ: คุณกำหนดเป้าหมายช่วงต่างๆ สำหรับanimation-rangeเริ่มต้นและสิ้นสุดได้

2. เนื่องจากช่วงเริ่มต้นและช่วงสิ้นสุดที่นี่เหมือนกันและใช้ค่าออฟเซ็ตเริ่มต้น ให้ลดความซับซ้อนของ animation-range เป็นชื่อช่วงภาพเคลื่อนไหวเดียว ดังนี้

src/styles.css

.gallery__entry {
  animation: linear animate-in;
  animation-duration: auto;
  animation-timeline: view(inline);
  animation-range: entry;
}

จางรูปภาพในแกลเลอรี

• หากต้องการทำให้รูปภาพจางลงเมื่อออกจากแถบเลื่อน คุณสามารถทำเช่นเดียวกับภาพเคลื่อนไหว animate-in แต่กำหนดเป้าหมายเป็นช่วงอื่น

src/styles.css

@keyframes animate-out {
  from {
    opacity: 1;
    clip-path: inset(0% 0% 0% 0%);
  }
  to {
    opacity: 0;
    clip-path: inset(50% 0% 50% 0%);
  }
}

.gallery__entry {
  animation: linear animate-in, linear animate-out;
  animation-duration: auto;
  animation-timeline: view(inline);
  animation-range: entry, exit;
}

ระบบจะใช้คีย์เฟรม animate-in กับช่วง entry และคีย์เฟรม animate-out กับช่วง exit

ยืนยันการเปลี่ยนแปลง

หากทุกอย่างเป็นไปด้วยดี คุณควรเห็นสิ่งต่อไปนี้

หากยังไม่ได้ติดตั้ง โปรดดูสาขา solution-step-3 ของโค้ด

7. ทำภาพเคลื่อนไหวของรูปภาพในแกลเลอรีขณะที่เข้าและออกจาก Scrollport โดยใช้คีย์เฟรมชุดเดียว

กรณีของชุดคีย์เฟรมชุดเดียว

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

รูปร่างของคีย์เฟรมมีลักษณะดังนี้

@keyframes keyframes-name {
  range-name range-offset {
    ...
  }
  range-name range-offset {
    ...
  }
}

1. รวมคีย์เฟรมการจางเข้าและจางออกดังนี้

src/styles.css

@keyframes animate-in-and-out {
  entry 0% {
    opacity: 0;
    clip-path: inset(50% 0% 50% 0%);
  }
  entry 90% {
    opacity: 1;
    clip-path: inset(0% 0% 0% 0%);
  }

  exit 10% {
    opacity: 1;
    clip-path: inset(0% 0% 0% 0%);
  }
  exit 100% {
    opacity: 0;
    clip-path: inset(50% 0% 50% 0%);
  }
}

2. เมื่อมีข้อมูลช่วงในคีย์เฟรม คุณไม่จำเป็นต้องระบุ animation-range แยกกันอีกต่อไป แนบคีย์เฟรมเป็นพร็อพเพอร์ตี้ animation

src/styles.css

.gallery__entry {
  animation: linear animate-in-and-out both;
  animation-duration: auto;
  animation-timeline: view(inline);
}

ยืนยันการเปลี่ยนแปลง

หากทุกอย่างเป็นไปด้วยดี คุณควรได้รับผลลัพธ์เช่นเดียวกับขั้นตอนก่อนหน้า หากยังไม่ได้ติดตั้ง โปรดดูสาขา solution-step-4 ของโค้ด

8. ยินดีด้วย

คุณทำ Codelab นี้เสร็จแล้ว และตอนนี้ก็ทราบวิธีสร้างไทม์ไลน์ความคืบหน้าในการเลื่อนและไทม์ไลน์ความคืบหน้าของมุมมองใน CSS แล้ว

ดูข้อมูลเพิ่มเติม

แหล่งข้อมูล

• ทำให้องค์ประกอบเคลื่อนไหวเมื่อเลื่อนด้วยภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อน
• ดูเครื่องมือแสดงภาพช่วงไทม์ไลน์
• มีอะไรใหม่ใน Web Animations (Google I/O ‘23)