オープニングアニメーションの開始から終わりまでを実装
オープニングを実装してみよう！
WEBサイトを開いたときに、ページのローディングが終わるまでアニメーションが表示されることがあります。
これはページの読み込みに時間がかかるときに、訪問者が離脱しないように実装されています。
今回の記事では、オープニングアニメーションの仕組みについて詳しく解説していこうと思います。
この機能を知っていれば、いつでもオープニングをつくることができます。
初心者の方でもわかりやすいようにいつもより細かく解説を入れていこうと思います。
それでは一緒に実装してみましょう♪
よく読まれている記事
オープニングアニメーションとは
オープニングアニメーションとは、WEBサイトを開いたときに実行されるアニメーションのことです。
このオープニングアニメーションの役割としては、訪問者に興味を持たせたり、サイトのイメージをより高度に見せることできます。
オープニングアニメーションを設置しているサイトはまだまだ少ないので、簡単に差別化させたいときにおすすめです。
オープニングアニメーションの実装
簡単にオープニングアニメーションを作ってみました。
See the Pen
オープニングアニメーション by loa (@hana4525)
on CodePen.
jsとcssで構成されていますが、短いコードだけで実装ができます。
リロードの時にアニメーションが1回だけ再生されるようになっています。
右下にReturnボタンがあるので、そこを押すとアニメーションを確認することができます。
最初の3秒間にテキストアニメーションが流れて、その後1秒間でローディングが消えるようなjsの実装になっています。
アニメーションの長さに合わせて時間を調整することが可能です。
fadeOutでアニメーションが徐々に消えていくようにすることで、簡単にオープニングを作ることができました。
このjsの内容をアレンジすることで複雑なオープニングを作ることもできます。
次回の記事でいろんなアレンジ例をご紹介したいと思います！
よく読まれている記事
まとめ
今回はオープニングアニメーションの開始から終わりまでの実装について詳しく説明してみました。
オープニングはサイトを開いたときにのみ表示されるものなので、訪問者の記憶に残るようなものを作りたいですね。
多くのサイトではローディングはよく使われていますが、オープニングアニメーションを実装しているものはまだまだ少ないです。
今のうちに他のサイトと差別化したい方は、ぜひ設置してみてください。
今後もいろんなオープニングを作っていきたいですね。
最後までご覧いただきありがとうございました☆彡