jQueryを使ってアハ体験？？
2014.06.24 Posted by Coding_team
復活第2回目となりました、ウェブラボ技術メモです。
今回はなんと自作のjQueryとなります。
少し前にテレビやゲーム等で流行った、アハ体験をjQueryを使って再現致しました。
今回使用させて頂いた画像は、友人のペットのフェレットです。
フェレットばかりに目がいってしまうと、画像の変化になかなか気が付かないかもしれませんね笑
ヒントも出るようになってますので、ぜひ画像の変化を探してみてください！
仕組みは至って簡単です。
jQueryを使って、画像をフェードイン・フェードアウトさせているだけです。
こちらのDEMOには、ソースを見ただけでは答えがわからないように、背景画像を使ったりしていますが、
基本は画像を2枚並べて、フェードイン・フェードアウトをさせれば完成です。
簡単に作った場合下記のようになります。
HTMLはこちら
|
1 2 3 4 |
<div id="wrapper"> <p class="img01"><img src="○○" width="980" height="○○" alt="○○"></p> <p class="img02"><img src="○○" width="980" height="○○" alt="○○"></p> </div> |
CSSはこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
#wrapper { width: 980px; margin: 0 auto; position: relative; } #wrapper .img01 { position: absolute; top: 0; left: 0; } #wrapper .img02 { position: absolute; top: 0; left: 0; display: none; } |
jQueryはこちら
|
1 2 3 |
setTimeout(function(){ $('.img02').fadeIn(2000); },2000) |
DEMO等は自由に使って頂いて構いません。
※これらを使用して、起きたいかなる不具合・問題等に関しましては、弊社は一切責任を負いません。予めご了承下さい。
関連記事こちらの記事も合わせてどうぞ。
