728x90
애니메이션04
오늘은 아래와 같이 걸어가는 애니메이션을 만들어 보았습니다. 캐릭터가 걸어서 앞으로 나아가는 것처럼 보이지만, 사실은 뒤의 배경이 움직여서 캐릭터가 걸어나가는 것처럼 보이는 것입니다.
HTML
<div class="sample">
<div class="timing step">
<div class="stepbox"></div>
<span class="stepBtn">
<a href="#" class="stepBtnStart">Start</a>
<a href="#" class="stepBtnStop">Stop</a>
</span>
</div>
</div>
CSS
.step {
height: 700px;
background: #18d351;
position: relative;
}
.step .stepbox {
width: 800px; //사진의 너비
height: 600px;
background: url(../../animation/img/walking.jpg);
border-radius: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
animation: ani 1s steps(24, start) infinite; //총 프레임 수 24장
}
.step .stepbox.start {
animation-play-state: running;
}
.step .stepbox.stop {
animation-play-state: paused;
}
@keyframes ani {
0% {
background-position: 0 0;
}
100% {
background-position: -19200px 0; //사진의 너비(800) * 총 프레임 수(24장)
}
}
.stepBtn {
position: absolute;
left: 15px;
top: 20px;
}
.stepBtn a {
background: #e16162;
color: #fff;
padding: 10px;
margin: 3px;
border-radius: 3px;
}
jquery
$(".stepBtnStart").click(function (e) {
e.preventDefault();
$(".stepbox").removeClass("stop").addClass("start");
});
$(".stepBtnStop").click(function (e) {
e.preventDefault();
$(".stepbox").removeClass("start").addClass("stop");
});
728x90
반응형
'CSS' 카테고리의 다른 글
| [CSS]CSS intro (5) | 2022.09.07 |
|---|---|
| [CSS]SVG intro (4) | 2022.09.07 |
| [CSS]SVG animation (4) | 2022.09.07 |
| [CSS]애니메이션03 (2) | 2022.09.02 |
| [CSS]애니메이션02 (5) | 2022.08.29 |
댓글