Project Name

Milky
介紹牛奶產品 RWD 網頁

Technologies

• React
• React Router
• React Modal
• AOS
• Tailwind CSS
• React Collapsed
• swiper
• PhotoSwipe
• Vite

Project Screen Shot(s)

Untitled.1.mp4

Installation and Setup Instructions

下載專案前，請先安裝 node 與 yarn

git clone https://github.com/callumzhong/milky.git

安裝:

yarn install

啟動伺服器:

yarn dev

訪問應用程式:

localhost:5173

Reflection

該專案目的是多頁式 RWD 靜態網頁的展示，除了更加熟悉使用 Tailwind CSS 切版與 Component 拆分以外，滾動動畫與數字上升也是要不斷練手的重點。

整體上沒有遇到較困難的點，在此特別紀錄 計時器 的實作可以使用 CSS 的方式去實現，但多數新手會直覺地使用 state 搭配 setInterval 的方式去完成

const AnimatingNumber = ({
  isIntersecting,
  number,
  sec = '5s',
  color = 'white',
}) => {
  const ref = useRef(null);

  useEffect(() => {
    if (isIntersecting) {
      ref.current.style.setProperty('--num', number);
    }
  }, [isIntersecting]);

  return (
    <div
      ref={ref}
      className={`${styles.number} ${colors[color]}`}
      style={{
        '--sec': sec,
      }}
    ></div>
  );
};

引用 AnimatingNumber 元件，我們傳遞參數 number 表示數字增加上限值, isIntersecting 何時設定 CSS3 變數，這代表設定的當下就會啟動數字增加的動畫

@property --num {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}

.number {
  transition: --num var(--sec);
  counter-reset: num var(--num);
}

.number::after {
  content: counter(num);
  @apply text-[calc(1.375rem+1.5vw)] xl:text-4xl;
  color: inherit;
}

counter-reset 屬性第一個參數是自定義計數器名稱, 第二個參數是 值