読者です 読者をやめる 読者になる 読者になる

東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

supersized.jsを使って全画面ズームインアウトしながらスライドショー

今回はwordpressで構築。

①まずsupersized.jsなどをheadタグ内で読み込んでスライドショー起動。下記コードをかけば基本は設置できるはず。

<head>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/supersized.css" type="text/css" media="screen" />

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.easing.min.js"></script>
	<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/supersized.3.2.7.min.js"></script>
<script type="text/javascript">
jQuery(function(jQuery){
    jQuery.supersized({
        slide_interval : 6000, //1画像の表示時間
        transition : 1, //切り替え効果
        transition_speed : 1500, //切り替えスピード
        slides : [
            { image : 'img01.jpg' },
            { image : 'img03.jpg' },
            { image : 'img05.jpg' }
        ]
    });
});
</script>
</head>


②#supersizedの中のimgにズームインアウトアニメーションをかけるようcss記述。


#supersized img {
  -moz-animation: move 38s ease infinite;
  -webkit-animation: move 38s ease infinite;
  animation: move 38s ease infinite;
}

@-moz-keyframes move {
  0% {
    -moz-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -moz-transform: scale(1.2);
    transform: scale(1.2);
  }


  100% {
    -moz-transform: scale(1);
    transform: scale(1);
  }

}
@-webkit-keyframes move {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

}
@keyframes move {
  0% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }

  100% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

【参考URL】

Supersized: Ken Burns effect を追加する | deadwood
http://motoshige.net/blog/archives/5128