웹사이트나 앱에 움직이는 배경을 추가하면 개성 넘치고 매력적인 디자인을 구현할 수 있습니다. 독창적인 배경은 사용자의 감성을 자극하고, 전반적인 경험을 향상시키는 데 기여합니다.
다양한 방법으로 앱의 배경을 애니메이션으로 만들 수 있지만, HTML과 CSS의 조합이 특히 효과적입니다. 아래 예제를 통해 코드 작동 원리를 살펴보고, 완성된 애니메이션 배경의 데모를 직접 확인해 보세요.
HTML 구조 설계
여기서는 아래에서 위로 떠오르는 거품이 있는 파란색 배경을 만들어 보겠습니다. 최종 결과는 CodePen에서 확인할 수 있습니다.
먼저 애니메이션을 위한 래퍼 클래스가 포함된 섹션을 생성합니다.
다음으로, 거품을 나타낼 10개의 div 요소를 만듭니다. 각 div 내부에는 “dot” 클래스가 적용된 span 요소를 추가합니다. HTML을 처음 접하는 분이라면, 기본적인 HTML 태그를 10분 안에 익힐 수 있습니다.
<body> <section class="wrapper"> <h1>애니메이션 배경</h1> <div><span class="dot"></span></div> <div><span class="dot"></span></div> <div><span class="dot"></span></div> <div><span class="dot"></span></div> <div><span class="dot"></span></div> <div><span class="dot"></span></div> <div><span class="dot"></span></div> <div><span class="dot"></span></div> <div><span class="dot"></span></div> <div><span class="dot"></span></div> </section> </body>
CSS 코드를 활용한 스타일링
HTML만으로도 기본적인 배경 효과를 만들 수 있지만, 여기서는 CSS를 활용하여 배경을 꾸미고 애니메이션 효과를 추가할 것입니다.
먼저, 배경 주변에 불필요한 여백이 생기지 않도록 마진과 패딩을 0으로 설정합니다.
* {
margin: 0;
padding: 0;
}
다음으로, 상위 섹션의 스타일을 지정하기 위해 “wrapper” 클래스를 사용합니다. 이 섹션은 페이지 전체를 채우도록 너비와 높이가 100%로 설정되며, 배경색은 파란색 계열로 지정하고, 위치는 absolute로 설정합니다.
.wrapper {
height: 100%;
width: 100%;
background-color: #0066cc;
position: absolute;
}
H1 태그 또한 absolute 위치를 사용합니다. 페이지 중앙에 배치하기 위해 먼저 왼쪽 상단 위치를 50%로 설정한 다음, translate 속성을 사용하여 위쪽과 왼쪽으로 이동시켜 정확히 중앙에 오도록 합니다.
.wrapper h1 {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
font-family: sans-serif;
word-spacing: 2px;
color: #fff;
font-size: 2rem;
font-weight: 900;
}
이제 애니메이션 거품 역할을 할 원형 div의 스타일을 지정합니다. 각 div에 높이, 너비, 테두리 속성을 설정하고, 큰 테두리 반경 값을 설정하여 원형 모양을 만듭니다. 또한, CSS 애니메이션 속성을 사용하여 애니메이션 지속 시간을 설정합니다.
.wrapper div {
height: 60px;
width: 60px;
border: 2px solid rgba(255, 255, 255, 0.7);
border-radius: 100px;
position: absolute;
top: 10%;
left: 10%;
animation: 4s linear infinite;
}
span 태그 (점)의 높이와 너비를 5px로 설정하고, 테두리 반경과 흰색 배경색을 지정합니다. 각 점을 상위 div 요소의 오른쪽 상단에 가까이 배치합니다.
div .dot {
height: 5px;
width: 5px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 20%;
right: 20%;
}
다음으로, nth-child 선택자를 사용하여 각 div 요소를 서로 다른 위치에 배치합니다. 애니메이션 이름은 “animate”로 지정하고, 나중에 @keyframes 규칙을 사용하여 애니메이션을 정의할 것입니다.
.wrapper 요소의 첫 번째 자식 요소가 h1 태그이므로, 첫 번째 div 요소를 선택하려면 nth-child(2)를 사용해야 합니다.
.wrapper div:nth-child(2) {
top: 20%;
left: 20%;
animation: animate 8s linear infinite;
}
.wrapper div:nth-child(3) {
top: 60%;
left: 80%;
animation: animate 10s linear infinite;
}
.wrapper div:nth-child(4) {
top: 40%;
left: 40%;
animation: animate 3s linear infinite;
}
.wrapper div:nth-child(5) {
top: 66%;
left: 30%;
animation: animate 7s linear infinite;
}
.wrapper div:nth-child(6) {
top: 90%;
left: 10%;
animation: animate 9s linear infinite;
}
하위 div 요소에 더 높은 백분율 값을 주어 각각 다른 속도로 위로 올라가도록 만듭니다.
.wrapper div:nth-child(7) {
top: 30%;
left: 60%;
animation: animate 5s linear infinite;
}
.wrapper div:nth-child(8) {
top: 70%;
left: 20%;
animation: animate 8s linear infinite;
}
.wrapper div:nth-child(9) {
top: 75%;
left: 60%;
animation: animate 10s linear infinite;
}
.wrapper div:nth-child(10) {
top: 50%;
left: 50%;
animation: animate 6s linear infinite;
}
.wrapper div:nth-child(11) {
top: 45%;
left: 20%;
animation: animate 10s linear infinite;
}
@keyframes 규칙을 사용하여 원과 점을 점진적으로 변화시키고 회전시킵니다. 아래 코드에서 점은 70도 회전하고, 원은 360도 회전합니다. 이 회전 동작을 통해 거품 효과를 만듭니다.
@keyframes animate {
0% {
transform: scale(0) translateY(0) rotate(70deg);
}
100% {
transform: scale(1.3) translateY(-100px) rotate(360deg);
}
}
CSS 패턴을 사용하여 배경을 더욱 세련되게 만들 수 있습니다. 패턴을 활용하면 파도, 격자, 나뭇잎 등 다양한 패턴을 생성하여 멋진 애니메이션을 만들 수 있습니다.
CSS를 사용하여 다양한 속성에 애니메이션 효과 적용 가능
CSS를 사용하면 다양한 유형의 애니메이션을 구현할 수 있습니다. 여기에는 배경색 변경, 애니메이션 실행 시간 지연 등이 포함됩니다.
애니메이션 실행 빈도를 무한대로 설정할 수도 있고, 애니메이션이 진행되는 방향 (정방향 또는 역방향)을 설정할 수도 있습니다. 애니메이션을 활용하여 앱에 생동감을 불어넣고 사용자 경험을 향상시켜 보세요.