코드펜 https://codepen.io/gamza/pen/GmYLgV
▣ 구상
- 컨텐츠가 좌측으로 계속해서 이동하는 슬라이드 애니메이션
- 컨텐츠가 뷰포트를 한방향으로 순환하며 반복
▣ 조건
➊ 컨텐츠의 좌측이동
➋ 순환
▣ 준비
· 컨텐츠에 들어갈 이미지 2장 ( 200px * 200px )
◆ 레이아웃 ( html, css )
1. viewport 가 될 div.container 를 추가합니다.
2. viewport 내부에 이미지( <img> ) 를 자식요소로 가진 컨텐츠( div.content ) 2개 추가
3. viewport 의 크기를 컨텐츠 1개의 크기에 맞춥니다.
4. 컨텐츠를 뷰포트의 동일 선상에 위치시키기 위해 float : left 시키고
5. viewport 의 범위를 초과한 컨텐츠가 흘러내리지 않도록 컨텐츠에 직계 부모요소를 추가하여
두 컨텐츠의 넓이를 합친 width값을 적용합니다.
● html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <body> <div class="container"> <div class="content_box"> <div class="content"> <img src="이미지1주소" alt="이미지1" /> </div> <div class="content"> <img src="이미지2주소" alt="이미지2" /> </div> </div> </div> </body> |
● css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .container{ overflow:hidden; width:200px;height:200px; margin:100px auto; border:3px dotted salmon;}.content_box{ height:100%; width:200%;}.content{ float:left; width:50%; height:100%; box-sizing:border-box;} |
◆ 기능( jquery )
1. 첫째 컨텐츠를 좌측으로 이동시킵니다.
2. 애니메이션을 마친 후 "첫째 컨텐츠" 를 뒤로 보냅니다.
( 자연히 "둘째 컨텐츠" 는 "첫째 컨텐츠" 가 됩니다. )
3. 1,2 번을 순회시킵니다.
● javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | $(function(){ var $move_width = parseInt( $('.content').css('width') ); // 이동할 수치 계산 var $content_box = $('.content_box'); // 컨텐츠 박스 변수저장 // 루프 (순환) function ani_1(){ animation() setTimeout( ani_2, 1000 + 10 ); // 1000 + 10( 여유 ) 초 뒤, function ani_2() 로 이동 }; function ani_2(){ animation() setTimeout( ani_1, 1000 + 10 ); // 1000 + 10( 여유 ) 초 뒤, function ani_1() 로 이동 }; ani_1(); // function ani_1() 로 루프 start // 로직 function animation(){ $content_box.children().first().stop() .animate({ marginLeft : - $move_width }, 1000, "linear", function (){ $(this).appendTo( $(this).parent() ).css({ marginLeft : 0}); }); }}); |
