백구의 코딩찌개
  • [ FrontEnd/Css ]
    [Css] Sprite-sheets 으로 달리는 애니메이션 (Run Animation) 만들기
    2024년 01월 22일 23시 01분 33초에 업로드 된 글입니다.
    작성자: 코딩백구
    반응형

    혼자 개발을 진행하다가 progress bar 쪽에 사람이나 동물이 함께 달리는 애니메이션이 있으면 조금 더 포인트가 되지 않을까 싶어서 무작정 run animation 으로 구글링을 해보았다.

    처음에는 gif 파일을 그냥 재생시켜야하나 싶었는데, 검색해서 보니 sprite-sheets 라고하는 옛날 종이 만화만드는 기법을 사용해서 animation 효과를 줄 수 있다는것을 발견했다.

    Sprite-sheets 란?

    • sprite sheet 란 아래와 같은 그림을 말하는데, 일련의 동작들이 연속적으로 그려져 있는 그림을 말한다.

     

    여기까지 왔으면 어떻게 애니메이션 효과를 줄 지 어느정도 감이 왔으리라본다.

    그렇다! 해당 사진을 옆으로 한프레임씩 지나가게 만들어주면 우리가 볼 때는 달려가는 모습처럼 보일 수 있다.

    Code 구현

    <HTML>

    <div id="motion" class="-ml-[128px] -mt-[128px]"></div>

     

    <CSS>

    <style>
	#motion {
		scale: 0.1;
		position: absolute;
		height: 256px;
		width: calc(1536px / 6);
		background: url(/img/rungirl.avif);
		overflow: hidden;
		animation: moving 1s steps(6) infinite;
	}
	@keyframes moving {
		from {
			background-position: 0;
		}
		to {
			background-position: 1536px;
		}
	}
</style>
    • 해당 사진의 길이가 1536px 이고, 프레임이 6개라 width 는 1536 / 6 을 주었고, animation 주기는 steps(6) 으로 줬다.
    • 배경 사진이 움직여야하는데, 범위는 0 에서부터 끝까지인 1536px 으로 정해줬다.
    • 원본 크기로하면 캐릭터가 너무 크게 나와서 원하는 사이즈에 부합하지 않았기에 scale 속성으로 크기를 조절해주었다.
    • TailwindCss 도 사용하였는데, scale 을 사용하면 캐릭터의 위치가 원래의 위치와는 다르게 잡혔기에 margin으로 이를 조정해주었다.

     

    결과물을 보면 이런식으로 나오는것을 확인할 수 있다.

    반응형
      댓글

    티스토리툴바