Slider Structure w/transition transform
0
Slider를 구현한다.
pure CSS로 구현할려고 하는데 헷갈린다.
아래는 정리된 코드이다. 기억 메모
─Slider 슬라이더 영역을 설정
└ areaBeShown 컨텐츠가 보여지는 영역 (오버되는 컨텐츠는 감춘다. overflow:hidden)
└ movingStage 좌우로 움직이는 영역 + 모든 컨텐츠가 표시된다.
예)
슬라이더 영역 {width : 1000px;}
컨텐츠가 보여지는 영역 {width: 500px; overflow : hidden;}
좌우로 움직이는 영역 {width: 1500px;} // 500px를 넘은 곳은 감춰진다.
그러면 애니메이션은 어디에 설정하나?
움직이는 객체에 transition 옵션을 설정한다.
transition : all or transform 5s ease-in-out;
이상.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.slider {
width: 1000px;
border: 1px red solid;
}
.areaBeShown {
width: 500px;
overflow: hidden;
}
.movingState {
display: flex;
transition: transform 2s ease;
transform: translateX(100px);
}
.movingState:hover {
transform: translateX(-100px);
}
.box {
margin: 5px;
width: 100px;
height: 100px;
background-color: crimson;
transition: transform 1s ease-in-out;
}
</style>
</head>
<body>
<div class="div">CSS애니메니션</div>
<div class="slider">
<div class="areaBeShown">
<div class="movingState">
<div>
<div class="box"></div>
</div>
<div>
<div class="box"></div>
</div>
<div>
<div class="box"></div>
</div>
<div>
<div class="box"></div>
</div>
<div>
<div class="box"></div>
</div>
<div>
<div class="box"></div>
</div>
</div>
</div>
</div>
</body>
</html>
React, React-Native https://darcyu83.netlify.app/