ThreeModelsIntro

[godmmt]

Mockup

[godmmt]

---

上下都有動畫:

[godmmt]

CSS animation-timeline *Horizontal Scroll Section

https://medium.com/@aaabear320/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC%E7%AD%86%E8%A8%98-scroll-driven-animations-8b68242ad300

[godmmt]

https://www.frontend.fyi/v/css-scroll-driven-animations

[godmmt]

took 2.5 hours

remain 5.5

[godmmt]

• https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event
• https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event
• https://developer.mozilla.org/en-US/play

[godmmt]

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations

[godmmt]

https://scroll-driven-animations.style/

[godmmt]

Original ver: ThreeModelsIntro

codes

### ThreeModelsIntro ```tsx const ThreeModelsIntro = () => { return (

3 models for different users.

Our product line offers three different models: PRO, MAX, and Enterprise. Each model has distinct performance and capabilities, catering to different types of users. You can find the right model for you by exploring the details below.

The PRO model features ARGB fans and a 1TB solid-state drive / NTD 100,000 (estimate)

The MAX model features ARGB fans and a 1TB solid-state drive / NTD 160,000 (estimate)

The Enterprise model features a water cooling system and a 2TB solid-state drive / NTD 300,000 (estimate)

); }; export default ThreeModelsIntro; ```

[godmmt]

IntersectionObserver

• https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver
• https://www.shubo.io/intersection-observer-api/
• https://jim1105.coderbridge.io/2022/07/30/intersection-observer/

[godmmt]

New ver: ThreeModelsIntro

codes

### ThreeModelsIntro ```tsx import { useEffect } from 'react'; const ThreeModelsIntro = () => { const ids = ['pro-model', 'max-model', 'enterprise-model']; useEffect(() => { const observer = new IntersectionObserver( (entries, intersectionObserver) => { entries.forEach((entry) => { if (entry.isIntersecting) { const index = ids.indexOf(entry.target.id); // 使用 setTimeout 添加延遲效果 setTimeout(() => { entry.target.classList.add('animate-fade-in'); }, index * 600); // 根據索引增加延遲時間，例如每個元素之間延遲 600 毫秒 intersectionObserver.unobserve(entry.target); // 觸發一次後取消觀察，避免重複觸發 } }); }, { threshold: 1.0, // 觸發閾值設置為 1.0，表示元素完全進入視窗 rootMargin: '0px 0px 0px 0px', // 觸發範圍 } ); ids.forEach((id) => { const element = document.getElementById(id); if (element) { observer.observe(element); } }); return () => { observer.disconnect(); }; }, []); const models = (

{[ { id: 'pro-model', text: 'The PRO model features ARGB fans and a 1TB solid-state drive / NTD 100,000 (estimate)', }, { id: 'max-model', text: 'The MAX model features ARGB fans and a 1TB solid-state drive / NTD 160,000 (estimate)', }, { id: 'enterprise-model', text: 'The Enterprise model features a water cooling system and a 2TB solid-state drive / NTD 300,000 (estimate)', }, ].map(({ id, text }) => (

{text}

))}

); return (

3 models for different users.

Our product line offers three different models: PRO, MAX, and Enterprise. Each model has distinct performance and capabilities, catering to different types of users. You can find the right model for you by exploring the details below.

{models}

); }; export default ThreeModelsIntro; // export default ThreeModelsIntro; ```

[godmmt]

一開始研究如何使用滾動動畫來實現 但一直嘗試失敗

後來就只好改用一般的監聽 scroll 實現， 研究後發現 IntersectionObserver 也是類似的做法，就用這個實現動畫。

使用 IntersectionObserver 讓畫面滾動至該元件後才會啟動動畫

[godmmt]

took 6.5 hours

Total time: 9 hours

done.

---

8pt 要包含兩個元件和動畫是不足的 所以補開一張工作單 #51 內容就是實作另一個元件 ThreeModelsVideo

現在這張工作單是元件 ThreeModelsIntro (包含動畫)