jQueryで最初にトップページを開いたときに画面全体やロゴをフェードさせる | VIER LOG（ヴィアログ）
こんにちは。Vierです。 最近のWEBページは、様々なエフェクト（アニメション等の動き）が実装されているページが増えてきましたね。 トップページを開いた問のエフェクトって、言ってみれば、WEBサイトの玄関であり、そのWEBサイトの印象が決まってきます。 今回は、最初にトップページを開いたときに、画面全体が真っ白で、ロゴがフェードで浮かび上がり、数秒後に真っ白の背景とロゴがフェードアウトして、サイトが表示されるような実装を考えてみようと思います。 トップページを開いたときにアニメーションデモ百聞は一見に如かずということで、まずはデモをご覧ください。 デモを見る html、css、jQueryの実装html index.html<div class="start"> <p><img src="images/logo.png" alt=""></p> </div>htmlは上記の3行のみです。
CSS のみでページを開くときのオープニングシャッターアニメーションを表現してみる
サンプル See the Pen Opening Fake Shutter with pure CSS by digistate (@digistate) on CodePen. やっていることはごく簡単で、オープニングシャッター用の最前面のレイヤー要素(.shutter)を CSS アニメーションで変形させながら、最終的に非表示にして背面に移動させているだけです。 HTML の構造 HTML の構造もシンプルです。 オープニングシャッター用の要素(.shutter)を最初に記述し、その後にメインのページコンテンツ(.container)を配置します。 <div class="shutter"></div> <section class="container"> <!-- ここにメインコンテンツ --> </section> CSS の構造 オープニングシャッター用の要素は、最前面に表示し
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
