줌 인/아웃 전환 효과가있는 전체 화면 슬라이더

Question

나는 이런 뜻입니다. GSAP, Transit 또는 VelocityJS와 같은 라이브러리로 그 결과를 얻으려면 어떻게해야합니까? 사전 :)에서

http://www.echocapital.com/

감사

원인은 당신이 필요로하는 모든 CSS 및 일부 JS jQuery와의 비트가 몰라 GSAP와 속도
에 대해

Answer 1

, 나는 당신이 바닐라에서 쉽게 아래에 다시 작성할 수 있습니다 의미 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>