要素をクロスフェードでリピート表示するJavaScriptライブラリ「bgfade」を作りました

npmについて理解を深めるため、自分でもnpmのパッケージを作って公開してみました。「bgfade」というフロントエンド用のライブラリです。写真をクロスフェードで延々と切り替えるアレを簡単に実装できます。jQueryなしで動くので気軽に使えると思います。Demoサイトも作ったので動きはそちらで確認してください。

bgfade | JavaScript Library to switch display of DOM elements with fade.

使い方

開発ディレクトリ内で下記のコマンドを実行し、モジュールをインストールしてください。

$ npm init -y
$ npm i -D bgfade

インストールできたらまずはhtmlとcssを用意しましょう。たとえばこんな感じに。

<style>
#target {
  height: 300px;
  list-style: none;
  width: 300px;
}

#target li {
  background-color: royalblue;
  font-size: 30px;
  height: 100%;
  text-align: center;
  width: 100%;
}
</style>

<ul id="target">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

html側のポイントはひとつ。bgfadeを実装する要素はulかolタグにしてください。このulとolが親要素となり、その中のliがクロスフェードする形になります。

html側が用意できたら続けてjsファイルを作っていきましょう。

'use strict';

import bgfade from 'bgfade';

const bg = bgfade('target', {
  speed: 3,
  duration: 4
});

最初の引数にはhtml側のidを渡します。ここには必ずidを記述してください。クラスでは動かないのでご注意を。

ふたつ目の引数にはオブジェクト形式でオプションを指定できます。要素が切り替わる時のフェードの長さ（s）、durationは次の要素に切り替わるまでの待機時間（s）です。この引数は省略も可能です。その場合はそれぞれデフォルトの値で動作します。

これだけでこんな感じ↓のクロスフェードを簡単に実装できます。

メソッド

フェードのアニメーションを途中で止めたい、というケースもあるかと思います。その際には下記のメソッドを実行してください。ちなみにここで登場したbgはbgfadeを実行した際の戻り値です。

bg.stop();

逆に停止したアニメーションを再開したい時には下記のコマンドを実行します。

bg.start();

アレンジ

時にはアクティブ状態の要素に対してcssで何らかの変化を加えたいなんてこともあるかもしれません。そんなこともあろうかと、アクティブ中の要素（liタグ）に対してbg-activeというクラスがつくようにしておきました。

これを使えば、たとえばアクティブ中は写真を緩やかにズームさせるなどのちょっと気の利いた演出も実装できます。実際の動きはこちらでご確認ください。

あ、ちなみにモジュールとして使うことしか想定して作っていないので、使うときはwebapckなりbrowserifyなりのバンドルツールで、importかrequireしてくださいね。

Link

• bgfade - npm
• bgfade - demo