เริ่มต้นใช้งานภาพเคลื่อนไหวแบบเลื่อนใน 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 ดูความหมายของไทม์ไลน์ใหม่เหล่านี้และวิธีที่ไทม์ไลน์แตกต่างกัน

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

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

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

ไทม์ไลน์ความคืบหน้ามุมมอง

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

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

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

นอกจากนี้ คุณยังลิงก์ภาพเคลื่อนไหวกับส่วนที่เฉพาะเจาะจงของไทม์ไลน์ความคืบหน้ามุมมองได้ด้วยการระบุช่วงที่ควรแนบ เช่น เฉพาะเมื่อเรื่องเข้าสู่ตัวเลื่อน ในภาพด้านล่างนี้ ความคืบหน้าจะเริ่มนับเพิ่มขึ้นจาก 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. ตอนนี้ให้แนบคีย์เฟรมเหล่านี้กับองค์ประกอบ body ดังนี้

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. ใช้วิวพอร์ตเอกสารเป็นคอนเทนเนอร์การเลื่อน
• self. ใช้องค์ประกอบนั้นๆ เป็นคอนเทนเนอร์การเลื่อน

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

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

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

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

src/styles.css

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

เนื่องจากตัวเลื่อนรากเป็นตัวเลื่อนระดับบนสุดที่ใกล้ที่สุดสำหรับองค์ประกอบ body ด้วย คุณจึงใช้ค่า 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 ในแอตทริบิวต์ style ของตัวเลื่อน ซึ่งช่วยให้แถบเลื่อนมีความกว้างที่แน่นอนเมื่อเริ่มต้นภาพเคลื่อนไหว ตัวอย่างเช่น หากมีองค์ประกอบ 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 เมื่อค้นหาตัวเลื่อนที่ใกล้ที่สุด องค์ประกอบจะพิจารณาเฉพาะองค์ประกอบที่อาจส่งผลต่อตำแหน่งขององค์ประกอบนั้น เนื่องจาก .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. ทำให้รูปภาพในแกลเลอรีเคลื่อนไหวเมื่อเข้าและออกจากวิวพอร์ตการเลื่อน

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

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

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

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

ใช้เครื่องมือที่ 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;
}

ทำให้รูปภาพในแกลเลอรีจางหายไป

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

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. ทำให้รูปภาพในแกลเลอรีเคลื่อนไหวเมื่อเข้าและออกจากวิวพอร์ตการเลื่อนโดยใช้คีย์เฟรมชุดเดียว

กรณีที่ใช้คีย์เฟรมชุดเดียว

คุณสามารถสร้างคีย์เฟรมชุดเดียวที่มีข้อมูลช่วงอยู่แล้วแทนที่จะแนบภาพเคลื่อนไหว 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)