회사에서 로딩화면 애니메이션으로 텍스트에 차오르는 느낌을 줄 수 있냐기에
알겠다하고 구현한 애니메이션...
물결로 하려니 조콤 힘들었다 😭
방법이 두가지가 있었는데
1. 물결 배경을 넣어 배경을 움직이는 방법
2. clip path를 이용한 방법
이중에서 나는 1번 방법을 택했다.
이유는 1번, 2번 다 해봤는데 2번을 이용해 차오르는 느낌을 주려니
중간에 애니메이션이 끊어지는 느낌이 강해서 택하지 않았다.
아래 참고한 영상을 첨부할테니
2번 방법을 해보시고 싶으신 분은 한번 도전해 보시길 :)
[ HTML ]
크게 복잡할 것 없다. 아래부분이 끝!
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="loader">
<div class="inner">
<h1> EXAMPLE </h1>
</div>
</div>
</body>
</html>
[ CSS ]
body {
margin: 0;
padding: 0;
}
.loader {
position:fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width:100%;
height: 100%;
background: #000;
}
.loader .inner {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height:80px;
text-align: center;
}
.loader h1 {
height: 160px;
margin: 0;
padding: 0;
font-size: 66px;
color: rgba(255, 255, 255, 0.2);
background-size: 101% 100%;
background-position: left 0px bottom -40px;
background-repeat: repeat-x;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 90 240 300' preserveAspectRatio='none'%3E%3Crect x='0' y='0' width='500' height='800' style='stroke: none; fill: rgb(255,255,255);' /%3E%3Cpath d='M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z' style='stroke: none;'%3E%3C/path%3E%3C/svg%3E");
animation: wave 3s both linear
}
@keyframes wave {
0% {
background-position: left 0px bottom -80px;
}
100% {
background-position: left 1500px bottom 20px;
}
}
설명하자니 막상 설명이 필요한 부분이 크게 없는 것 같다.
svg로 배경을 만들어css부분을 보면 위에서 한줄로 설명했듯
배경을 폰트에 맞도록 background-clip 을 사용해주었다.
그리고 keyframes을 사용하여 배경의 위치를 옮기면서
애니메이션을 완성한 것!
배경의 SVG부분은 직접만든건 아니고
원래 코드에서 원하는 이미지가 나오도록 수정했다.
물결 이미지가 있으시면 다른 이미지로 하셔도된다!
저렇게 SVG로 만들경우에 배경이 부모태그에 맞게끔 사이즈가 만들어져서
배경을 위로 올려서 글씨를 채우길 원하는 내 방향에 맞도록
height들을 설정해준것이다.
'웹 프로그래밍 > 공부일지' 카테고리의 다른 글
| [ Vue.js ] 를 이용한 select box 꾸미기 (2) | 2021.01.08 |
|---|---|
| TweenMax를 이용한 카운터 효과 ( feat. ScrollMagic ) (0) | 2020.08.07 |
| [JS] 달라진 텍스트 표시 라이브러리 (0) | 2020.06.17 |
| [CSS] CSS 가속화라는게 있었어..? (0) | 2020.05.27 |
| [Node.js / React.js ] 나 했다 도전! 리엑트 튜토리얼 (0) | 2020.05.20 |