株式会社エキスパートソフトウェア

ページを読みこみ中・・・

 Ken Burns Carousel - Slideshow 
WebWeb ComponentJavascriptSlideshowCarousel


  概要

Ken Burns Carousel はLibrary javascriptで写真が自動変わります。複数を写真があるとき、写真がズームや左右上下にゆっくりとアニメーションしながら切り替えることで、写真がきれいになります。



  実装方法

1.KenBurnsCarouselのソースをダウンロードして、ソースでken-burns-carousel.min.jsのファイルがある。

2.必要なファイルをプロジェクにコピーする

 ・ken-burns-carousel.min.js

3.Ken Burns Carouselを使うHTMLファイルに以下を記述する

 ・<head>内に書く

  <script src="ken-burns-carousel.min.js"></script>





  使い方

プロジェクトのテンプレにKenBurnCarouselの設定:



1.テンプレにKenBurnsCarouselのAttributeを入力して、

KenBurnsCarouselはオプションがある、 デフォルト:スライドは2.5秒のフェードで20秒に設定されている。

2.オプションもあり(下記より)



  オプション:Slide and Fade Duration

オプション:Slide and Fade Duration

SlideとFade DurationがHTMLのAttributeで易しくオーバーライトされる。



  オプション:Animation Direction

オプション:Animation Direction

Animation Directionが"normal, reverse, random"です。



  オプション:Animation Names

オプション:Animation Names

ほかの:

・ken-burns-bottom-right

・ken-burns-top-right

・ken-burns-top-left

・ken-burns-bottom-left

・ken-burns-middle-left

・ken-burns-middle-right

・ken-burns-top-middle

・ken-burns-bottom-middle

・ken-burns-center



  オプション:Filters

オプション:Filters

CSSにvariableの--img-filterで写真のfilterが変更される。






 Ken Burns Carousel -- Github

 Ken Burns Carousel -- Example


Facebookも情報発信中!
広告