HTML
글자를 .logo 클래스로 분할
├── .intro
└── .logo-header
├── .logo
└── .logo
└── header / h4 <body>
<div class="intro">
<h1 class="logo-header">
<span class="logo">Lo</span><span class="logo">go.</span>
</h1>
</div>
<header>
<h4>Logo.</h4>
</header>
<script src="app.js"></script>
</body>CSS
글자들을 .logo로 나눴어도 이어붙여야 하므로
display: inline-block;
.logo를 지워뒀다가(+위치도 약간 내리고)
active 클래스가 붙으면 보여주되(+위치 약간 올려서) 위로 올라오면서 등장하는 모션 구현해주고
fade 클래스까지 붙으면 아예 위로 올려서 지워지도록
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
header {
position: relative;
left: 0;
top: 0;
width: 100%;
height: 80px;
}
header h4 {
position: absolute;
left: 10%;
bottom: 1rem;
font-size: 1.6rem;
}
.intro {
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100vh;
background-color: #161616;
transition: 1s;
}
.logo-header {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
color: #ffffff;
}
.logo {
position: relative;
display: inline-block;
bottom: -20px;
opacity: 0;
}
.logo.active {
bottom: 0;
opacity: 1;
transition: ease-in-out 0.5s;
}
.logo.fade {
bottom: 150px;
opacity: 0;
transition: ease-in-out 0.5s;
}
JS
문서가 로드되면,
setTimeout을 통해 분할된 logo를 차례대로 active 붙여서 보여주고 나서,
다시 setTimeout을 통해 logo에 active를 제거해주고 그 다음 fade를 붙여주고
다시 setTimeout을 통해 intro 배경색도 위로 올리도록
let intro = document.querySelector('.intro');
let logo = document.querySelector('.logo-header');
let logoSpan = document.querySelectorAll('.logo');
window.addEventListener('DOMContentLoaded', () => {
setTimeout(() => {
logoSpan.forEach((span, idx) => {
setTimeout(() => {
span.classList.add('active');
}, (idx+1) * 400)
});
setTimeout(() => {
logoSpan.forEach((span, idx) => {
setTimeout(() => {
span.classList.remove('active');
span.classList.add('fade');
}, (idx+1) * 50)
})
}, 2000);
setTimeout(() => {
intro.style.top = `-100vh`;
}, 2300);
})
})참고
Create an Animated Website Intro / Splash Screen With HTML /CSS / JavaScript
https://medium.com/@wooleejaan