本文介绍了具有放大/缩小过渡效果的全屏滑块的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！
问题描述
我的意思是这样的.如何使用 GSAP、Transit 或 VelocityJS 等库获得该结果?
I mean something like this. How can I obtain that result with a library like GSAP, Transit or VelocityJS?
http://www.echocapital.com/
提前致谢:)
推荐答案
不知道 GSAP 和 Velocity
因为你只需要一点 CSS 和一些 JS 或 jQuery，我的意思是你可以用 vanilla JS 轻松地重写以下内容:
Dunno about GSAP and Velocity
Cause all you need is a bit of CSS and some JS or jQuery, I mean you can rewrite easily the below in vanilla JS:
var $gal = $("#gallery"), $img = $gal.find("> div"),
n = $img.length, i = 0, t;
$img.eq(i).addClass('on');
(function loop() {
t = setTimeout(function(){
$img.removeClass("on").eq(i++%n).addClass("on");
loop();
}, 3000);
}());*{margin:0;}
html, body{height:100%;background:#444;}
#gallery{
overflow:hidden;
}
#gallery,
#gallery > div{
position:absolute;
top:0; left:0; bottom:0;right:0;
}
#gallery > div{
background: none 50% / cover;
transform:scale(0.94);
transition:0.8s;
opacity: 0;
}
#gallery > div.on{
transition-delay: 0.1s;
transform:scale(1);
opacity: 1;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gallery">
<div style="background-image:url(//placehold.it/800x600/daa&text=1)"></div>
<div style="background-image:url(//placehold.it/800x600/dad&text=2)"></div>
<div style="background-image:url(//placehold.it/800x600/ada&text=3)"></div>
</div>这篇关于具有放大/缩小过渡效果的全屏滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！