CSS3 마우스 올렸을 때 움직이는 애니메이션 배너 만들기
이번 시간에는 움직이는 배너를 만드는 방법에 대해 배웠습니다. CSS3의 Transition, Transform을 활용해서 움직이기 전 위치와 마우스를 hover 했을 때, 최종적 위치만 입력해두면 되는 간단한 방법입니다.
먼저 포토샵에서 대략적으로 위치를 한번 지정하시거나 임시로 한번 그려보세요. 마우스 올리기 전, 마우스 올린 후로 나뉘어 작업하시면 더 좋습니다. 그리고 배너에 들어가는 모든 이미지는 png 형식의 투명 이미지로 작업해 주시고 빈 공간은 포토샵의 Trim 기능을 써서 없애주시는게 핵심 입니다. 우선 여기에서 보여지게 될 움직이는 배너를 위해서 임시로 사진을 올려두도록 하겠습니다.
이렇게 세 개의 이미지를 사용할 것입니다. 각 이미지의 파일명은 표시해두었습니다. 그리고 html5, css3의 마크업 상태를 살펴보도록 하겠습니다.
<a href="#">
<div id="banner">
<img class="ch" src="images/ch.png">
<img class="tistory" src="images/ch_logo.png">
<p class="txt">반응형 스킨이 곧 출시됩니다.</p>
<p class="txt2">Comming Soon!</p>
<p class="logo"><i class="fab fa-chrome"></i><i class="fab fa-internet-explorer"></i><i class="fab fa-firefox"></i><i class="fab fa-opera"></i><i class="fab fa-safari"></i></p>
<p class="device"><i class="fas fa-desktop"></i><i class="fas fa-mobile-alt"></i></p>
</div>
</a>
이 상태입니다. 보시면 img src 경로가 보여지게 되는데, 이 경로는 위에 올렸던 세 개의 이미지에 대한 경로 입니다. 이미지를 어디에 올리느냐에 따라 경로 주소가 달라지므로 주의해야 합니다. 다음은 CSS3 마크업 상태 입니다.
* {
padding: 0;
margin: 0;
}
body {
margin: 20px;
font-family: 'Nanum Gothic', sans-serif;
}
i {
margin: 0 2px;
}
a {
text-decoration: none;
color: black;
}
#banner {
position: relative;
overflow: hidden;
width: 700px;
height: 250px;
border: 1px solid #ccc;
background: url(images/ch_bg.png) no-repeat center/cover;
}
.ch {
position: absolute;
left: 290px;
top: 10px;
transition: all 0.5s;
}
#banner:hover .ch {
left: 520px;
}
.tistory {
position: absolute;
left: 15px;
top: -90px;
transition: all 0.5s 0.2s;
}
#banner:hover .tistory {
top: 15px;
}
.txt {
display: block;
position: absolute;
left: 20px;
top: 110px;
font-size: 30px;
font-weight: bold;
opacity: 0;
transform: scale(2, 2);
transition: all 0.25s linear 0.2s;
}
#banner:hover .txt {
opacity: 1;
transform: scale(1, 1);
}
.txt2 {
display: block;
position: absolute;
left: -300px;
bottom: 20px;
font-size: 30px;
font-weight: bold;
color: #555;
transition: all 0.5s 0.3s;
}
#banner:hover .txt2 {
left: 18px;
}
.logo {
display: block;
position: absolute;
left: 270px;
bottom: -50px;
font-size: 20px;
color: #888;
transition: all 0.5s 0.3s;
}
#banner:hover .logo {
bottom: 20px;
}
.device {
display: block;
position: absolute;
right: 180px;
bottom: 10px;
font-size: 55px;
color: #007AAE;
opacity: 0;
transition: opacity 0.5s linear 0.2s;
}
#banner:hover .device {
opacity: 1;
}
보시면 공통된 부분이 있습니다. 바로 #banner:hover 입니다. 선택자에 대한 부분인데, 커다란 배너위에 마우스를 올려서 동작을 시켜야 하기 때문에 배너의 전체를 구성하는 div인 banner 라고 하는 id 값을 가진 선택자를 사용합니다. 그리고 마우스를 오버 시 어떤 직접 선택자가, 혹은 어떤 id, class 값을 가진 선택자를 동작시킬지에 대해서 지정을 해두었습니다. 좀 더 구체적으로 설명하겠습니다.
.ch {
position: absolute; ▶부모 요소인 #banner div를 기준으로 위치를 선정
left: 290px; ▶왼쪽으로부터 290px 떨어진 위치
top: 10px; ▶위쪽으로부터 10px 떨어진 위치
transition: all 0.5s; ▶모든 요소가 0.5초 동안 서서히 변함
}
#banner:hover .ch { ▶#banner id값을 가진 div에 마우스를 올렸을 때, ch class 값을 가진 img
left: 520px; ▶ 왼쪽으로 520px 떨어진 위치로 이동시킴
}
ch 라는 클래스값을 가진 선택자는 img 요소입니다. 이미지 삽입을 위한 요소죠. ch 이미지에는 효자손 캐릭터가 들어가 있습니다. 이 캐릭터를 #banner 안쪽에서 마우스를 올리기 전에는 가운데 위치로, 그리고 마우스를 올렸을 때에는 오른쪽으로 이동시키려고 합니다. 처음 위치와 옮긴 후 위치의 값을 입력해준 것 입니다. 그리고 부드럽게 이동하는 애니메이션 효과를 주기 위해서 transition 요소를 사용한 것 입니다. 만약 이 요소가 없다면 마우스를 올렸을 때 한번에 휙~ 하고 이동하는 형태로 보여지게 됩니다.
방금 위치 선정에 대해서 다른 방법이 생각났는데, 만약 .ch 이미지를 부모요소의 div 안쪽에서 정가운데로 정확하게 이동시키려면 .ch에서 left:290px; 를 수정하고, 다음의 요소를 추가하시면 됩니다. 결국 이렇게 마크업 됩니다.
left: 50%;
transform: translateX(-50%);
이 방법은 삽입될 이미지의 가로 크기가 어떻든, 무조건 가운데로 위치하게 됩니다. 여기에서의 가운데의 의미는 화면의 정중앙이 아닌 가로값에 대한 정가운데 부분만 해당됩니다.
그리고 img 뿐만 아니라 p태그도 클래스값을 부여해서 스타일에 블록요소 속성을 부여해서 위치 이동이 용이하도록 만들었습니다. p태그 자체가 블록요소 속성을 가지고 있긴 하지만 현재 부모요소안에 갇혀있고 벽에 부딫히면 자동으로 글씨가 아래로 내려가기 때문에 아예 하나의 블록요소로 만들어 준 것입니다.
이런식으로 나머지 이미지나 기타 요소에 대해서 마우스를 올렸을 때의 최종 위치, 올리기 전의 최종 위치를 지정하시어 작업해주시면 됩니다. 작업을 편하게 하기 위해서는 먼저 마우스를 올렸을 때의 위치를 먼저 만들어 주신 다음에 마우스 올리기 전 작업을 진행하는것이 좀 더 수월합니다. 참고하시기 바랍니다. 이렇게 해서 완성된 배너를 아래에서 확인해 보시기 바랍니다.
See the Pen Animation Banner by rgy0409 (@rgy0409) on CodePen.
이렇게 완성이 되었습니다. 생각보다 복잡하지 않습니다. 움직이는 배너는 처음 위치와 최종 위치만 선정해 주시고, transition을 활용해서 애니메이션 효과를 주시면 됩니다. 끝.
"친절한효자손 취미생활" 을 검색!
