LoginSignup
4

posted at

updated at

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を使って2秒後に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;
  }
}

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
4