Walking 애니메이션

Walking 애니메이션

Code pen을 사용하여 커피잔이 걸어가는 애니메이션을 만들었습니다.

---

HTML

HTML 영역입니다. 애니메이션 백그라운드 영역을 설정하고 내부에 이미지와 시작/정지 영역을 설정합니다.

<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>

CSS

이미지는 bg url을 사용하였습니다. 포토샵을 통하여 800px * 600px 크기의 32개 이미지를 일렬로 설정하고 jpg로 저장합니다.
이미지의 위치는 position과 transform으로 잡아주었고, 1초 단위로 1개씩 이미지가 무한정 지나가도록 애니메이션 설정을 해줍니다.
배경이미지가 움직이지 않도록 background-position으로 고정하여줍니다.

.step {
    height: 700px;
    background: #ffe8d9;
    position: relative;
}

.step .stepbox {
    width: 800px;
    height: 600px;
    background: url(https://raw.githubusercontent.com/sukjun2/coding2/main/animation/img/ani1.jpg);
    border-radius: 0;
    position: absolute;
    left: 50%;
    top: 51%;
    transform: translate(-50%, -50%);
    animation: ani 1s steps(32, start) infinite;
}

.step .stepbox.start {
    animation-play-state: running;
}

.step .stepbox.stop {
    animation-play-state: paused;
}

@keyframes ani {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -25600px 0;
    }
}

.stepBtn {
    position: absolute;
    left: 15px;
    top: 20px;
}

.stepBtn a {
    background: #e16162;
    color: #fff;
    padding: 10px;
    margin: 3px;
    border-radius: 3px;
}

Javascript

Start버튼과 Stop버튼에 클래스 추가/삭제 이벤트를 작성합니다.
Start버튼 클릭시 stop클래스를 제거하고 start클래스를 추가합니다. Stop버튼은 반대겠죠?

$(".stepBtnStart").click(function (e) {
    e.preventDefault();
    $(".stepbox").removeClass("stop").addClass("start");
});
$(".stepBtnStop").click(function (e) {
    e.preventDefault();
    $(".stepbox").removeClass("start").addClass("stop");
});