50 天计划第 6 天

准备工作

今天是 50 天计划的第 6 天。今天要完成的是第 6 个项目 Scroll Animation。可以先看一下页面效果，对大体内容有个基本了解。

首先在 pages/day 目录下新建文件夹 6，并添加 index.tsx 文件。此时页面结构如下：

pages
  |-- index.tsx
  |-- day
      |-- 6
          |-- index.tsx

在 pages/day/6/index.tsx 中写入以下内容：

const ScrollAnimationPage = () => {
  return (
    <div>hello world</div>
  )
}

export default ScrollAnimationPage

此时访问路由 http://127.0.0.1:5173/day/6，可以看到一个 hello world。

项目开发

先把页面布局弄一下。

const Item = () => {
  return (
    <div flex justify-center items-center h-240px w-360px shadow-lg shadow-gray
      bg="#4682b4" text="white 4xl" font-bold rounded-lg
    >
      Hello World
    </div>
  )
}

const ScrollAnimationPage = () => {
  return (
    <>
      <h1 font-extrabold text-3xl mb-20px>Scroll to see the animation</h1>
      <div flex gap-6 items-center flex-col>
        {
          new Array(8).fill(null).map((item, index) => (
            <Item key={index} />
          ))
        }
      </div>
    </>
  )
}

export default ScrollAnimationPage