이미지 반복 롤링 배너

이미지 반복 롤링 배너 만들기

텍스트가 배너처럼 가로로 움직이는 배너를 이미지로 바꾼 이미지 배너 입니다.

먼저 실행 결과부터 보겠습니다.

예제코드는 글 마지막에 압축파일로 올려드렸습니다. 필요하신분은 확인 후 써주셔도 무방합니다.

사진처럼 영화 포스터 이미지 8개가 반복적으로 롤링 되면서 이동하는 예제입니다.

x축으로 이동하면서 지나간 이미지는 다시 뒤로 이동해서 연결되는 이미지 롤링 배너입니다.

하단 버튼 처럼 MOVE STOP, MOVE START 버튼으로 해당 롤링 애니메이션을 정지, 또는 다시 재시작 할 수 있습니다.

추가로 포스터 위에 마우스를 올려 놓으면 롤링 애니메이션이 정지되는 기능도 추가했습니다.

1. HTML 소스코드

롤링이 되는 부분은 Line 14 Div 부분입니다. 

Line 15 ~ 21은 영화 포스터 컨텐츠 입니다. 

A태그로 감싸 있으며 호버가 되면 롤링 이미지가 정지되거나 선택 할 경우에 사용 가능하도록 하였습니다.

2. CSS 소스코드

롤링의 영역은 position:relative로 잡고 overflow:hidden을 CSS 속성으로 주워줘야 합니다.

그리고 롤링 영역안의 컨텐츠 a 태그의 css 속성은 position:absolute로 잡아 줍니다.

그 이외의 부분은 예제 화면을 다듬기 위한 CSS 소스코드임으로 주의깊게 보실 필요는 없습니다.

3. Script 소스 코드

제일 중요한 스크립스 소스코드입니다.

Line 8 ~ Line 12 : 초기 영화 포스터 컨텐츠들을 나열해주는 소스코드입니다.

Line 19 ~ Line 20 : A태그 호버시 애니메이션 정지, A태그 언호버시 애니메이션 시작 되는 소스코드입니다.

Line 22 ~ Line 39 : 애니메이션이 시작하면 작동하는 함수

Line 41 ~ Line 43 : 애니메이션이 종료되는 함수, MOVE STOP 또는 호버시에 작동되는 함수입니다.

핵심인 StartAction 함수를 보겠습니다.

Line24 ~ Line26 부분이 영화포스터 콘텐츠들을 왼쪽으로 1px씩 이동시킵니다. 

그리고 first_content, last_content 기준을 잡는게 중요합니다.

왜냐면 first_content가 화면에서 사라지게 되면 last_content의 뒷부분으로 이동시켜줘야하기 때문입니다.

해당 기능은 Line 31 ~ Line 37부분에서 진행하게 됩니다.

물론 어려운 코드가 아니라 이쯤에서 해당 설명을 마치겠습니다. 더 궁금하신 사항은

댓글로 남겨주시면 감사하겠습니다.

blog2.zip

#이미지롤링#이미지배너#이미지롤링배너#이미지반복롤링배너