CSSとJSでページを開いたときにアニメーションのロゴを数秒出す

CSS CSS

ページを開いたときに数秒のオープニングを入れるスクリプトを紹介します。

今回はロゴを簡単にアニメーションさせるものおですが、応用すれば色々な演出が可能です。

ファイル構成は

index.html⇒オープニングを挿入するHTML

/js/start.js⇒開始時の操作

/css/style.css⇒スタイル

/images/logo.png⇒表示するロゴ

となります。

デモページ

スポンサーリンク

HTML

まずはオーバーレイさせるブロックからです。

どこでも問題ないですがbodyの最初や最後に入れましょう。

またjavascriptファイルを読み込む記述もします。(jqueryを使用していますので読み込んでいな場合は読み込んでください。)

index.html

 

CSS

CSSスタイルは開始時に画面いっぱいにレイヤーを出してロゴを中央に寄せます。

ロゴには縦のスケール指定でアニメーションをつけます。

style.css

 

javascript

javascriptはページ開始時に前面にレイヤーをスクリーンに報じしたものを指定時間後に消す作業を行います。

また、レイヤーを出している間にスクロールができないようにロックをかけます。

簡単ではありますがページを開いたときのつかみに使えると思います。

SVGでアニメーションを作成したりすれば動画のオープニングのようなことも可能です。

コメント

タイトルとURLをコピーしました