유데미에서 Brad Traversy의 20 Web Projects With Vanilla JavaScript
를 하나씩 직접 코딩해보면서 정리하기 위한 글이다.
데모 페이지
vanillawebprojects.com/projects//relaxer-app/
코드 링크
github.com/rshak8912/20-Web-Projects
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Relaxer</title>
</head>
<body>
<h1>Relaxer</h1>
<div class="container" id="container">
<div class="circle"></div>
<p id="text"></p>
<div class="pointer-container">
<span class="pointer"></span>
</div>
<div class="gradient-circle"></div>
</div>
<script src="script.js"></script>
</body>
</html>style.css
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
* {
box-sizing: border-box;
}
body {
background: #224941 url('./img/bg.jpg') no-repeat center center/cover;
color: #fff;
font-family: 'Montserrat', sans-serif;
min-height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
}
.container {
display: flex;
align-items: center;
justify-content: center;
margin: auto;
height: 300px;
width: 300px;
position: relative;
transform: scale(1);
}
.circle {
background-color: #010f1c;
height: 100%;
width: 100%;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.gradient-circle {
background: conic-gradient(
#55b7a4 0%,
#4ca493 40%,
#fff 40%,
#fff 60%,
#336d62 60%,
#2a5b52 100%
);
height: 320px;
width: 320px;
z-index: -2;
border-radius: 50%;
position: absolute;
top: -10px;
left: -10px;
}
.pointer {
background-color: #fff;
border-radius: 50%;
height: 20px;
width: 20px;
display: block;
}
.pointer-container {
position: absolute;
top: -40px;
left: 140px;
width: 20px;
height: 190px;
animation: rotate 7.5s linear forwards infinite;
transform-origin: bottom center;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.container.grow {
animation: grow 3s linear forwards;
}
@keyframes grow {
from {
transform: scale(1);
}
to {
transform: scale(1.2);
}
}
.container.shrink {
animation: shrink 3s linear forwards;
}
@keyframes shrink {
from {
transform: scale(1.2);
}
to {
transform: scale(1);
}
}script.js
const container = document.getElementById('container');
const text = document.getElementById('text');
const totalTime = 7500;
const breatheTime = (totalTime / 5) * 2;
const holdTime = totalTime / 5;
const breathAnimation= () => {
text.innerText = 'Breathe In!';
container.className = 'container grow';
setTimeout(() => {
text.innerText = 'Hold';
setTimeout(() => {
text.innerText = 'Breathe Out!';
container.className = 'container shrink';
}, holdTime);
}, breatheTime);
}
breathAnimation();
setInterval(breathAnimation, totalTime);
강의를 통해 배운 점(생각, 내용 정리)
- keyframes를 사용한 애니메이션 효과를 입혀볼 수 있었음
'HTML&CSS&Javascript' 카테고리의 다른 글
| [Udemy]20 Web Projects With Vanilla JavaScript -Project#18 (0) | 2021.01.01 |
|---|---|
| [Udemy]20 Web Projects With Vanilla JavaScript -Project#17 (0) | 2021.01.01 |
| [Udemy]20 Web Projects With Vanilla JavaScript -Project#15 (0) | 2021.01.01 |
| [Udemy]20 Web Projects With Vanilla JavaScript -Project#14 (0) | 2021.01.01 |
| [Udemy]20 Web Projects With Vanilla JavaScript -Project#13 (0) | 2021.01.01 |