큰 그래픽의 여러 개별 부분에 애니메이션을 적용하는 아이디어

Question

페이지 상단에 큰 그래픽이 있습니다. 각 로고가 그래픽의 작은 부분에 위치하는 일련의 로고입니다. 새로운 로고를 4 ~ 5 초 간격으로 회전시키고 각 지점마다 3 ~ 4 개의 로고를 반복하고 싶습니다.

각 로고의 애니메이션은 이미지의 특정 부분에서 다른 로고 대신 하나의 로고가됩니다. 위에서부터 빠르고 매끄러운 슬라이드가 이상적입니다.

귀하의 선택 방법은 무엇입니까?

감사합니다. 오스틴

Answer 1

다음은 Greensock을 사용하는 솔루션입니다. http://jsfiddle.net/brian_griffin/zquLC/ 나는 그것이 당신이 요구 한 것과 정확히 일치한다고 믿습니다. 완벽한 루프를 만들려면 첫 번째 로고를 두 번 포함해야합니다.

이것은 CSS3 애니메이션을 사용하여 수행 할 수도 있지만 Greensock은 구형 브라우저에서 지원됩니다.

(의사) HTML

<div id="container"> 
    <div class="logo" id="firstlogo"> 
     <img 1/> 
     <img 2/> 
     <img 3/> 
     <img 1/> 
    </div> 
    <div class="logo" id="secondlogo">ditto</div> 
    <div class="logo" id="thirdlogo">ditto</div> 
</div> 

CSS

#container { 
    height:100px; 
    overflow:hidden; 
} 
.logo { 
    width:100px; 
    height:400px; 
    float:left; 
    position:relative; 
    top: -300px; 
} 
img { 
    width:100px; 
    height:100px; 
    position:relative; 
    display:block; 
} 

JS

var spd = 1.5 //seconds 
var tl = new TimelineMax({repeat:-1}) 
tl.to('firstlogo', spd, {top:"+=0px"}) 
tl.to('firstlogo', spd, {top:"+=100px"}) 
tl.to('firstlogo', spd, {top:"+=0px"}) 
tl.to('firstlogo', spd, {top:"+=100px"}) 
tl.to('firstlogo', spd, {top:"+=0px"}) 
tl.to('firstlogo', spd, {top:"+=100px"}) 

Answer 2

는 Greensock animation platform (GSAP)에서보세요. 원래 ActionScript 용으로 개발되었으며 현재 JavaScript로 포팅 된 트윈 라이브러리입니다. 지연, 스 태거, 반복, 반복, 역전 등의 지원으로 믿을 수 없을 정도로 강력하며 지난 4 ~ 5 년 동안 Flash의 애니메이션 업계 표준이었습니다.

타임 라인 기능은 앞서 언급 한 애니메이션 유형을 절대적인 산들 바람에 맞춰 구성하기 때문에 특히 흥미로울 것입니다. 예를 들어, 개별 애니메이션 컬렉션을 그룹화하여 단일 애니메이션 인 것처럼 반복 재생하고 반복하고 반복 할 수 있습니다.