HeroSectionOfProducts

[godmmt]

Mockup

Create

• [x] ProductsPage
• [x] ProductsPageBody
• [x] #47
• [x] HeroSectionOfProducts - slide 2
• [x] HeroSectionOfProducts - slide 3
• [x] HeroSectionOfProducts - slide 4

[godmmt]

Animation:

[godmmt]

Reference

• 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
• https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline
• https://developer.chrome.com/blog/whats-new-css-ui-2023#scroll-driven_animations

[godmmt]

• [x] create ProductsPage and ProductsPageBody components with basic layout

[godmmt]

took 0.5 hour

remain 7.5

[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
• swiper

[godmmt]

1. https://swiperjs.com/react
2. https://swiperjs.com/demos
3. https://codesandbox.io/p/devbox/swiper-react-effect-fade-zzq48c?file=%2Fsrc%2FApp.jsx%3A15%2C1
4. https://swiperjs.com/swiper-api#typescript-definitions
5. https://swiperjs.com/element
6. https://johnnytsai81.github.io/Plugin/09_Swiper-1/

[godmmt]

研究: Carousel - React Slick

• https://medium.com/@weiyun0912/%E4%BD%BF%E7%94%A8-react-slick-%E5%A5%97%E4%BB%B6%E8%A3%BD%E4%BD%9C%E8%BC%AA%E6%92%AD%E6%95%88%E6%9E%9C-carousel-68b52580ca61
• https://www.youtube.com/watch?v=6YnryDjEGr8

[godmmt]

took 6 hours

~remain 1.5~

remain 8

[godmmt]

took 5 hours

Total time: 11 hours

done.

---

First slide animation 改為另外開工作單 https://github.com/CAFECA-IO/iSunCoin-official/issues/47 → took 3 hours, remain 2 hours.