Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
129 lines (105 sloc) 3.1 KB

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 switchdefaultを設定

Other

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