코드펜 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
<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
.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
$(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});
});
}
});
