tweenmaxを使用してスライドショーを作成してみたのでその備忘録です。
もっといろいろ複雑なことはできると思うのですが私の範囲ではこれが限界！
バージョンアップできたらいろいろ改良版をまたこのブログに上げようと思います。
では早速デモから！
See the Pen tweenmax slider by sayuri (@giraffeweb) on CodePen.light
ソースはこちら。
CSSなどは好きに触ってくださいね。
最初にJSとTweenMaxを読み込むのを忘れずに！
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<section class="mainSlider">
<div class="sliderWrap">
<div class="mainvisualSlider">
<div class="slides">
<div class="slide is-active" data-index="1">
<a href="" class="mslideLink">
<div class="mslideImg">
<img src="https://i.postimg.cc/fk4VwQ6Z/02.jpg" alt="">
</div>
</a>
</div>
<div class="slide" data-index="2">
<a href="" class="mslideLink">
<div class="mslideImg">
<img src="https://i.postimg.cc/pdNMqXKP/05.jpg" alt="">
</div>
</a>
</div>
</div>
</div>
</div>
<div class="mvLower flexbox">
<div class="mvnav">
<ul class="mvnavList flexbox">
<li class="mvnavItem is-active flexbox">
<p><span class="number">01</span>スライド01</p>
<span class="pagenation"></span>
</li>
<li class="mvnavItem flexbox">
<p><span class="number">02</span>スライド02</p>
<span class="pagenation"></span>
</li>
</ul>
</div>
<div class="mvLink">
<ul class="mvlinkList flexbox">
<li class="mvlinkItem is-active" data-index="1">
<a href=""><i class="fas fa-arrow-right"></i><span>商品詳細</span></a>
</li>
<li class="mvlinkItem is-active" data-index="2">
<a href=""><i class="fas fa-arrow-right"></i><span>商品詳細02</span></a>
</li>
</ul>
</div>
</div>
</section>
$siteColor: #19A78E;
body {
margin: 0;
padding: 0;
}
ul {
padding: 0;
li {
list-style: none;
}
}
a {
display: block;
text-decoration: none;
color: #000;
}
img {
display: block;
width: 100%;
}
.flexbox {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
.fw {
flex-wrap: wrap;
}
// ここからスライドショーのCSS
.sliderWrap {
overflow: hidden;
position: relative;
width: 100%;
max-width: 1000px;
z-index: 1;
height: calc(100vh - 120px);
margin: auto;
.mainvisualSlider {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
.slides {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
.slide {
display: none;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
&.is-active {
display: block;
}
&.is-loaded {
opacity: 1;
}
}
}
.mslideLink {
position: relative;
display: block;
height: 100%;
}
}
.mslideImg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center;
z-index: 1;
background-size: cover;
image-rendering: optimizeQuality;
> img {
width: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
font-family: 'object-fit: cover;';
height: 100%;
-webkit-animation: bgimgzoom2 20s 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards 1;
animation: bgimgzoom2 20s 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards 1;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}
}
.mvLower {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-bottom: 1px solid #ddd;
-webkit-box-sizing: border-box;
box-sizing: border-box;
max-width:1000px;
margin: auto;
.mvnav {
width: auto;
height: 100%;
//margin-left: 50px;
}
.mvnavList {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
}
.mvnavItem {
position: relative;
color: #a7a7a7;
height: 100%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
-webkit-transition: .2s ease;
transition: .2s ease;
font-size: 14px;
border-top: 5px solid transparent;
p {
padding: 20px 0;
}
&:hover {
color: #222;
}
.number {
display: inline-block;
margin-right: 10px;
}
&+ .mvnavItem {
margin-left: 40px;
}
&.is-active {
color: $siteColor;
border-color: $siteColor;
.pagenation {
background-color: $siteColor;
}
}
&.disable {
pointer-events: none;
}
}
.mvLink {
margin-left: auto;
height: 100%;
margin-right: 40px;
width: 454px;
}
.mvlinkList {
position: relative;
height: 100%;
}
.mvlinkItem {
opacity: 0;
position: absolute;
right: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
tap-highlight-color: rgba(0, 0, 0, 0);
z-index: -1;
-webkit-transition: .4s ease;
transition: .4s ease;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
&.is-active {
opacity: 1;
z-index: 1;
}
}
a {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
}
(function() {
var slideshowDuration = 4000;
var slideshow=$('.mainSlider');
var firstSlide = $('.slide').eq(0);
function slideshowSwitch(slideshow,index,auto){
if(slideshow.data('wait')) return;
var slides = slideshow.find('.slide'); //slide
var pages = slideshow.find('.mvnavList');
var activeSlide = slides.filter('.is-active');
var activeSlideImage = activeSlide.find('.mslideImg');
var activeSlideNum = slides.index(activeSlide);
var newSlideNum = index;
var newSlide = slides.eq(index);
var newSlideImage = newSlide.find('.mslideImg');
//var newSlideContent = newSlide.find('.mslidecontent');
//var newSlideElements=newSlide.find('.caption > *');
if(newSlide.is(activeSlide))return;
newSlide.addClass('is-new');
var timeout=slideshow.data('timeout');
clearTimeout(timeout);
slideshow.data('wait',true);
var transition=slideshow.attr('data-transition');
if(transition=='fade'){
newSlide.css({
display:'block',
zIndex:2
});
newSlideImage.css({
opacity:0
});
TweenMax.to(newSlideImage,1,{
alpha:1,
onComplete:function(){
newSlide.addClass('is-active').removeClass('is-new');
activeSlide.removeClass('is-active');
newSlide.css({display:'',zIndex:''});
newSlideImage.css({opacity:''});
slideshow.find('.mvnavList').trigger('check');
slideshow.data('wait',false);
if(auto){
timeout=setTimeout(function(){
slideshowNext(slideshow,false,true);
},slideshowDuration);
slideshow.data('timeout',timeout);}}});
} else {
if(newSlide.index()>activeSlide.index()){
var newSlideRight=0;
var newSlideLeft='auto';
var newSlideImageRight='auto';
var newSlideImageLeft='auto';
var newSlideImageToRight=0;
var newSlideImageToLeft='auto';
//var newSlideContentLeft='auto';
//var newSlideContentRight=0;
var activeSlideImageLeft=-slideshow.width()/10;
} else {
var newSlideRight='';
var newSlideLeft=0;
var newSlideImageRight='auto';
var newSlideImageLeft='auto';
var newSlideImageToRight='';
var newSlideImageToLeft=0;
//var newSlideContentLeft=0;
//var newSlideContentRight='auto';
var activeSlideImageLeft=slideshow.width()/10;
}
newSlide.css({
display:'block',
width:0,
right:newSlideRight,
left:newSlideLeft
,zIndex:2
});
newSlideImage.css({
width:slideshow.width(),
right:newSlideImageRight,
left:newSlideImageLeft
});
/*newSlideContent.css({
width:slideshow.width(),
left:newSlideContentLeft,
right:newSlideContentRight
});*/
activeSlideImage.css({
left:0
});
TweenMax.set(activeSlideImage,{y:20,force3D:true});
TweenMax.to(activeSlideImage,1,{
left:activeSlideImageLeft,
ease:Power3.easeInOut,
onComplete: function(){
/*if (activeSlide.find('.mslidecontent_changeTxt').length) {
activeSlide.find('.mslidecontent_changeTxt').text("");
}*/
$('.typed-cursor').remove();
var index = $('div.slide.is-new').index();
var pages=$('.mvnavItem');
var link=$('.mvlinkList .mvlinkItem');
pages.removeClass('is-active');
pages.eq(index).addClass('is-active');
link.removeClass('is-active');
link.eq(index).addClass('is-active');
}
});
TweenMax.to(newSlide,1,{
width:slideshow.width(),
ease:Power3.easeInOut,
onComplete: function(){
//if (newSlide.find('.mslidecontent_changeTxt').length) {
//typeTxt('div.slide.is-new .mslidecontent_changeTxt', array[newSlideNum]);
//}
}
});
TweenMax.to(newSlideImage,1,{
right:newSlideImageToRight,
left:newSlideImageToLeft,
ease:Power3.easeInOut
});
TweenMax.staggerFromTo(activeSlideImage,0.8,{alpha:1,y:0},{alpha:1,y:0,ease:Power3.easeOut,force3D:true,delay:0.6},0.1,function(){
newSlide.addClass('is-active').removeClass('is-new');
activeSlide.removeClass('is-active');
newSlide.css({
display:'',
width:'',
left:'',
zIndex:''
});
newSlideImage.css({
width:'',
right:'',
left:''
});
/*newSlideContent.css({
width:'',
left:''
});
newSlideElements.css({
opacity:'',
transform:''
});*/
activeSlideImage.css({
left:''
});
// slideshow.find('.mvnavList').trigger('check');
slideshow.data('wait',false);
if(auto){
timeout=setTimeout(function(){
slideshowNext(slideshow,false,true);
},slideshowDuration);
slideshow.data('timeout',timeout);
}
});
}
}
function slideshowNext(slideshow,previous,auto){
var slides=slideshow.find('.slide');
var activeSlide=slides.filter('.is-active');
var newSlide=null;
if(previous){
newSlide=activeSlide.prev('.slide');
if(newSlide.length === 0) {
newSlide=slides.last();
}
} else {
newSlide=activeSlide.next('.slide');
if(newSlide.length==0)
newSlide=slides.filter('.slide').first();
}
slideshowSwitch(slideshow,newSlide.index(),auto);
}
function homeSlideshowParallax(){
var scrollTop=$(window).scrollTop();
if(scrollTop>windowHeight) return;
var inner=slideshow.find('.mainvisualSlider-inner');
var newHeight=windowHeight-(scrollTop/2);
var newTop=scrollTop*0.8;
inner.css({
transform:'translateY('+newTop+'px)',height:newHeight
});
}
$(function() {
$('.slide').addClass('is-loaded');
$('.mvnavList .mvnavItem').on('click',function(){
slideshowSwitch($(this).closest('.mainSlider'),$(this).index());
});
var timeout=setTimeout(function(){
slideshowNext(slideshow,false,true);
},slideshowDuration);
slideshow.data('timeout',timeout);
});
if($('.mainSlider').length > 1) {
$(window).on('scroll',homeSlideshowParallax);
}
}());