東京都新宿区のWeb制作会社 - ウェブラボ株式会社

クリエイターブログ

jQueryを使ってアハ体験??

2014.06.24 Posted by

復活第2回目となりました、ウェブラボ技術メモです。

今回はなんと自作のjQueryとなります。
少し前にテレビやゲーム等で流行った、アハ体験をjQueryを使って再現致しました。

DEMOはこちら

今回使用させて頂いた画像は、友人のペットのフェレットです。
フェレットばかりに目がいってしまうと、画像の変化になかなか気が付かないかもしれませんね笑

ヒントも出るようになってますので、ぜひ画像の変化を探してみてください!

仕組みは至って簡単です。
jQueryを使って、画像をフェードイン・フェードアウトさせているだけです。

こちらのDEMOには、ソースを見ただけでは答えがわからないように、背景画像を使ったりしていますが、
基本は画像を2枚並べて、フェードイン・フェードアウトをさせれば完成です。

簡単に作った場合下記のようになります。

HTMLはこちら

CSSはこちら

jQueryはこちら

DEMO等は自由に使って頂いて構いません。
※これらを使用して、起きたいかなる不具合・問題等に関しましては、弊社は一切責任を負いません。予めご了承下さい。

オリエンシートダウンロード

採用サイト 絶対に外せない5つのチェックポイント

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278