Snow ❄️ 효과를 표시하기 위해 Angular 구성요소 빌드

2020년이 저물어가고 추석 연휴가 다가오고 있습니다. 당신과 나에게 정말 특별한 한 해였습니다. 저는 다른 곳을 여행하지 않고 8개월 이상 싱가포르에 머물고 있습니다. 아마도 나는 다가오는 구정 연휴에 집으로 돌아갈 수 없을 것입니다. 하지만 힘든 시간은 우리를 더 강하게 만들 것입니다. 그렇게 믿습니다 :)

Jira 클론 스노우 테마

순전히 CSS로 작성된 Awesomecodepen을 기반으로 Jira Clone용 빠른 눈 테마를 만들었습니다.

내 결과입니다 -> https://jira.trungk18.com/project/issue/2020

눈 성분

계속해서 새 SnowComponent를 생성하십시오. 우리는 그 구성 요소로 아무 것도 할 필요가 없습니다. 무거운 부분은 템플릿과 스타일링입니다.

import { Component } from '@angular/core'

@Component({
  selector: 'app-snow',
  templateUrl: './snow.component.html',
  styleUrls: ['./snow.component.css'],
})
export class SnowComponent {}

scss 파일을 열고 아래 코드를 붙여넣습니다. 기본적으로 각 눈송이에는 임의의 위치, 불투명도 및 지연이 있습니다. 그리고 다른 keyframe 애니메이션을 생성하여 적용했습니다.

코드는 매우 짧아 보이지만 CSS 컴파일 버전은 엄청날 수 있습니다. 😂

@function random_range($min, $max) {
  $rand: random();
  $random_range: $min + floor($rand * (($max - $min) + 1));
  @return $random_range;
}

.snow {
  $total: 200;
  position: absolute;
  width: 20px;
  height: 20px;
  font-size: 20px;
  border-radius: 50%;
  pointer-events: none;
  color: #a3b1bc;

  @for $i from 1 through $total {
    $random-x: random(1000000) * 0.0001vw;
    $random-offset: random_range(-100000, 100000) * 0.0001vw;
    $random-x-end: $random-x + $random-offset;
    $random-x-end-yoyo: $random-x + ($random-offset / 2);
    $random-yoyo-time: random_range(30000, 80000) / 100000;
    $random-yoyo-y: $random-yoyo-time * 100vh;
    $random-scale: random(10000) * 0.0001;
    $fall-duration: random_range(10, 30) * 1s;
    $fall-delay: random(30) * -1s;

    &:nth-child(#{$i}) {
      opacity: random(8000) * 0.0001;
      transform: translate($random-x, -10px) scale($random-scale);
      animation: fall-#{$i} $fall-duration $fall-delay linear infinite;
    }

    @keyframes fall-#{$i} {
      #{percentage($random-yoyo-time)} {
        transform: translate($random-x-end, $random-yoyo-y) scale($random-scale);
      }

      to {
        transform: translate($random-x-end-yoyo, 100vh) scale($random-scale);
      }
    }
  }
}

마지막으로 스노우 템플릿입니다. 그것은 단지 <div class="snow"> 의 묶음일 뿐이며, div 의 정확한 수는 스타일링에서 정의한 $total 변수와 같아야 합니다.

<div class="snow">❅</div>
<div class="snow">❅</div>
<div class="snow">❅</div>
<div class="snow">❅</div>
<div class="snow">❅</div>
<!-- code remove for brevity -->

이제 구성 요소에 눈 구성 요소를 적용할 수 있습니다. 그게 다야. 아래 결과를 참조하십시오.

본문에 대해 오버플로를 숨김으로 설정

위의 결과에 주목하십시오. 세로 및 가로 스크롤 막대가 모두 있습니다. 우리는 그런 일이 일어나기를 원하지 않습니다.

수정하려면 style.css에 overflow: hidden에 대해 body를 추가합니다.

body {
  overflow: hidden;
}

끝났어! 아래의 최종 소스 코드 및 출력을 참조하십시오.

소스 코드