코딩코드/바로쓰는코딩

플로팅 이미지

이미지를 둥둥 띄우기

웹에 생동감을 주기 위해서 몇가지 방법들이 있는데 그 중에 하나인 이미지를 가볍게 둥둥 띄우는 방법입니다. 보통 플로팅(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축 수치로 진행됩니다. 수치를 넣어보면 금방 확인 가능하실 겁니다. (현재 수치는 대각선으로 왔다 갔다 합니다.)

사용해보지 않으신 분들이 있으시면 한번 해보시고 티스토리 꾸밀때도 꽤 유용한 코드라고 생각해요~ 그럼 즐거운 코딩 되시길 바래요~😀

저작자표시 비영리 동일조건

Contents

새소식

인기 검색어

플로팅 이미지

이미지를 둥둥 띄우기

결과

HTML

CSS

당신이 좋아할만한 콘텐츠

티스토리툴바