하단부 에서 bubble 효과가 나타났다가 사라지는 애니메이션
- 버블 요소를 하단부에 정렬 배치
- 각 버블에게 "하단 -> 상단" 으로 움직이는 animation 적용
- 각 버블이 하단->상단으로 움직일때 하단부분과 상단부분 keyframes 에서 opacity 값 조정
- 각 버블에게 적용되는 animation delay값을 조정하여 다른속도로 실행된다.
[HTML]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bubble WEB</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="screen">
<!-- header -->
<nav class="header-bar">
<img src="./images/logo.png" alt="logo" class="logo" />
<button class="sign-up-btn" type="button">Sign UP</button>
</nav>
<!-- main -->
<main>
<!-- content -->
<div class="content">
<small>Welcome to our</small>
<h1>
World's<br />
Creative Studio
</h1>
<button type="button">Take a tour</button>
</div>
<!-- bubbles -->
<div class="bubbles">
<img src="./images/bubble.png" alt="bubbleimg" />
<img src="./images/bubble.png" alt="bubbleimg" />
<img src="./images/bubble.png" alt="bubbleimg" />
<img src="./images/bubble.png" alt="bubbleimg" />
<img src="./images/bubble.png" alt="bubbleimg" />
<img src="./images/bubble.png" alt="bubbleimg" />
<img src="./images/bubble.png" alt="bubbleimg" />
</div>
</main>
<!-- nav -->
<nav>
<div class="nav-bar">
<img src="./images/menu.png" alt="menu" class="menu" />
<div class="social-links">
<img src="./images/tw.png" alt="tweeter" />
<img src="./images/fb.png" alt="facebook" />
<img src="./images/ig.png" alt="instargram" />
</div>
<div class="useful-links">
<img src="./images/info.png" alt="info" />
<img src="./images/share.png" alt="share" />
</div>
</div>
</nav>
</div>
</body>
</html>[CSS]
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
color: #fbfcfd;
}
button {
display: block;
padding: 10px 25px;
/* 배경화면을 투명하게 */
background: transparent;
color: #fbfcfd;
border: 5px solid #fff;
border-radius: 20px;
outline: none;
cursor: pointer;
transition: border-color 250ms ease-in-out, color 250ms ease-in-out;
}
button:hover {
border-color: #40e0d0;
color: #40e0d0;
}
.screen {
width: 100%;
height: 100vh;
background-image: url(images/background.png);
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
}
/* header */
.header-bar {
display: flex;
justify-content: space-between;
align-items: center;
width: 85%;
height: 15%;
margin: auto;
}
.logo {
width: 100px;
cursor: pointer;
}
/* main */
/* content */
.content {
z-index: 2;
position: absolute;
top: 50%;
left: 7.5%;
/* content의 width 길이의 50% 비율만큼 - 방향으로 움직인다. */
transform: translateY(-50%);
}
.content small {
display: block;
margin-bottom: 30px;
}
.content h1 {
margin-bottom: 50px;
font-size: 80px;
line-height: 80px;
}
/* bubbles */
.bubbles {
position: absolute;
/* 버블들을 감추기 위해 */
bottom: -70px;
display: flex;
justify-content: space-between;
align-items: center;
width: 93%;
}
.bubbles img {
width: 50px;
animation-name: bubble;
animation-duration: 7s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.bubbles img:nth-last-child(1) {
animation-delay: 2s;
width: 25px;
}
.bubbles img:nth-last-child(2) {
animation-delay: 1s;
}
.bubbles img:nth-last-child(3) {
animation-delay: 5s;
}
.bubbles img:nth-last-child(4) {
animation-delay: 2s;
}
.bubbles img:nth-last-child(5) {
animation-delay: 3s;
width: 25px;
}
.bubbles img:nth-last-child(6) {
animation-delay: 4.5s;
}
.bubbles img:nth-last-child(7) {
animation-delay: 1s;
width: 30px;
}
@keyframes bubble {
0% {
transform: translateY(0);
opacity: 0;
}
50% {
opacity: 1;
}
70% {
opacity: 1;
}
to {
transform: translateY(-80vh);
opacity: 0;
}
}
/* nav */
.nav-bar {
position: absolute;
right: 0;
top: 0;
width: 50px;
height: 100vh;
/* 그라데이션 효과 */
background: linear-gradient(#00545d, #000729);
}
.nav-bar .menu {
display: block;
margin: 40px auto 0;
width: 25px;
cursor: pointer;
}
.social-links {
position: absolute;
top: 50%;
width: 50px;
text-align: center;
transform: translateY(-50%);
}
.useful-links {
position: absolute;
bottom: 30px;
width: 50px;
text-align: center;
}
.social-links img,
.useful-links img {
margin: 5px auto;
width: 35px;
cursor: pointer;
}
'WEB animation & effect > page effect' 카테고리의 다른 글
| blur effect 웹사이트 : CSS masking (0) | 2021.10.01 |
|---|