[워크식스] 웹디자인기능사 실기 (좌로 흘러가는 슬라이드 편)

Notice

Recent Posts

Tags more

Archives

관리 메뉴

그냥 개발자 블로그

퍼블리싱팁

마음이파파 2017. 8. 18. 00:30

'좌에서 우로 흘러가는 슬라이드를 어떻게 만들어야 하나요?' 라는 질문이 있어서 이번 글과 영상을 제작하게 되었습니다.

jquery를 이용한 슬라이드를 제작할때 우선 원리를 생각해봐야 합니다. 동작하는 방식에 따라 제작 방법이 모두 다르기 때문 입니다.

jquery 슬라이드 제작에는 논리적인 사고가 필요 합니다. 우선 생각의 정리가 필요 합니다.

이번 경우는 container 안에 div를 float으로 일렬로 나열시켜서 동작을 시켜 볼겁니다.

1. 슬라이드가 시작되기 전에 3번째 div를 1번째 div 앞으로 가져와서 배너의 순서를 3,1,2 로 바꿔준다.

2. 슬라이드가 동작되면 3번째 div에 margin-left에 -(마이너스)값을 줘서 좌측으로 0.6초간 서서히 이동시킨다. (나머지 1,2는 자동으로 딸려온다.)

3. 1번째 div가 화면에서 사라지면 3번째 div를 맨뒤로 이동 시킨다. (1,2,3으로 정렬됩니다.)

4. 이동시킨 3번째 div의 스타일을 원상복귀 시켜준다.

5. 2~4 의 과정을 2초마다 반복 시킨다.

아래 영상은 위 내용을 바탕으로 실제 슬라이드를 제작하는 과정을 녹화하였습니다.

(유튜브에서 더욱 큰 화면으로 보실 수 있습니다.)

샘플코드

sample.zip

'퍼블리싱팁' Related Articles