2017-08-03 47 views
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> -->

`

回答