intro screen

HTML

.splash로 intro screen 생성 에정

<div class="splash">
  <h1 class="fade-in">Welcome To My Website!</h1>
</div>

<header class="header">Your Name</header>
<section>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus et id dolorem rerum, consectetur provident quae distinctio itaque, eos quasi aperiam nulla alias esse magni nihil, accusamus ab velit molestias?</p>
</section>

<script src="app.js"></script>

CSS

line-height 글 사이 간격
text-align 텍스트 정렬 방향

intro는 처음에만 보여주고 사라져야 하므로
display-none 클래스 붙으면 opacity:0; 붙여줘야

.fade-in
처음에는 0으로 지웠다가 애니메이션으로 스르륵 보여주고 나서 유지하다가
DOM이 로드되면 display-none 붙어서 사라지도록

animation 단축
animation: name | duration | timing-function | delay | iteration-count | direction | fill-mode | play-state> [,...];

animation-timing-function
=> ease-in : 처음에는 느리게, 끝은 빠르게
=> ease-out : 처음에는 빠르게, 끝은 느리게

animation-fill-mode
=> forwards : 애니메이션 끝날 때 요소가 마지막 키프레임 스타일 유지하도록

.header .header.active
=> 글자를 가운데로 배치하려면 그냥 top:0; left:0;으로 고정해두고 text-align:center;로 잡는 게 더 좋다.
active가 붙으면 background:white;로 변경

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, 
body {
  background-color: grey;
  position: relative;
  padding: 8rem;
  height: 100vh;
  border-bottom: rgba(0,0,0,0.1) solid 1px;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4rem;
  text-align: center;
  padding: 1.5rem;
  z-index: 100;
  background: transparent;
  border-bottom: rgba(0,0,0,0.1) solid 1px;
}

.header.active {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4rem;
  text-align: center;
  padding: 1.5rem;
  z-index: 100;
  background: white;
  border-bottom: rgba(0,0,0,0.1) solid 1px;
  transition: all 0.5s;
}

section {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%);
}

.splash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: black;
  z-index: 200;
  color: white;
  text-align: center;
  line-height: 90vh;
}

.splash.display-none {
  position: fixed;
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: black;
  z-index: -10;
  color: white;
  text-align: center;
  line-height: 90vh;
  transition: all 0.5s;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.fade-in {
  opacity: 0;
  animation: fadeIn 1s ease-in forwards;
}

JS

스크롤을 내리면 active 클래스 붙여서 css 변경하기
다시 올라가면 active 클래스 제거

.fade-in > .splash.display-none
처음에는 0으로 지웠다가 애니메이션으로 스르륵 보여주고 나서 유지하다가
DOM이 로드되면 display-none 붙어서 사라지도록

const header = document.querySelector('.header');

window.onscroll = function() {
  let top = window.scrollY;

  if (top >= 100) {
    header.classList.add('active');
  } else {
    header.classList.remove('active');
  }
}

const splash = document.querySelector('.splash');

document.addEventListener('DOMContentLoaded', (e) => {
  setTimeout(() => {
    splash.classList.add('display-none');
  }, 2000);
})

참고

Creating A Simple Website Intro Screen (Splash Screen) Using HTML / CSS / Vanilla JavaScript