フルスクリーンのスライドショーに、ズームしていく効果を追加します。

[markdown]
[Ken Burns effect](http://en.wikipedia.org/wiki/Ken_Burns_effect) っぽい動きをつけたく、色々探していたところ、CSS3 animation で動きを付ける方法を見つけました。

> [jquery – Add ken burns effect to supersized gallery – Stack Overflow](http://stackoverflow.com/questions/21501113/add-ken-burns-effect-to-supersized-gallery)

モバイル対応も考えると良い方法に思えたので、以前に確認した Supersized をベースに試してみました。

## バージョン

* jQuery 1.11.1
* Supersized.3.2.7

> [Supersized – Full Screen Background Slideshow jQuery Plugin](http://buildinternet.com/project/supersized/)

## Browser Support

CSS3 animation で実現するので、こんな形に。
Firefox, Chrome, Safari, iOS, (Android), IE10+

## つかいかた

HTML と jQuery スクリプトを下記のとおり準備します。

> [Supersized: フルスクリーンスライドショー | deadwood](https://www.d-wood.com/blog/2014/05/29_6272.html)

“`html

raumrot: FREE Hi-Res pictures for your personal and commercial projects. Outstanding Hi-Res Photos for FREE. CC BY / By: Markus Spiske

“`

CSS3 animation については、以前試したものを利用。
supersized.css に追記します。

> [Compass: CSS3 animation の prefix 付きコードを生成する | deadwood](https://www.d-wood.com/blog/2014/08/16_6626.html)

“`css:supersized.css
/*
Add ken burns effect to supersized
*/
#supersized img {
-moz-animation: move 14s ease infinite;
-webkit-animation: move 14s ease infinite;
animation: move 14s ease infinite;
}
@-moz-keyframes move {
from {
-moz-transform: scale(1);
transform: scale(1);
}
to {
-moz-transform: scale(1.2);
transform: scale(1.2);
}
}
@-webkit-keyframes move {
from {
-webkit-transform: scale(1);
transform: scale(1);
}
to {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
@keyframes move {
from {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
to {
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
“`

`#supersized img` に対して CSS を適用。
fade と scale のタイミングを合わせたところ、うまく動きました。

## 補遺

> * [jquery – Supersized 3.2.7 doesn’t work in IE8 – Stack Overflow](http://stackoverflow.com/questions/11337026/supersized-3-2-7-doesnt-work-in-ie8)

その他、見つけた Ken Burns effect jQuery プラグイン。

### jQuery.animate() 系

JavaScript でごりごり動かしているので IE7 でも動く。
モバイル端末でのパフォーマンスを考えてやめておいた。

> * [subchild/jquery.slideshowify.js](https://github.com/subchild/jquery.slideshowify.js)

### CSS3 animation 系

同じく CSS3 系だと思うので、IE10 から動くと思われる。

full screen

> * [Full Page Image slideshow | jQuery Plugin Registry](http://plugins.jquery.com/fullpageimageslideshow/)
> * [ページ背景をフルスクリーンのスライドショーにするjQueryプラグインを作ってみた。（CSS3のアニメーション機能のみで実現） | 株式会社LIG](http://liginc.co.jp/designer/archives/7149)

gallery

> * [toymakerlabs/kenburns](https://github.com/toymakerlabs/kenburns)
> * [Ken Burns effect with Javascript and Canvas](http://www.willmcgugan.com/blog/tech/2011/2/26/ken-burns-effect-with-javascript-and-canvas/)
[/markdown]