웹사이트용 프리로더

이 게시물에서는 쉬운 프리로더를 만들 것입니다. 이 프로젝트에서는 HTML, SCSS 및 약간의 JavaScript를 사용합니다.

아래와 같이 페이지에 일부 콘텐츠를 추가하는 것부터 시작하겠습니다.

<div class="content">
  <h1>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi vero nesciunt modi, incidunt ea similique reiciendis provident eligendi suscipit omnis.</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores odit accusamus ipsa velit consequatur porro dolores at voluptatum. Obcaecati ipsa earum fugit. Rem ad quidem quos vel assumenda aperiam, unde, maxime ipsum natus laborum vero quia consequatur accusamus explicabo ullam aliquid iste similique officiis nihil, voluptate quasi recusandae. Labore voluptas facilis molestias corrupti explicabo mollitia earum cum, eius commodi neque saepe vitae aliquam quis id. Necessitatibus delectus doloribus officia ducimus sequi, error itaque repellat accusantium repellendus? Tenetur repellat obcaecati, perspiciatis accusamus ipsum excepturi nesciunt autem distinctio dolore quis qui facilis necessitatibus dolorum doloribus libero est mollitia saepe minus beatae quae expedita soluta ex ducimus. Blanditiis fugiat non officia illum. Iusto, eos dolores rerum necessitatibus eaque odio, atque, inventore amet neque libero modi ut blanditiis corrupti nam harum repellat soluta officiis tempore iste est natus omnis. Omnis nisi, fugit molestias minus recusandae quos. Reiciendis laudantium dicta natus? Iste eaque placeat cumque adipisci deleniti recusandae, labore velit, totam quaerat, error debitis ipsa ratione neque! Porro suscipit laboriosam minima, possimus facilis esse, rerum, error nesciunt repellat ipsum necessitatibus? Similique, sapiente aliquid. Non quisquam laudantium, ipsa minus eaque laboriosam deserunt neque eveniet quae porro quod, dolor corporis! Praesentium cupiditate, itaque libero eum perspiciatis quod.</p>
</div>

그리고 프리로더 자체

<div class="preload">
  <div class="circle__1">
  </div>
  <div class="circle__2">
  </div>
  <div class="circle__3">
  </div>
</div>

HTML이 완료되었습니다. 이제 SCSS를 사용할 시간입니다.

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 22px;
  font-family: 'Poppins', sans-serif;
}
body{
  background-color: #2e2e2e;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.preload{
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #1b1b1b;
  transition: 400ms linear;
         ...
}
.content{
  margin: 0 auto;
  margin-top: 100px;
  padding: 20px;
  width: min(calc(100% - 2rem), 1000px);
  background-color: #252525;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 8px;
  box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.719);
  h1{
    color: lime;
    font-size: 1.4rem;
  }
  p{
    margin-top: 30px;
    color: #b8b8b8;
  }
}

이제 sass for 루프를 사용하여 원의 스타일을 지정합니다.

@for $i from 1 through 3 {
  .circle__#{$i} {
    border: 4px solid lime;
    border-radius: 50%;
    position: absolute;
    filter: drop-shadow(0px 0px 5px lime);
    width: calc(250px - $i * 50px);
    aspect-ratio: 1 / 1;
    animation: calc(1.4s - $i * 0.2s) spin linear infinite;
  }
}

개별 서클 스타일 지정

.circle {
  &__1 {
    border-color: lime lime lime transparent;
  }
  &__2 {
    border-color: transparent transparent lime lime;
  }
  &__3 {
    border-color: lime transparent transparent lime;
  }
}

하지만 아직 애니메이션이 없으므로 추가해 보겠습니다.

@keyframes spin{
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

자바스크립트를 사용할 때입니다. 페이지가 로드된 후 프리로더를 제거하고 싶습니다.

window.addEventListener('load', () => {
  document.querySelector('.preload').classList.add('finished')
})

프리로더에서 '완료' 클래스에 대한 스타일을 추가해 보겠습니다.

&.finished {
  transform: translateY(-100%);
}

하지만 좋지 않아 보입니다. 서클에 일부 페이드아웃 애니메이션을 추가하고 프리로더 슬라이드 아웃 효과를 지연할 수 있는 문제를 해결하기 위해 완성된 클래스에 이 루프를 추가하겠습니다.

@for $i from 1 through 3 {
  .circle__#{$i} {
    opacity: 0;
    transition: 400ms linear;
  }
}

예압 등급의 지연

transition-delay: 500ms;

그러나 JS에서 setTimeout을 사용하도록 수정하기 위해 여전히 약간 빠르게 사라집니다.

window.addEventListener('load', () => {
  setTimeout(() => {
    document.querySelector('.preload').classList.add('finished')
  }, 1000)
})

완성된 프리로더는 다음과 같습니다.



찾을 수 있는 모든 소스 코드Here
또는 이 프리로더의 유사한 버전Codepen