SVG animaiton1

728x90

SVG animaiton1

SVG로 걷는 애니메이션을 만들어 보자!

사진이 24프레임으로 가로로 길게 800px * 24장 해서 19200px 레이어를 만들어줍니다. 세로 길이는 동일.

Start Stop

원본 소스 보기

HTML 소스보기

<div class="sample">
  <h3><span></span><em class="sr-only"></em></h3>
  <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 소스보기

<style>
  .sr-only {
    position: absolute;
}
.sample h3 {
background: #f6f6f6; 
height: 40px;
padding-top: 13px;
margin-bottom: 0;
}
.sample h3 span {
display: block;
width: 15px; height: 15px; 
background-color:#E96E4C;
border-radius: 50%;
margin-left:15px;
position: relative;
}
.sample h3 span::before {
content: '';
width: 15px; height: 15px; 
background-color: #E6A935;
border-radius: 50%;
position: absolute; 
left: 23px; top: 0;
}
.sample h3 span::after {
content: '';
width: 15px; height: 15px; 
background-color: #85C33D;
border-radius: 50%;
position: absolute; 
left: 45px; top: 0;
}
.sample .boxWrap {
padding: 20px;
background: #fff;
overflow: hidden;
}
.sample .boxWrap > div {
float: left; 
margin: 25px;
background: #ccc;
width: 170px; height: 170px;
text-align: center;
line-height: 170px;
color: #fff;
}
.step {
height: 700px;
background: #87ebe1;
position: relative;
}

.step .stepbox {
width: 800px;
height: 600px;
background: url("https://raw.githubusercontent.com/fkdldhs8484/coding2/main/animation/img/37ca3d98fd957d4ae314720655fc4fd8.gif");
border-radius: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
animation: ani 0.5s steps(24, 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: -19200px 0;
}
  }

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

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

JABA 소스보기

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

728x90