具有放大/缩小过渡效果的全屏滑块答案

【问题标题】：Full screen slider with zoom in/out transition effect具有放大/缩小过渡效果的全屏滑块
【发布时间】：2015-01-24 18:19:01
【问题描述】：

我的意思是这样的。如何使用 GSAP、Transit 或 VelocityJS 等库获得该结果？

http://www.echocapital.com/

提前致谢:)

【问题讨论】：

标签： javascript animation slider velocity.js gsap

【解决方案1】：

不知道 GSAP 和 Velocity
因为你只需要一点 CSS 和一些 JS 或 jQuery，我的意思是你可以在 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>

【讨论】：