訪問時にフェードイン、そして別ページへ遷移時にフェードアウトするやつ

LINEで送る
Pocket

訪問した時にページ全体がゆっくりとフェードインしてくるあれです。
ブランドのサイトとかおしゃれ系のサイトでたまーに見ますよね。
またリンクなどをクリックしたときに別のページへと遷移する時にフェードアウトさせます。

以下Demoページ
Demoページへ

html

head内でjqueryの読み込み

フェードインさせたい要素に任意のid
フェードアウト時のリンク。今回はli a※classなどで指定してもOKです。

javascript

フェードインさせたいコンテンツをdisplay:noneをhead内に挿入し非表示にします
fadeinメソッドに表示速度を指定
クリックでフェードアウトさせたい要素を指定

これで終わりです。
とっても簡単にできます。
ただあまりアニメーションがスローだとちょっとイラっとすると思うのでその辺の調整は上手にやってみてください。

以下Demoページ
Demoページへ

One thought on “訪問時にフェードイン、そして別ページへ遷移時にフェードアウトするやつ

  1. […] が公開していそう。気を取り直して検索を続行。ありました。http://gallery-lounge.com/jquery-fadein-fadeout/ […]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">