マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」
「Mosaic」は、画像などにマウスオーバーすると、キャプションをスライド(イン/アウト)もしくはフェイド(イン/アウト)させてくれるjQueryプラグインです。ダウンロードはこちら スクリプト <link href= "mosaic.css" type="text/css" rel="stylesheet"> <script src="jquery.min.js" type="text/javascript"></script> <script src="mosaic.1.0.1.min.js" type="text/javascript"></script> 実装 <div class="mosaic-block bar3"> <a class="mosaic-overlay" href="#"><div class="details">キャプション</div></a> <a clas
プラグインを使わずに、かんたん実装できるjQueryマウスオーバーアニメーションのまとめ | ニトなび
ここのところ少しブログをリニューアルしたのですが、過去に導入してほとんど活躍していないjQueryマウスオーバーアニメーションを外しました。しかし、なんかせっかく実装したものを外しただけでは無意味なので、今後再導入するときの為に、スクリプトを書きとめておく事にしました。 マウスオーバーアニメーションの種類 オンマウスで画像を切り替えるアニメーション フェイドさせながらテキスト色を変化させるアニメーション フェイドさせながら背景色を変化させるアニメーション テキスト（画像）を横にピコッとずらすアニメーション 画像をボワ～と大きく変化させるアニメーション 画像を右から左へスライドさせ入れ替えるアニメーション 画像をクルッと縦に回転させるアニメーション ※jQuery導入方法の基本は過去にこちらの記事に書きましたのでご参考下さい。 オンマウスで画像を切り替えるアニメーション DEMO ⇓ 1.
jQuery Mouseover Effect Using Parallax Style Tutorial - freshDesignweb
The power of jQuery is enormous, so in this tutorial we are going to show you in a very creative way using parallax style with jquery mouse over effect. On mouse over a parallax, animation image layer are response to the mouse travelling the whole width of the mouse port, the position of image move depend on css style that we have defined in different style in example. You may also like my this p
jQuery.BlackAndWhite - Gianluca Guarini
jQuery.BlackAndWhite Description This plug-in can easily convert any colored image into a B&W greyscale image. It uses the the HTML5 canvas tag and a fallback for the old browsers Usage 1 Include the plug into the page: <script src="js/jQuery.BlackAndWhite.js"></script> 2 Set the image wrappers using the css: .bwWrapper { position:relative; display:block; } 3 Initialize the plug in on window load
css-lecture.com - css lecture リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
jQueryで簡単に作れるマウスオーバーでアニメーションするボタン５種
jQueryで簡単に作れるマウスオーバーでアニメーションするボタン５種 ちょっと前まではマウスオーバーといえば画像の切り替えくらいでしたけど、最近ではアニメーションで切り替わるマウスオーバーも増えてきましたね。 ということでこの記事ではjQueryを使用して、わりと簡単に作れるマウスオーバーアクションをご紹介します。 投稿日2010年10月24日 更新日2012年03月05日 ナビゲーションはテキストにしないとseo的にあれだよとか言われていますが、コーポレートサイトではまだまだ画像を使用されていることが多いと思います。なので、今回は画像ナビゲーション限定です。（テキストでもあまり変わらないと思いますが……） 縦型+テキストタイプのナビゲーションはこちらの記事をご覧ください。 「jQueryで作るマウスオーバーアニメーションするテキストタイプの縦型ナビゲーション10種」 htmlと画像の準
オーバーレイなどのブレンドモード効果を与えられる「jQuery Blend Modes」 – creamu
これはすごい、かも。オーバーレイなどのブレンドモード効果を与えられるjQueryプラグインです。 マウスオーバーすると画像が変化します。 オーバーレイ効果 焼き込み効果 $7で配布中のようです。 jQuery Blend Modes
jQueryでシンプルにマウスオーバー時に画像をスライドさせる
twitter facebook hatena google pocket マウスオーバーでちょっとエフェクトをかけたい。 でも、jQueryプラグインを使うほどの機能はいらないということがあるかと思います。 今回はプラグインを使用せず、シンプルにマウスオーバー時に画像をスライドさせたいと思います。 via：Useful image hover slide effect with jQuery | image hover,image slide sponsors 使用方法 jQueryからjquery.jsをダウンロードします。 またマウスオーバーで変化を与えたい画像を下記のように記述します。 <div id="id名"> <a href="#"><amp-img src="画像パス" /></a> </div> なお、画像はエフェクト分を含めた形で作成します。 このため、最初はオーバー画
画像にマウスオーバーするとキラーンとさせるjQueryプラグイン「jQuery Gloss」
twitter facebook hatena google pocket 画像にマウスオーバーした際にひと工夫したい。 そんな時にはjQuery Glossです。 キラーンとさせますよ、キラーン★ sponsors 使用方法 jQuery Glossからファイル一式をダウンロードします。 <script src="jquery-1.4.4.min.js" type="text/javascript"></script> <script src="gloss.1.0.js" type="text/javascript"></script> <script> $(document).ready(function(){ $.gloss(); }); </script> あとは画像を記述すれば完成です。 <div class="gloss" style="width:画像サイズ幅px;heigh
[JS]CSSスプライトをアニメーションで変更するチュートリアル
Photoshopでの画像作成からはじまり、CSSスプライトをアニメーションで変更するボタンを実装するチュートリアルをTutorial9から紹介します。 Creative Button Animations with Sprites and JQuery デモページ デモではHTMLとCSSを使用したベーシックなCSSスプライトで実装したボタンだけでなく、XHTMLとCSSとJavaScriptを使用しフェードのアニメーションでじんわりと変更するボタンなどがあります。 エキスパート モードでは、一つの画像で複数のボタンを変更するもの、矩形ではなく円形のボタンをアニメーションで変更するものもあります。
画像が浮き上がるjQueryを使ったイメージギャラリー:phpspot開発日誌
jQuery Image Effects - Hover Effect w/ jQuery & CSS - jQuery Tutorial 画像が浮き上がるjQueryを使ったイメージギャラリー。 デモページのようなギャラリーを作成できます。 jQueryで小気味よくアニメーションするところがなかなかよいです。 ちょっとしたところで使えそうですね。 関連エントリ jQueryを使ったFlashばりにクールなギャラリー「GalleryView」 訪問者驚きの手めくり風、画像ギャラリー作成サンプル 滑らかに画像が切り替わる超絶クールFlash写真ギャラリー「imagin」
jQueryで遊んでみる その4 – CamCam
←その3 fadeTo()というエフェクトを使って簡単なロールオーバーを作ってみた。 ↓カーソルを合わせてみて ソースはこんなんで、その3とほとんど同じ。 今回はclass=””で指定。 <script type="text/javascript"> $(function(){ $(".mover").mouseover(function() { $(this).fadeTo("normal", 0.2); }); $(".mover").mouseout(function() { $(this).fadeTo("normal", 1); }); }); </script> <img src="1.png" alt="" class="mover" /> <img src="1.png" alt="" class="mover" /> class=”mover”と言うクラスを指定したエレメ
Dan Wellman » Plugin Update: hoverfade-1.0.2
I recently updated my hoverFade jQuery plugin after using the plugin in a couple of projects and work and needing extra functionality. I’ve been waiting for the jQuery plugin site to come back up again (which it now has) after being locked down following major spam attacks. I also wanted to wait until I had chance to put some proper examples together following comments in the original plugin relea
クロスフェードするロールオーバー処理をお手軽に実装するJavaScript - KAZUMiX memo
#ff0000">2009年6月3日更新:ブラウザの「戻る」でフェード状態が残らないように修正。またリンクになっていなくてもフェードの対象にするようにした。 マウスカーソルが画像の上に重なったとき、その画像ファイル名の最後が _rollout となっている場合、その _rollout 画像を _rollover にフェードさせるJavaScriptです。 クロスフェードするロールオーバー処理 動作サンプル サンプルのロールオーバー用の画像は次のようなファイル名になっています。 menu01_rollout.png 最初のメニューの標準画像 menu01_rollover.png 最初のメニューのロールオーバー画像 menu02_rollout.png 2番目のメニューの標準画像 menu02_rollover.png 2番目のメニューのロールオーバー画像 menu03_rollout.pn
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jobyj.in
Jquery Fade In.Fade Out | hv-designs
http://miracle-ysdesign.com/blog/javascript/443.html
[JS]CSSスプライトにフェードや移動、不透明度の変更を加えるスクリプト -bgFade