<HTML/CSS> Animation 4 : 마우스를 올리면 배경이 바뀌면서 타이틀 나타내기

CSS Animation 기초는 Rock's Easy Web을 기본으로 공부하고 있습니다. 

 

기본 그레이색을 가지고 있는 2개의 섹션 영역에 마우스를 올리면 배경색과 타이틀이 나오는 Animation을 공부해 보고자 합니다. 

 

개발자들이 테스트용으로 사격형 영역을 불러올때 place-hold.it을 사용합니다. 이곳에서는 <li>태그를 이용하여 400 X 200 사이즈의 두개의 섹션을 가상으로 다음과 같이 만들어 보겠습니다. 

 

 

상기 HTML을 브라우저로 보게되면 다음과 같습니다. 

 

 

이제 이 그림위에 마우스를 올리면 검은색(투명도 80%)으로 바뀌면서 Animation 연습이라는 타이틀이 가운데 오도록 Animation 효과를 공부해 보고자 합니다. 

 

① 위치잡기 

 

타이틀이 가운데 온다는 이야기는 span요소가 가운데 위로 떠 있는 상태를 생각하면 됩니다. 그러기 위해서는 현재 400X200 사각형의 기준위치를 선정해 줍니다. 자기 자신의 위치를 기준으로 볼 때 position을 relative로 하고 시작합니다.

 

이에따라 span요소의 위치는 absolute로 반영하여 사각형 기준으로 잡을 수 있도록 합니다. 

 

이렇게 하면 relative된 위치를 기준으로 span요소가 고정이 되는데 <li>안에 <span>의 위치를 absolute로 했기때문에 CSS에서 <span> 요소의 범위를 전체를 지정해 줍니다. width와 height를 100%로 하는 경우도 있지만 padding등의 간섭효과를 고려할 때 전부 0으로 다음과 같이 지정합니다. 

 

 

 

② 타이틀 정렬 및 백그라운드 컬러 조정

 

두 요소의 위치를 잡았으니 이제 원래 목표였던 타이틀을 가운데 정렬하고 글씨색을 흰색으로 지정 및 배경색을 80%의 투명도를 갖는 검은색으로 바꿉니다. 

 

 

 

이제 여기에 마우스를 올렸을때 Animation효과를 주면 됩니다. Transition을 이용하는 방법과 Animation을 이용하는 방법이 있습니다. 

 

▶ Transition 이용

 

다음과 같이 효과를 주면  됩니다. 

 

 

코드펜에서 확인할 수 있습니다. 

See the Pen animation1-4_check by skkim0303 (@skkim0303) on CodePen.

 

▶ Animation 이용

 

참고로 Animation 속성을 사용하면 다음과 같이 쓸 수 있습니다. 

 

 

 

※ 응용과정

 

이 과정을 좀 더 응용하면 이번에는 배경이 오른쪽이든 위든 아래이든 날아와서 변하는 과정을 같이 알아두면 좋을 듯 합니다. 

 

우선 하나만 확실히 알면 다른 방향도 응용이 가능하니 밑에서 위로 배경이 날라오면서 타이틀을 나타내는 방법으로 해 보겠습니다. 

 

처음 <span>요소를 <li>요소 전체에 위치를 시켰기에 그만큼 아래로 내려오게 위치를 잡습니다. top과 bottom을 각각 100%와 -100%로 반영을 해봅니다. 

 

 

상기 브라우저 그림같이 위치가 아래로 내려온 것을 확인할 수 있습니다. 이 위치에 Animation 효과를 반영하여 위로 올리면 됩니다. 단, 현재 그림처럼 아래 내려와 있는 <span> 요소를 안보이게 하는 작업이 필요한데요. 이는 상위태그로 가서 overflow되는 속성을 hidden시켜주면 됩니다. 

 

 

 

관련된 코드펜은 다음을 참조하세요.

See the Pen animation1-4-2_check by skkim0303 (@skkim0303) on CodePen.