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

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

クロスフェード

JavaScriptクロスフェード

  • jQueryのバージョンを確認する
  • APIかダウンロードかを決める
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

Brand Spanking New


<script type="text/javascript">
window.onload = function() {
var cf = new Crossfader( new Array('cf1','cf2','cf3', 'cf4', 'cf5'), 500, 2000 );
}
</script>
  • 500はフェードエフェクトの時間(0.5秒)
  • 2000は各画像の表示時間(2秒)


http://webizm.jp/felica/menu_imgreplace/index2.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="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>
<script src="js/bsn.js"></script>
</head>
<body>
<div id="container">
<ul id="img_fader">
<li id="img1"><img src="img/ph01.jpg" alt=""></li>
<li id="img2"><img src="img/ph02.jpg" alt=""></li>
<li id="img3"><img src="img/ph03.jpg" alt=""></li>
<li id="img4"><img src="img/ph04.jpg" alt=""></li>
</ul>
<script>
  var cf = new Crossfader( new Array('img1', 'img2', 'img3', 'img4'), 2000, 3000 );
</script>
</div>
</body>
</html>


Download Crossfader.js


CrossSlide-fade

  • 必要なjQueryを読み込む
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/jquery.cross-slide.min.js"></script>
<div id="slideshow"></div>
  • CSSファイルにスライド表示の面積を指定する
#slideshow {
  width: 幅;
  height: 高さ;
}
  • head内にscriptを記述するか、script.jsを外部リンクする
<script>
  $(function() {
    $('#slideshow').crossSlide({
      sleep: 2,
      fade: 1
    }, [
      { src: '画像1.jpg' },
      { src: '画像2.jpg' },
      { src: '画像3.jpg' },
      { src: '画像4.jpg' }
    ])
  });
</script>
スライドショーの再生回数を1回にする


loop: 1


Static cross-fade

$('#slideshow').crossSlide({
  sleep: 2,
  fade: 1
}, [
  { src: '画像1.jpg' },
  { src: '画像2.jpg' },
  { src: '画像3.jpg' },
  { src: '画像4.jpg' }
]);
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTFf-8">
<title>JavaScriptでスライド(1)</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="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>
<div id="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: '画像1.jpg', dir: 'up'   },
  { src: '画像2.jpg', dir: 'down' },
  { src: '画像3.jpg', dir: 'up'   },
  { src: '画像4.jpg', dir: 'down' }
]);

Ken Burns effect

$('#slideshow').crossSlide({
  fade: 1
}, [
  {
    src:  '画像1.jpg',
    alt:  '画像1',
    from: '100% 80% 1x',
    to:   '100% 0% 1.7x',
    time: 3
  }, {
    src:  '画像2.jpg',
    alt:  '画像2',
    from: 'top left',
    to:   'bottom right 1.5x',
    time: 2
  }, {
    src:  '画像3.jpg',
    alt:  '画像3',
    from: '100% 80% 1.5x',
    to:   '80% 0% 1.1x',
    time: 2
  }, {
    src:  '画像4.jpg',
    alt:  '画像4',
    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
]);