<!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>Document</title>
<style>
body{
min-height:100vh;
}
.main{
text-align: center;
width:90%;
opacity:0;
display: none;
transition:opacity 1s ease-in;
}
.loader{
width:100vw;
height:100vh;
display:flex;
justify-content: center;
align-items: center;
}
.loader > span{
display: inline-block;
background-color:#AADBC3;
width: 0px;
height:0px;
border-radius: 50%;
margin:0 8px;
transform: translate3d();
animation : bounce 0.6s infinite alternate;
}
.loader > span:nth-child(2){
background-color:#20725A;
animation-delay: 0.2s;
}
.loader > span:nth-child(3){
animation-delay: 0.4s;
}
@keyframes bounce {
to{
width:16px;
height:16px;
transform: translate3d(0, -16px, 0);
}
}
</style>
</head>
<body>
<div class="loader">
<span></span>
<span></span>
<span></span>
</div>
<section class="main">
<h1>ㅈ딘아ㅓ린아런이ㅏㄹ</h1>
<p>sadlkfjasldkfjasdlkfjasdlkfjasdlk</p>
</section>
<script>
const loader = document.querySelector('.loader');
const main = document.querySelector('.main');
function init(){
setTimeout(()=> {
loader.style.opacity = 0;
loader.style.display = 'none';
main.style.display = 'block';
setTimeout(()=> (main.style.opacity = 1),50);
}, 4000);
}
init();
</script>
</body>
</html>반응형
'Frontend > JavaScript' 카테고리의 다른 글
| [JAVASCRIPT] clientX, offsetX, pageX, screenX (0) | 2021.08.11 |
|---|---|
| [Javascript] 탭 메뉴, 메뉴 하이라이트 구현하기 (0) | 2021.07.29 |
| [Javascript] preventDefault (0) | 2021.07.20 |
| [Javascript] classList.toggle (0) | 2021.07.20 |
| 조건문(if) (0) | 2021.07.15 |
