이미지를 둥둥 띄우기
웹에 생동감을 주기 위해서 몇가지 방법들이 있는데 그 중에 하나인 이미지를 가볍게 둥둥 띄우는 방법입니다. 보통 플로팅(Floating) 이미지라고 하는데 빠르고 간단하게 할 수 있는 방법을 올려둡니다. 사실 제가 많이 애용하는 방법이기도 합니다. 그래서 늘 급할때 쓸려고 이렇게 포스팅 해둡니다. 😁
결과
HTML
<html lang="ko">
<body>
<div class="floating"><center><img src="이미지경로_파일명"></center></div>
</body>
</html>CSS
.floating {
animation-name: floating;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes floating {
0% { transform: translate(0, 0px); }
50% { transform: translate(-15px, 15px); }
100% { transform: translate(0, -0px); }
}
간단한 사용방법으로는 animation-duration으로 속도를 제어 가능합니다. 숫자가 작을 수록 빠릅니다. 그리고 50% {trainsform: translate 부분에서 y축, x축 수치로 진행됩니다. 수치를 넣어보면 금방 확인 가능하실 겁니다. (현재 수치는 대각선으로 왔다 갔다 합니다.)
사용해보지 않으신 분들이 있으시면 한번 해보시고 티스토리 꾸밀때도 꽤 유용한 코드라고 생각해요~ 그럼 즐거운 코딩 되시길 바래요~😀