0
結合試圖acheive交錯淡出滑塊在http://css3.bradshawenterprises.com/cfimg/#cfimg3使用GSAP, 我能夠做動畫一張幻燈片不能用於其他幻燈片做,基本上很難合併時間表並錯開如何交錯和時間表在GSAP
代碼筆:https://codepen.io/shmdhussain/pen/MvjEom'
// instantiate TimelineMax
const tl = new TimelineMax({ repeat: -1 });
tl.to('.test', 2, {opacity:1, scale:1, ease: Power0.easeNone})
.to('.test', 4, {scale:1.5,ease: Power0.easeNone},)
.to('.test', 2, {opacity: 0, scale:1,scale:1, ease: Power0.easeNone});
img{
/* width:100%;
height:100%; */
position:absolute;
top:0;
left:0;
}
img:first-child{
position:relative
}
div{
width:400px;
height:200px;
overflow:hidden;
position:relative;
}
.test{
//opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<div>
<img src="http://via.placeholder.com/400x200" alt="">
<img class="test" src="https://www.skynewsarabia.com/web/images/2017/08/01/969105/400/200/1-969105.jpg" alt="bb">
<!-- <img class="test" src="https://www.skynewsarabia.com/web/images/2017/08/01/969022/400/200/1-969022.jpg" alt="bb">
<img class="test" src="https://www.skynewsarabia.com/web/images/2017/07/31/968732/400/200/1-968732.JPG" alt="bb"></div> -->
`