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

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

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

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

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

หมายเหตุ: โค้ดแล็บนี้ไม่ครอบคลุมถึงคู่หู JavaScript ที่ระบุไว้ในข้อกำหนดภาพเคลื่อนไหวที่ทำงานด้วยการเลื่อน

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

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

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

อุปกรณ์ต่อไปนี้ต้องทำงานร่วมกัน

• Chrome เวอร์ชันล่าสุด (115 ขึ้นไป) ใน ChromeOS, macOS หรือ Windows โดยตั้งค่า Flag "ฟีเจอร์แพลตฟอร์มเว็บเวอร์ชันทดลอง" เป็นเปิดใช้
• ความเข้าใจพื้นฐานเกี่ยวกับ 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% เมื่อออกจากคอนเทนเนอร์การเลื่อน

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

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

ช่วงไทม์ไลน์ของมุมมองที่เป็นไปได้ซึ่งคุณกําหนดเป้าหมายได้คือ cover, contain, entry, exit, entry-crossing และ exit-crossing เราจะอธิบายช่วงเหล่านี้ในภายหลังในโค้ดแล็บนี้ แต่หากรอไม่ไหว ให้ใช้เครื่องมือที่ 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 วินาที และใช้ easing 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 ในเนื้อหา
• นอกจากนี้ เนื่องจาก 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 ในแอตทริบิวต์สไตล์ของ Scroller ซึ่งช่วยให้แถบเลื่อนมีแถบความกว้างที่แน่นอนเมื่อเริ่มภาพเคลื่อนไหว เช่น หากมีองค์ประกอบ 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__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)