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

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

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

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

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 เพื่อติดตั้งทรัพยากร Dependency
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. ตอนนี้แนบคีย์เฟรมเหล่านี้กับองค์ประกอบเนื้อหา

src/styles.css

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

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

เคสสำหรับชุดคีย์เฟรม 1 ชุด

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

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

@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 แล้ว

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

แหล่งข้อมูล

• ทำให้องค์ประกอบเคลื่อนไหวขณะเลื่อนด้วยภาพเคลื่อนไหวแบบเลื่อน
• ดู Visualizer ช่วงไทม์ไลน์
• มีอะไรใหม่ในภาพเคลื่อนไหวบนเว็บ (Google I/O ปี 2023)