Seongwon Lim

[HTML/CSS] 블러(Blur) 애니메이션 구현하기 본문

HTML-CSS

[HTML/CSS] 블러(Blur) 애니메이션 구현하기

limsw 2022. 5. 9. 20:25
반응형

서론

웹페이지를 구성할 때 마우스가 올려져 있지 않은 요소들은 투명도를 연하게 주는 효과를 구현하는 예제를 살펴보고자 한다.

예를 들어 위와 같이 5개의 메뉴로 이루어진 홈페이지가 있다고 가정해보자. 우리는 New Arrivals라는 탭에 마우스를 올렸을 때 나머지 4개 메뉴에 대해서는 블러(Blur) 효과를 주어 사용자가 선택한 메뉴를 돋보이게 하고 싶은 경우가 있다.

 

이번 포스팅 글에서는 CSS의 옵션인 opacity를 이용해서 블러 애니메이션 효과를 구현해보고 추가적으로 마우스를 옮겼을 때 탭이 자연스럽게 이동하기 위한 transition 옵션을 살펴보고자 한다.

HTML 코드 구성하기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Mouse over and blur animation</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="gnb">
        <a href="#none">New Arrivals</a>
        <a href="#none">Summer Collection</a>
        <a href="#none">Winter Collection</a>
        <a href="#none">Special Offers</a>
        <a href="#none">Trends</a>
    </div>

</body>
</html>

HTML 코드는 다음과 같이 간단하게 구성할 수 있다. 클래스 이름이 gnb인 div태그는 안에 있는 5개의 요소들을 배치하기 위한 태그이다.

5개의 <a>태그는 페이지 이동을 위한 메뉴라고 생각하면 좋을 것 같다.

 

이제 해당 HTML을 꾸미기 위해서는 CSS를 다음과 같이 작성하면 된다.

CSS 코드 구성하기

body {
    font-family: 'Raleway', sans-serif;
    color: #222222;
    line-height: 1.5em;
    font-weight: 400;

    background: royalblue;
    margin: 0;
}

a {
    color: #222222;
    text-decoration: none;
}

body 태그에 폰트 및 텍스트 컬러, 줄간격, 굵기를 설정했고 배경 색상을 지정했다. 또한 margin: 0을 주어 빈 틈이 없도록 만들었다.

/*가운데 왼쪽 정렬*/
.gnb {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 50px;
}

.gnb a {
    display: block; /*세로 배치*/
    font-size: 40px;
    margin: 40px 0;
    color: white;
    transition: 0.5s;
}

이제 클래스 이름을 gnb로 정의했던 div 태그에 스타일을 정의한다.

 

position, top, transform 3가지 옵션은 div태그 안의 요소들을 가운데로 정렬하는 코드이다. 그리고 left: 50을 주어 왼쪽으로 이동시켰다.

 

또한 a태그에 transition 옵션을 주면 애니메이션 효과가 변경될 때 정의한 시간만큼에 걸쳐서 효과를 변경한다. 위와 같이 설정을 하면 마우스를 올려둔 탭에서 다른 탭으로 마우스를 이동했을 때 자연스럽게 Blur 효과가 바뀌는 것을 볼 수 있을 것이다.

/*순서 변경 불가*/
.gnb:hover a {
    opacity: 0.4;
}

.gnb a:hover {
    opacity: 1;
}


/*option -> icon create*/
.gnb a:before {
    content: '>';
    font-family: fontawesome;
    margin-right: 10px;
    opacity: 0;
}

.gnb a:hover:before {
    opacity: 1;
}

순서가 변경된 경우 a태그에 마우스를 올리면 5개 모든 메뉴의 opacity가 0.4로 바뀌기 때문에 순서에 유의해야 한다.

 

옵션 부분은 > 부호를 넣기 위한 코드이다. a태그에 가상 클래스를 주어 부호를 생성했으며 초기 opcaity는 0으로 주어 마우스를 올리지 않았을 때에는 보이지 않도록 했다.

 

그리고 a태그가 호버링 되었을 경우 가상 클래스의 opacity를 1로 주어서 부호가 생기는 듯한 애니메이션을 적용한 것이다.

결과 확인하기

이처럼 Winter Collection에 마우스를 올렸을 때 해당 탭에 >부호가 생겨 해당 탭을 가리키고 있다는 것을 표시하고 있으며 나머지 4개 메뉴들은 색깔이 연해진 것을 확인할 수 있다.

'HTML-CSS' 카테고리의 다른 글

[HTML/CSS] 가상 요소 :before :after 개념 및 사용 방법  (0) 2022.07.22
[HTML/JS] 버튼 클릭 시 페이지 맨 위로 이동하기  (0) 2022.07.18
[HTML/CSS] box-sizing 개념 및 사용 방법  (0) 2022.07.14
[HTML/CSS] 드롭다운(Drop-down) 애니메이션 구현하기  (0) 2022.05.10
[HTML/CSS] 글자 호버링 시 밑줄 효과 구현하기  (0) 2022.05.08
'HTML-CSS' Related Articles more
Comments