No description, website, or topics provided.
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md
jquery.akTextOverlay.js

README.md

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