ケン・バーンズ効果という演出を知っていますか。複数を写真がある時、それを単に差し替えるだけでなく、ズームや左右上下にゆっくりとアニメーションしながら切り替えることで、単なる写真に命を与えると言われています。ケン・バーンズ監督が映画の中で使っていたことでそう呼ばれています。 そんなケン・バーンズ効果を手軽に実現できるWebコンポーネントがken-burns-slideshowです。

ken-burns-slideshowの使い方

デモです。写真がゆっくり動きつつ、差し替わっているのが分かるでしょうか。

速度を変えたり、アニメーションする方向の指定もできます。

フィルターを通すこともできます。これは白黒の例です。

ken-burns-slideshowは以下のようなHTMLで指定します。

<ken -burns-carousel
    images="https://source.unsplash.com/Qh9Swf_8DyA
        https://source.unsplash.com/O453M2Liufs
        https://source.unsplash.com/1OtUkD_8svc
        https://source.unsplash.com/gIgciC_WKnY
        https://source.unsplash.com/LCguCXU3Ffk">
</ken>

Webコンポーネント化されているので、利用するのは簡単でしょう。幾つかのアニメーション方法があらかじめ用意されており、それらの名前を指定するだけで利用できます。

ken-burns-slideshowはTypeScript製のオープンソース・ソフトウェア（MIT License）です。

ken-burns-slideshow Demo Festify/ken-burns-carousel: ? A web component that displays a set of images with a ken burns effect