React (Next.js) のオープニングアニメーション

React Web Opening Animation

Next.jsでオープニングアニメーション

Opening Animationはwebページを初めて開いたときに表示されるアニメーションを指しています

最もシンプルなもの

index.tsx

const Home: NextPage = () => {
  const [isLoading, setIsLoading] = useState(true)
  useEffect(() => {
    setIsLoading(true)
    setTimeout(() => {
      setIsLoading(false);
    }, 2 * 1000)
  }, [])
    
  {isLoading ? 
    <>
      {/* Loading */}
    </>
    : <>
      {/* After Loading */}
    </>
  }
}

1. Loadされた直後にisLoadingをTrueに
2. setTimeoutを使って２秒後にisLoadingをFalseに

することによって表示されるコンポーネントを切り替えてオープニングアニメーションを実装

フェードイン

フェードインなどを入れるとそれっぽくなります

index.tsx

import styles from "./**/Home.module.css"

const Home: NextPage = () => {
  const [isLoading, setIsLoading] = useState(true)
  useEffect(() => {
    setIsLoading(true)
    setTimeout(() => {
      setIsLoading(false);
    }, 2 * 1000)
  }, [])
    
  {isLoading ? 
    <div className={`${styles.fadeIn} ... `}>
      {/* Loading */}
    </div>
    : <div className={`${styles.fadeIn} ... `}>
      {/* After Loading */}
    </div>
  }
}

Home.module.css

.fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeInAnime {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}