,

[jQuery] Supersized: Ken Burns effect を追加する

公開日: 2014/08/17
更新日: 2018/11/13

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

Ken Burns effect っぽい動きをつけたく、色々探していたところ、CSS3 animation で動きを付ける方法を見つけました。

jquery – Add ken burns effect to supersized gallery – Stack Overflow

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

Contents

バージョン

  • jQuery 1.11.1
  • Supersized.3.2.7

Supersized – Full Screen Background Slideshow jQuery Plugin

Browser Support

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

つかいかた

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

Supersized: フルスクリーンスライドショー | deadwood

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <title>index</title>
  <meta name="viewport" content="width=device-width" />
  <link rel="stylesheet" type="text/css" href="/css/style.min.css">
  <link rel="stylesheet" type="text/css" href="/vendor/supersized.css">
</head>
<body>
<h1><a href="http://www.raumrot.com/10/">raumrot: FREE Hi-Res pictures for your personal and commercial projects. Outstanding Hi-Res Photos for FREE. CC BY / By: Markus Spiske</a></h1>
<!-- Scripts -->
<script src="/vendor/jquery.min.js"></script>
<script src="/vendor/jquery.easing.min.js"></script>
<script src="/vendor/supersized.3.2.7.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    'use strict';
    $.supersized({
      slide_interval: 5000,
      transition: 1,
      transition_speed: 3000,
      slides: [
         {image: '/img/01.jpg'}
        ,{image: '/img/02.jpg'}
        ,{image: '/img/03.jpg'}]
    });
  });
</script>
</body>
</html>

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

Compass: CSS3 animation の prefix 付きコードを生成する | deadwood

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 のタイミングを合わせたところ、うまく動きました。

demo

補遺

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

jQuery.animate() 系

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

CSS3 animation 系

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

full screen

gallery