全屏滑盖/缩小过渡效果放大 [英] Full screen slider with zoom in/out transition effect

问题描述

我的意思是这样的。我怎样才能获得像GSAP，过境或VelocityJS？

库，结果

http://www.echocapital.com/

在此先感谢：）

解决方案

说不上约GSAP和Velocity结果
因为所有你需要的是一个有点CSS和一些JS或jQuery的，我的意思是，你可以在香草JS改写容易如下：

\r

\r

变量$加仑= $（＃长廊），$ IMG = $加仑.find（＆GT;的div），\r
    N = $ img.length，I = 0，T;\r
\r
$ img.eq（I）.addClass（开）;\r
\r
（函数循环（）{\r
  T = setTimeout的（函数（）{\r
    $ img.removeClass（开）当量（ⅰ++％n）的.addClass（开）。\r
    循环（）;\r
  }，3000）;\r
}（））;

\r

* {保证金：0;}\r
HTML，车身高度{：100％;背景：＃444;}\r
＃画廊{\r
  溢出：隐藏;\r
}\r
＃画廊，\r
#gallery＆GT; DIV {\r
  位置：绝对的;\r
  顶部：0;左：0;底部：0;右：0;\r
}\r
#gallery＆GT; DIV {\r
  背景：无50％/套;\r
  变换：规模（0.94）;\r
  过渡：0.8秒;\r
  不透明度：0;\r
}\r
#gallery＆GT; div.on {\r
  过渡延迟：0.1秒;\r
  变换：规模（1）;\r
  不透明度：1;\r
}

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/jquery/2.1.1/jquery.min.js\"></script>\r
＆LT; D​​IV ID =画廊＆GT;\r
    ＆LT; D​​IV的风格=背景图片：URL（// placehold.it/800x600/daa&text=1)\"></div>\r
    ＆LT; D​​IV的风格=背景图片：URL（// placehold.it/800x600/dad&text=2)\"></div>\r
    ＆LT; D​​IV的风格=背景图片：URL（// placehold.it/800x600/ada&text=3)\"></div>\r
  ＆LT; / DIV＆GT;

\r

\r

\r

I mean something like this. How can I obtain that result with a library like GSAP, Transit or VelocityJS?

http://www.echocapital.com/

Thanks in advance :)

解决方案

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>

这篇关于全屏滑盖/缩小过渡效果放大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！