jQueryで拡大しながらフェードインで画像切り替え

「欅BodyTherapistSchool」の制作に携わった際に使用したスライドショウの実装方法をメモ。
拡大しながらのフェードインなので、画像を切り替えるのみよりも躍動感が感じられる。

HTML

<figure id="mainimage">
<ul class="swiper-slide">
<li class="active"><img src="画像URL"></li>
<li><img src="画像URL"></li>
<li><img src="画像URL"></li>
</ul>
<div class="inner">
<h2>キャッチコピーを記載/h2>
</div>
</figure>

<script>
$(function(){
	slideSwitch();
	setInterval("slideSwitch()", 9500 );
	//9500は次の画像に切り替わるまでのミリ秒
});
</script>

CSS

#mainimage{
	width: 100%;
	height: 80vh;
	margin: 0 0 30px;
	position: relative;
	overflow: hidden; }
#mainimage .swiper-slide{
	width: 100%;
	height: 80vh;
	position: absolute;
	overflow: hidden; }
#mainimage .swiper-slide li{
	background: #fff;
	width: 100%;
	height: 80vh;
	position: absolute;
	top: 0;
	left: 0; }
#mainimage .inner{
	margin: 20vh 0 0 50%;
	color: #fff;
	position: relative;
	z-index: 10; }
#mainimage .swiper-slide li img{
	width: 100%;
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0; }
#mainimage .swiper-slide li.active{
	z-index:9; }
#mainimage .swiper-slide li.last-active{
	z-index:8; }
#mainimage .swiper-slide li::before{
	background: url(../image/top/mask.png);
	content: "";
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1; }

jQuery

function slideSwitch(){
	var $active = $('#mainimage ul li.active');
	if($active.length == 0 ) $active = $('#mainimage ul li:last');
	var $next = $active.next().length ? $active.next() : $('#mainimage ul li:first');
	if($(window).width() >= 980){
		$active.animate({'width':'110%', 'left':'-5%'}, 7000).delay(1000).queue(function(){
			$active.find('img').animate({'opacity':'0'}, 1000, function(){
				$active.addClass('last-active');
				$next.addClass('active');
				$active.find('img').css({'opacity':'1.0'});
				$active.removeClass('active last-active').css({'width':'100%', 'left':'0'}).dequeue();
			});	
		});
	}else{
		$active.animate({'height':'70vh', 'top':'-5vh'}, 7000).delay(1000).queue(function(){
			$active.find('img').animate({'opacity':'0'}, 1000, function(){
				$active.addClass('last-active');
				$next.addClass('active');
				$active.find('img').css({'opacity':'1.0'});
				$active.removeClass('active last-active').css({'height':'60vh', 'top':'0'}).dequeue();
			});	
		});
	}
 }

• 東京・練馬の整体・美容矯正・ヘッドマッサージの欅BodyTherapistSchool