jquery captify


Description: 画像にマウスオーバーすると透過された背景とキャプションがスムーズにスライドアップします。2.3kbと、軽量なのも良いですが、IEは全滅でしょうか?(※IETesterにて確認)
Sample: demo
Tutorial: jquery captify
License: MIT

Note

$(function(){
	$('img.captify').captify({
		// all of these options are... optional
		// ---
		// speed of the mouseover effect
		speedOver: 'fast',
		// speed of the mouseout effect
		speedOut: 'normal',
		// how long to delay the hiding of the caption after mouseout (ms)
		hideDelay: 500,
		// 'fade', 'slide', 'always-on'
		animation: 'slide',
		// text/html to be placed at the beginning of every caption
		prefix: '',
		// opacity of the caption on mouse over
		opacity: '0.7',
		// the name of the CSS class to apply to the caption box
		className: 'caption-bottom',
		// position of the caption (top or bottom)
		position: 'bottom',
		// caption span % of the image
		spanWidth: '100%'
	});
});

スルクロールスピードの変更などはここで。

Related snippet :

  • Description: マウスオーバーで四方に画像が分かれ、別のコンテンツが表示される、というもの。マウスを離すと自動で戻りますが、その時のアニメーションエフェクトにも工夫 ...
  • Description: エフェクトの豊富なスライドギャラリーです。昔のFlashライクなエフェクトでマークアップも簡単なので導入も手軽です。IE6での挙動はやや不安定です ...
  • Description: 省スペースにイメージギャラリーを設置することが可能なプラグインです。コンパクトながらなかなか高機能で、デザインを崩すこと無くギャラリーを導入できる点 ...
  • Description: ツールチップがフェードインアウトします。ツールチップ内は画像やリンクを含めたり、テキストのドラッグも可能。非常に軽量なコードで実装できますので汎用性 ...
  • Description: マウスオーバーした画像をハイライトし、キャプションも表示します。クロスブラウザで動作してくれますが、若干反応が遅いでしょうか。多少の改善は必要かも知 ...
  • Description: 全画面をイメージギャラリー化するプラグインです。オート再生され、下部にはサムネイルもあります。画像はどのようなモニターサイズに合わせてストレッチ(伸 ...
  • Description: 大量の要素に対して、指定方向へ順番にフェードを適用させ、ユニークなアニメーションコンテンツを実装します。個人的には若干鬱陶しくなりそうな気がしますが ...