2013年9月25日 3:03 PM  カテゴリー: javascript, jQuery, Tips, web制作

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

以下Demoページ
Demoページへ

html

head内でjqueryの読み込み

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

javascript

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

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

以下Demoページ
Demoページへ

ABOUT

仕事と子育てを楽しむパパです。 趣味は漫画、映画、海外ドラマ、波乗り、スノボ、カメラ。 最近いけてないけど旅行も大好き。仕事はweb以外にも企業向け技術教育事業、投資、ディレクション、アパレル、写真、店舗プロデュースなどなどなんでもこなします。

Twitter