記事一覧

画面をタイル状に分割してトランジションを行う[bg_tile]タグ追加プラグイン

このプラグインは「tempura」プラグインに統合されています。
ぜひこちらのプラグインをご利用ください。

トランジションのバリエーションを増やすべく、
「背景をタイル状に分割してのトランジション」を行えるようにするプラグインを作りました。
タイルフェード? パネルフェード? 名前はよくわかりません。

background-positionをずらしたdiv要素を量産するという原始的な手法をとっていますので、
環境は選ばないんじゃないかなあと思います。φ(・ω・`)

このプラグインを追加すると、[bg_tile]タグによって背景レイヤーのタイル分割トランジションができるようになります。
また関連タグとして[def_bg_tile][reset_def_bg_tile]タグも追加されます。

ダウンロード:[bg_tile]タグ追加プラグイン.zip

ティラノスクリプトの埋め込み

以下、使い方。



[bg_tile]


使用例

[bg_tile storage=rouka.jpg dir=leftTop nx=6 ny=12]

この例では、背景レイヤーの画像ををbgimageフォルダ内のrouka.jpgファイルに切り替えようとします。
スクリプトが読み込まれると、まず画面を横に6分割/縦に12分割し、6×12=72個のタイルを生成。
その後タイルが左上方向から順にフェードアウトしていき、最終的にはrouka.jpgが表示されます。

パラメータ 必須 説明 デフォルト 設定例
folder × 切り替えるファイルを探すフォルダ名。./data/以下のフォルダを指定する。 bgimage bgimage/school
storage 切り替えるファイル名。folderパラメータで決めたフォルダから探します。後述のextパラメータを指定している場合には、拡張子(.pngなど)を省略することができます rouka.jpg
ext × 拡張子名。後述する[def_bg_tile]タグで拡張子名を設定しておけば、storageに拡張子を書く必要がなくなります。 jpg
color × 切り替える色名。HTML5の形式で書く。 white rgb(255,0,0)
time × ひとつのタイルがフェードし始めてから完全にフェードするまでの時間(ミリ秒)。 1000 2000
delay × それぞれのタイルに与えるディレイ(=遅延)時間の最大量(ミリ秒)。 1000 500
dir × タイルがトランジションしていく方向。消え始める方向を指定する。
random / top / bottom / left / leftTop / leftBottom / right / rightTop / rightBottom / center / centerHorizon / centerVertical / out / outHorizon / outVertical
random leftTop
ny × 縦のタイルの数。 4 8
nx × 横のタイルの数。これを「未指定」にしておくと、タイルが正方形になるように自動的に横のタイルの数が調整される。 4
light × タイルが消えかかるときの光の色。HTML5の形式で書く。 white black



[def_bg_tile]

デフォルト設定を書き換えるタグです。
毎回同じ設定を[bg_tile]タグに描いていると、見た目が長くなるばかりか、変更も大変になります。
その対策にお使いください。


使用例

[def_bg_tile folder=bgimage/school ext=jpg]
[bg_tile storage=asa]
[bg_tile storage=hiru]
[bg_tile storage=yuu]
[bg_tile storage=yoru]

この例では、folderパラメータにbgimage/schoolを指定し、
さらにextにもjpgを指定することで、後に続く[bg_tile]タグのstorageパラメータを大幅に省略しています。
(storage=school/asa.jpgと書かなければいけないところをstorage=asaだけで済むようにした。)
パラメータは、[bg_tile]タグと同じものがすべて使えます。




[reset_def_bg_tile]

[def_bg_tile]タグであれこれデフォルト設定を変えたあと、またもとに戻すのは大変です。
そこで、一発でデフォルト設定を〝デフォルト設定のデフォルト設定〟に戻すというタグがこれです。
[def_bg_tile]タグとセットでお使いください。


使用例

[reset_def_bg_tile]

パラメータはありません。

スポンサーサイト

コメント

コメントの投稿

非公開コメント