jQueryプラグインのVegasでテキストをアニメーションに追加する

Vegas は背景スライドアニメーションを追加するのに便利なjQuery/Zeptoプラグインである。
今回は、背景スライドの切り替わり時にテキストも切り替わる実装をしたいと思ったので、その記録。

前提条件

jQuery v3.6.0
Vegas v2.5.4

JavaScriptライブラリのZepto.jsは私が触れたことがないので、本記事では取り扱わない。

実装例1

1-1 vegas.jsのコードを一部改変する

342行目辺りの変数を定義しているところに変数を追加する。
overlaytext = this._options('overlaytext')
見栄え的に cover を定義している行の次に挿入すればいいかなと思うけど、別にどこでもいい。

vegas.js(改変後)

var $slide,
  $inner,
  $video,
  $slides       = this.$elmt.children('.vegas-slide'),
  src           = this.settings.slides[nb].src,
  videoSettings = this.settings.slides[nb].video,
  delay         = this._options('delay'),
  align         = this._options('align'),
  valign        = this._options('valign'),
  cover         = this._options('cover'),
  // ここに挿入
  overlaytext = this._options('overlaytext'),
  // 挿入完了
  color         = this._options('color') || this.$elmt.css('background-color'),
  self          = this,
  total         = $slides.length,
  video,
  img;

次に455行目辺りの $inner に代入するオブジェクトを変更する。

vegas.js(改変前)

$inner = $('<div class="vegas-slide-inner"></div>')
  .css('background-image',    'url("' + src + '")')
  .css('background-color',    color)
  .css('background-position', align + ' ' + valign);

変更箇所

- $inner = $('<div class="vegas-slide-inner"></div>')
+ $inner = $('<div class="vegas-slide-inner">' + overlaytext + '</div>')

vegas.js(改変後)

$inner = $('<div class="vegas-slide-inner">' + overlaytext + '</div>')
  .css('background-image',    'url("' + src + '")')
  .css('background-color',    color)
  .css('background-position', align + ' ' + valign);

1-2 slidesに自分の好きなテキストを追加する

あとは、自分が好きにいじるスクリプトで、Vegasの設定例に倣って書くだけ。

index.html(実装例)

<div class="wrapper">
<div id="slider"></div> 
</div>

custom.js(実装例)

$("#slider").vegas({
    overlay: true,
    transition: ['fade2'],
    transitionDuration: 2000,
    delay: 5000,
    animationDuration: 20000,
    animation: 'random',
    slides: [
        { src: "https://placehold.jp/1920x1080.png", overlaytext: "<p>Text for slider 1.</p>" },
        { src: "https://placehold.jp/1920x1080.png", overlaytext: "<p>Text for slider 2.</p>" }
    ]
});

このように、 overlaytext に設定するものは、htmlでも構わない。
あとは、cssで適当に体裁を整えてあげればこんな感じ。

style.css(実装例)

@charset "utf-8";
# slider {
    width: 100%;
    height: 100vh;
}
.wrapper{
	position: relative;
}
# slider p {
    position: absolute;
    font-size: 64px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

実装例2

こちらはvegas.jsのコードを改変しない方法なので、vegas.jsをcdnで利用する場合でも使用可能。
また、背景アニメーションの動きからテキストの挙動は独立しているので、こちらの方が色々取り回しがしやすそう。

2-1 Vegasが提供しているコールバック関数を活用

Vegasがスライド切り替えをする際に呼び出されるコールバック関数 walk というオプションが用意されている。
こちらを用いて実装

example.js

$elmt.vegas({
    slides: [
        { src: '/img/slide1.jpg' },
        { src: '/img/slide2.jpg' },
        { src: '/img/slide3.jpg' },
        { src: '/img/slide4.jpg' }
    ],
    walk: function (index, slideSettings) {
        console.log("スライドが切り替わったよ！");
    }
});

こんな感じのコードを書けば、スライドが切り替わるたびコンソールに
"スライドが切り替わったよ！"
と出力される。

2-2 slidesに自分の好きなテキストを追加する

index.html(実装例)

<div class="wrapper">
<div id="slider">
  <div id="vegasSliderInner"></div>
</div>
</div>

custom.js(実装例)

$('#slider').vegas({
		overlay: true,
		transition: ['fade2'],
		transitionDuration: 2000,
		delay: 5000,
		animationDuration: 20000,
		animation: 'random',
		slides: [
        { src: 'https://placehold.jp/1920x1080.png', text: "<p>Text for slider 1.</p>" },
        { src: 'https://placehold.jp/1920x1080.png', text: "<p>Text for slider 2.</p>"},
        ],
        walk: function (index, slideSettings) {
            $('#vegasSliderInner').html(slideSettings.text);
        }
});

cssは実装例1とほぼ同じなので省略。
こちらはcdn使えるので、codepenでデモを。

See the Pen Example1 Add text animation with Vegas by qoorus (@qoorus) on CodePen.

参考

https://vegas.jaysalvat.com/documentation/settings/
https://stackoverflow.com/questions/40727198/how-to-add-text-animation-with-vegas-js-plugin/50636515