matsunamima’s diary

2014-11-28

2014-11-28

クロスフェード

JavaScriptでクロスフェード

jQueryのバージョンを確認する
APIかダウンロードかを決める

<scriptsrc="http://code.jquery.com/jquery-1.11.0.min.js"></script>

Brand Spanking New

<scripttype="text/javascript">
window.onload = function(){
var cf = new Crossfader(newArray('cf1','cf2','cf3', 'cf4', 'cf5'), 500, 2000);
}
</script>

500はフェードエフェクトの時間（0.5秒）
2000は各画像の表示時間（2秒）

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>Crossfader</title>
<style>
html, body, div, ul, img {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
img {
  border: none;
  vertical-align: bottom;
}
#container {
  width: 640px;
  margin: 50px auto;
}
</style>
<scriptsrc="js/bsn.js"></script>
</head>
<body>
<divid="container">
<ulid="img_fader">
<liid="img1"><imgsrc="img/ph01.jpg"alt=""></li>
<liid="img2"><imgsrc="img/ph02.jpg"alt=""></li>
<liid="img3"><imgsrc="img/ph03.jpg"alt=""></li>
<liid="img4"><imgsrc="img/ph04.jpg"alt=""></li>
</ul>
<script>
var cf = new Crossfader(newArray('img1', 'img2', 'img3', 'img4'), 2000, 3000);
</script>
</div>
</body>
</html>

Download Crossfader.js

CrossSlide-fade

必要なjQueryを読み込む

<scriptsrc="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<scriptsrc="js/jquery.cross-slide.min.js"></script>

IDセレクタ「slideshow」を設定

<divid="slideshow"></div>

CSSファイルにスライド表示の面積を指定する

#slideshow {
  width: 幅;
  height: 高さ;
}

head内にscriptを記述するか、script.jsを外部リンクする

<script>
  $(function(){
    $('#slideshow').crossSlide({
      sleep: 2,
      fade: 1
}, [
{ src: '画像１.jpg'},
{ src: '画像２.jpg'},
{ src: '画像３.jpg'},
{ src: '画像４.jpg'}
])
});
</script>

スライドショーの再生回数を１回にする

loop: 1

Static cross-fade

$('#slideshow').crossSlide({
  sleep: 2,
  fade: 1
}, [
  { src: '画像１.jpg' },
  { src: '画像２.jpg' },
  { src: '画像３.jpg' },
  { src: '画像４.jpg' }
]);

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTFf-8">
<title>JavaScriptでスライド（１）</title>
<scriptsrc="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<scriptsrc="js/jquery.cross-slide.min.js"></script>
<style>
body {
	text-align: center;
}
#slideshow {
  width: 400px;
  height: 300px;
	margin: 100px auto 0 auto;
}
</style>
</head>
<body>
<divid="slideshow"></div>
<script>
  $(function(){
    $('#slideshow').crossSlide({
      sleep: 3,
      fade: 2
}, [
{ src: 'images/01.jpg'},
{ src: 'images/02.jpg'},
{ src: 'images/03.jpg'},
{ src: 'images/04.jpg'},
{ src: 'images/05.jpg'}
])
});
</script>
</body>
</html>

Slide and cross-fade

大きい写真をずらす

$('#slideshow').crossSlide({
  speed: 45,
  fade: 1
}, [
  { src: '画像１.jpg', dir: 'up'   },
  { src: '画像２.jpg', dir: 'down' },
  { src: '画像３.jpg', dir: 'up'   },
  { src: '画像４.jpg', dir: 'down' }
]);

Ken Burns effect

$('#slideshow').crossSlide({
  fade: 1
}, [
  {
    src:  '画像１.jpg',
    alt:  '画像１',
    from: '100% 80% 1x',
    to:   '100% 0% 1.7x',
    time: 3
  }, {
    src:  '画像２.jpg',
    alt:  '画像２',
    from: 'top left',
    to:   'bottom right 1.5x',
    time: 2
  }, {
    src:  '画像３.jpg',
    alt:  '画像３',
    from: '100% 80% 1.5x',
    to:   '80% 0% 1.1x',
    time: 2
  }, {
    src:  '画像４.jpg',
    alt:  '画像４',
    from: '100% 50%',
    to:   '30% 50% 1.5x',
    time: 2
  }
], function(idx, img, idxOut, imgOut) {
  if (idxOut == undefined)
  {
    // starting single image phase, put up caption
    $('div.caption').text(img.alt).animate({ opacity: .7 })
  }
  else
  {
    // starting cross-fade phase, take out caption
    $('div.caption').fadeOut()
  }
});

Ken Burns variant

$('#slideshow').crossSlide({
  fade: 1,
  variant: true,
  easing: 'easeInOutQuad'
}, [
  // as above
]);

jquery.cross-slide.js : 画像の自動スライド表示（フェード効果）