ページの一部をフェードインで表示したい件

サイト全体や指定した画像にフェードイン表示というのはよくあるのですが、ページ中の特定の一部の箇所、しかも画像とか特定の要素にではなくフェードインをしたい場合…。

というか、この説明が分かりにくいというわけなのですが！ｗ

まあ、具体的にはページ中の指定したdiv内といったほうが伝わりやすいかもですが。

その中にあるものが画像であろうとテキストであろうとフェードインしたいのです！ｗｗｗ

と言う事で、そんな場合の方法です。

お察しの通り、「jQuery」で実現いたします。

まずは、jQueryを準備してください。

全く使ったことが無い方はこちらからjQueryをダウンロードします。

http://jquery.com

「Download Jquery」というボタンがあるので、これをクリックしてダウンロードしてください。

続いて、今回フェードインを実現するためのプラグインをダウンロードします。

こちらも画面中央にある、「download」ボタンをクリックして取得してください。

フェードインプラグイン

で、それぞれのファイルを配置し、HTMLのhead内に読み込む記述を行ってください。

<script type="text/javascript" src="js/jquery.min.js"></script><!--jQuery読み込み-->
<script type="text/javascript" src="js/jquery.pageswitch.js"></scrip><!--フェードインプラグイン読み込み-->

↑こんな感じですね。

配置するパスはご自身の環境に合わせてください。なので、必ずしも上記の通りではないはずです。

あと、jQuery自体取得するのが面倒な方はGoogleのを拝借して以下の記述でもOKです！

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

続いて以下の記述を追加してください、これもhead内に書き込みます。

あとは、HTMLのbody内にIDで#hogeとした部分がフェードイン効果となります。

このID名の#hogeは上記16行目に指定していますので、自由な名称に変更してください。

まフェードインのタイミングは6行目、16、17行目の指定で変更が可能です。16、17行目は同じ数字を指定してください。（現在1500の箇所）

これでワンランク上？のフェードイン演出を指定箇所内に実現することが出来ます！ｗ

jQueryプラグイン徹底活用 プロのデザインアイデアとテクニック 編集：MdN編集部