[jQuery] 반응형 슬라이드 배너 만들기

슬라이드 배너를 구현하던 중 반응형 UI를 적용하기 위해 여러가지 방법을 시도했지만, 창의 크기 변화에 즉각적으로 반응하도록 구현하는 것이 쉽지 않았다. 해결을 위해 서치를 하던 중 좋은 방법을 찾았는데, 바로 css animation keyframe을 이용하는 방법이다.

 

@keyframes을 이용해 진행율 별 animation을 다르게 지정한다.

전체를 10초 동안 진행하되 무한반복 옵션에서(10s infinite) 배너로 추가할 이미지가 4개인 경우, 이미지를 2초동안 보여주며, 다음 이미지로 넘어가는 시간은 0.5초로 잡을 수 있다.

 

이 경우,

0%~20% margin-left:0 [이미지 1을 2초간 보여준다.]

20%~25% margin-left:-100% [이미지 1에서 2로 넘어간다(0.5초 동안)]

25%~45% margin-left:-100% [이미지 2를 2초간 보여준다.]

...

와 같이 진행된다.

 

이미지 하단에 있는 원형 버튼을 이용해 인덱스에 해당하는 이미지로 전환할 수 있는데, animation이 적용되고 있어서 jQuery로 css 변경을 하더라도 적용이 되지 않는다. 이미지 전환을 위해서 $('.banner').css('animation','none');을 이용해 animation을 잠시 해제한 후, css margin-left를 이용해 해당 이미지의 위치로 이동한다.

 

이때, 이미지 이동 시에도 유사한 효과를 주기 위해서 .banner에 아래와 같은 transition을 설정한다.

/*기본 전환 animation을 위한 설정*/
-webkit-transition: all 0.5s cubic-bezier(1, .01, .32, 1);
-moz-transition: all 0.5s cubic-bezier(1, .01, .32, 1);
-o-transition: all 0.5s cubic-bezier(1, .01, .32, 1);
-ms-transition: all 0.5s cubic-bezier(1, .01, .32, 1);
transition: all 0.5s cubic-bezier(1, .01, .32, 1);

이미지 이동 시에 0.5초 동안 부드럽게 넘어가는 효과를 줄 수 있다.

해당 transition이 끝나고 난 이후 animation을 재할당하기 위해서 1초 간의 delay를 주기로 한다.

delay를 주지 않으면, transition이 완전히 수행되기 전에 animation이 수행되기 때문에, transition 적용 확인이 어렵다.

 

또한, 원형 버튼도 이미지와 함께 순환하기 위해 setInterval를 이용해 2.5초마다 다음 원형 버튼으로 active class 설정을 넘긴다.