@Work Note

 HOME   JS:縮小しながら全画面写真

JS:縮小しながら全画面写真

縮小していくアニメーション演出をくわえながらページの全体を写真で覆う。
Jqueryの「Vega2」を利用。公式サイト

<script src="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.4/vegas.min.js"></script>
<!--<script src="/commons/js/vegas.min.js"></script>-->
<script>
var windowwidth = window.innerWidth || document.documentElement.clientWidth || 0;
if (windowwidth > 768){
	var responsiveImage = [//PC用の画像
		{ src: './img/img_02.jpg'},
		{ src: './img/img_01.jpg'},
		{ src: './img/img_03.jpg'},
		{ src: './img/img_04.jpg'},
		{ src: './img/img_05.jpg'}
	];
} else {
	var responsiveImage = [//タブレットサイズ(768px)以下用の画像
		{ src: './img/img_02_sp.jpg'},
		{ src: './img/img_01_sp.jpg'},
		{ src: './img/img_03_sp.jpg'},
		{ src: './img/img_04_sp.jpg'},
		{ src: './img/img_05_sp.jpg'}
	];
}

	$('#slider').vegas({
		overlay: true,//画像の上に網線やドットのオーバーレイパターン画像を指定。
		transition: 'blur',//切り替わりのアニメーション。http://vegas.jaysalvat.com/documentation/transitions/参照。fade、fade2、slideLeft、slideLeft2、slideRight、slideRight2、slideUp、slideUp2、slideDown、slideDown2、zoomIn、zoomIn2、zoomOut、zoomOut2、swirlLeft、swirlLeft2、swirlRight、swirlRight2、burnburn2、blurblur2、flash、flash2が設定可能。
		transitionDuration: 2000,//切り替わりのアニメーション時間をミリ秒単位で設定
		delay: 10000,//スライド間の遅延をミリ秒単位で。
		animationDuration: 20000,//スライドアニメーション時間をミリ秒単位で設定
		animation: 'kenburns',//スライドアニメーションの種類。http://vegas.jaysalvat.com/documentation/transitions/参照。kenburns、kenburnsUp、kenburnsDown、kenburnsRight、kenburnsLeft、kenburnsUpLeft、kenburnsUpRight、kenburnsDownLeft、kenburnsDownRight、randomが設定可能。
		slides: responsiveImage,//画像設定を読む
	  });
</script>