Pure SCSS로 밤하늘을 만들어보자!

나는 내 포트폴리오의 새 버전을 작업하고 있었고 학습 측면에서 조금 가자고 생각했습니다. 그래서 나는 조금 조사하고 scss를 사용하기로 결정했습니다.

나는 밤하늘 효과를 만들기로 결정했습니다. 여기 있습니다!

HTML 코드

<div class="main-container">
      <div class="sub-container">
        <div class="sky">
          <div class="stars"></div>
          <div class="stars2"></div>
          <div class="stars3"></div>
          <div class="comet"></div>
        </div>
      </div>
</div>

여기에 특별한 것은 없으며 다양한 크기의 별과 혜성에 대한 몇 가지 div만 있습니다.

좋은 물건으로 넘어갑시다!

상수변수(SCSS)

다양한 속성으로 이동하기 전에 몇 가지 상수를 정의해야 합니다.

$starFieldWidth: 2560;
$starFieldHeight: 2560;
$starStartOffset: 600px;

$starOneScrollDuration: 100s;
$starTwoScrollDuration: 125s;
$starThreeScrollDuration: 175s;
$numStarOneStars: 1700;
$numStarTwoStars: 700;
$numStarThreeStars: 200;
$numComet: 10;

html {
  height: 100%;
  body {
    width: 100%;
    height: 100%;
    margin: 0;
  }
}

그것의 대부분은 자명하다. 크기가 약간 다른 3가지 유형의 별이 있습니다. 전환 기간도 있습니다. 너비와 높이는 별을 약간 퍼뜨립니다. 물론 개인 취향이므로 야생으로 가십시오.

메인 컨테이너

.main-container {
  display: block;
  position: relative;
  width: 1200px;
  height: 600px;
  background: linear-gradient(to bottom, #201c2f 0%, #100751 100%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

너비와 높이를 원하는 대로 변경할 수 있으며 나머지는 중앙에 배치하고 배경에 은하계 느낌을 주기만 하면 됩니다.

별을 만드는 기능

@function create-stars($n) {
  $stars: "#{random($starFieldWidth)}px #{random($starFieldHeight)}px #FFF";

  @for $i from 2 through $n {
    $stars: "#{$stars} , #{random($starFieldWidth)}px #{random($starFieldHeight)}px #FFF";
  }
  @return unquote($stars);
}

우리는 하늘의 임의의 위치에 별을 생성하는 기능을 만들고 있습니다. 이 기능은 그림자로 사용됩니다. 그래서 어떻게 보자!

애니메이션

@keyframes animStar {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-#{$starFieldHeight}px)
      translateX(-#{$starFieldWidth}px);
  }
}

@keyframes animShootingStar {
  from {
    transform: translateY(0px) translateX(0px) rotate(-45deg);
    opacity: 1;
    height: 5px;
  }
  to {
    transform: translateY(-#{$starFieldHeight}px)
      translateX(-#{$starFieldWidth}px) rotate(-45deg);
    opacity: 1;
    height: 800px;
  }
}

보시다시피 애니메이션에서 컨테이너의 오른쪽 하단에서 왼쪽 상단으로 이동하고 있습니다. 그리고 임의의 별이 생성되면서 하늘이 생동감 있게 느껴집니다.

스타 템플릿!

@mixin star-template($numStars, $starSize, $scrollSpeed) {
  z-index: 10;
  width: $starSize;
  height: $starSize;
  border-radius: 50%;
  background: transparent;
  box-shadow: create-stars($numStars);
  animation: animStar $scrollSpeed linear infinite;
  &:after {
    content: " ";
    top: -$starStartOffset;
    width: $starSize;
    height: $starSize;
    border-radius: 50%;
    position: absolute;
    background: transparent;
    box-shadow: create-stars($numStars);
  }
}

@mixin shooting-star-template($numStars, $starSize, $speed) {
  z-index: 10;
  width: $starSize;
  height: $starSize + 80px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  position: absolute;
  bottom: 0;
  right: 0;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 1)
  );
  animation: animShootingStar $speed linear infinite;
}

scss에 익숙하지 않은 사용자를 위해 믹스인을 사용하면 스타일시트 전체에서 재사용할 수 있는 스타일을 정의할 수 있습니다.
여러 번 호출할 수 있는 구성 요소/함수와 비슷합니다.

여기서 별 템플릿은 위의 기능을 사용하여 별을 생성합니다.

위의 코드가 작동할까요?

설마. 믹스인을 사용하지 않으면 결과가 표시되지 않으므로 결과를 얻으려면 @include 를 사용해야 합니다.

.stars {
  @include star-template($numStarOneStars, 1px, $starOneScrollDuration);
}
.stars2 {
  @include star-template($numStarTwoStars, 2px, $starTwoScrollDuration);
}
.stars3 {
  @include star-template($numStarThreeStars, 3px, $starThreeScrollDuration);
}
.comet {
  @include shooting-star-template($numComet, 5px, 10s);
}

작업 펜

그리고 끝입니다! 아주 간단하죠? 다음 프로젝트에서 사용하고 어떻게 작동했는지 알려주세요.