jquery.akTextOverlay.js

お勉強プラグインシリーズ。画像の上に文字がスライドインするのを簡単にするプラグイン。

Demo

CodePen

Usage

// Format:
$(selector).textOverlay({
  backgroundColor: '000000',
  opacity: 0.7,
  color: 'ffffff',
  direction: 'toT',
  tag: 'div',
  className: '',
  transition: true,
  duration: 300,
  easing: 'ease'
});

// Examples:
$('.rollover').textOverlay();

// Examples:
$('.rollover').textOverlay({
  backgroundColor: '444444',
  opacity: 0.9,
  className: 'overlayText',
});

$(selector) 内の <img> タグ上にテキストを表示するレイヤーをスライドインします。 スライドインするテキストは data-text 属性内に記述します。

 <img data-text="スライドインさせる文字列">

Options

Property	Type	Default	Description
backgroundColor	String	000000	背景色
opacity	Number	0.7	背景色の透過度
color	String	ffffff	文字色
direction	String	toT	スライドインする方向（toT, toB, toL, toR）
tag	String	div	テキストをラップするタグ
className	String	-	テキストをラップするタグにつけるクラス
transition	Boolean	true	transition を使うか ※IE9でも動かしたい場合に`false`にする（`animate`で動くようになります）
duration	Number	300	スライドにかかる時間（ミリ秒単位）
easing	String	ease	イージング ※`cubic-bezier(0.42, 0, 0.58, 1.0)`とかでもOK ※`transition`が`false`の場合は無視される

ToDo

• IE8以下の背景色の対応をするかも

Changelog

• 2014.11.08 スライドインするレイヤーの不必要なデフォルトスタイルを削除
• 2014.11.03 Demo を CodePen に設置
• 2014.11.03 jQuery.textOverlay.js -> jQuery.akTextOverlay.js 名前を変更。
• 2014.07.31 opacityオプションを String -> Number に変更
• 2014.07.31 switchにdefaultを設定

Other

イージングはここで確認するのがおすすめ: http://easings.net/ja