Lite v1.1.2

Confetti.js

@@ -0,0 +1,193 @@
+// 전역 변수 선언
+var canvas, ctx, W, H; // 캔버스와 그리기 컨텍스트, 폭과 높이
+var mp = 150; // 생성할 입자의 수
+var particles = [], // 입자 배열
+  angle = 0, // 입자의 각도
+  tiltAngle = 0; // 입자의 기울기 각도
+var confettiActive = true, // 색종이 애니메이션 활성 상태
+  animationComplete = true; // 애니메이션 완료 여부
+var animationHandler; // 타이머 핸들러
+
+// 색상 설정 객체
+var particleColors = {
+  colorOptions: [
+    "DodgerBlue",
+    "OliveDrab",
+    "Gold",
+    "pink",
+    "SlateBlue",
+    "lightblue",
+    "Violet",
+    "PaleGreen",
+    "SteelBlue",
+    "SandyBrown",
+    "Chocolate",
+    "Crimson",
+  ],
+  colorIndex: 0,
+  colorIncrementer: 0,
+  colorThreshold: 10,
+  getColor: function () {
+    if (this.colorIncrementer >= this.colorThreshold) {
+      this.colorIncrementer = 0;
+      this.colorIndex++;
+      if (this.colorIndex >= this.colorOptions.length) {
+        this.colorIndex = 0;
+      }
+    }
+    this.colorIncrementer++;
+    return this.colorOptions[this.colorIndex];
+  },
+};
+
+// 입자 생성자 함수
+function confettiParticle(color) {
+  this.x = Math.random() * W; // 랜덤 x 좌표
+  this.y = Math.random() * H - H; // 랜덤 y 좌표 (위에서 시작)
+  this.r = RandomFromTo(10, 15); // 랜덤 반지름
+  this.d = Math.random() * mp + 10; // 입자의 깊이
+  this.color = color; // 입자의 색상
+  this.tilt = Math.floor(Math.random() * 10) - 10; // 랜덤 기울기
+  this.tiltAngleIncremental = Math.random() * 0.07 + 0.05; // 기울기 변화량
+  this.tiltAngle = 0; // 초기 기울기 각도
+
+  // 입자를 그리는 함수
+  this.draw = function () {
+    ctx.beginPath();
+    ctx.lineWidth = this.r / 2; // 선의 두께
+    ctx.strokeStyle = this.color; // 선 색상
+    ctx.moveTo(this.x + this.tilt + this.r / 4, this.y);
+    ctx.lineTo(this.x + this.tilt, this.y + this.tilt + this.r / 4);
+    return ctx.stroke(); // 입자 그리기
+  };
+}
+
+// 글로벌 변수 설정 함수
+function SetGlobals() {
+  canvas = document.getElementById("Confetti_Canvas");
+  ctx = canvas.getContext("2d");
+  W = window.innerWidth;
+  H = window.innerHeight;
+  canvas.width = W; // 캔버스 폭 설정
+  canvas.height = H; // 캔버스 높이 설정
+}
+
+// 색종이 효과 초기화 함수
+function InitializeConfetti() {
+  StopConfetti(); // 이전 애니메이션 종료
+  particles = []; // 입자 배열 초기화
+  animationComplete = false; // 애니메이션 비활성화
+  for (var i = 0; i < mp; i++) {
+    var particleColor = particleColors.getColor(); // 색상 가져오기
+    particles.push(new confettiParticle(particleColor)); // 입자 생성
+  }
+  StartConfetti(); // 애니메이션 시작
+}
+
+// 그리기 함수
+function Draw() {
+  ctx.clearRect(0, 0, W, H); // 캔버스 지우기
+  for (var i = 0; i < mp; i++) {
+    particles[i].draw(); // 각 입자 그리기
+  }
+  Update(); // 입자 업데이트
+}
+
+// 랜덤 수 생성 함수
+function RandomFromTo(from, to) {
+  return Math.floor(Math.random() * (to - from + 1) + from);
+}
+
+// 입자 업데이트 함수
+function Update() {
+  var remainingFlakes = 0; // 남은 입자 수
+  var particle;
+
+  for (var i = 0; i < mp; i++) {
+    particle = particles[i];
+
+    if (animationComplete) return; // 애니메이션이 완료되면 종료
+
+    if (!confettiActive && particle.y < -15) {
+      particle.y = H + 100; // 화면 밖으로 나가면 재위치
+      continue;
+    }
+
+    stepParticle(particle); // 입자 움직임 처리
+
+    if (particle.y <= H) {
+      remainingFlakes++; // 화면에 남은 입자 수 체크
+    }
+    CheckForReposition(particle, i); // 입자 재위치 확인
+  }
+
+  if (remainingFlakes === 0) {
+    StopConfetti(); // 모든 입자가 화면에서 사라지면 애니메이션 종료
+  }
+}
+
+// 입자 재위치 확인 함수
+function CheckForReposition(particle) {
+  if (
+    (particle.x > W + 20 || particle.x < -20 || particle.y > H) &&
+    confettiActive
+  ) {
+    repositionParticle(
+      particle,
+      Math.random() * W, // 랜덤 x 좌표
+      -10, // 랜덤 y 좌표
+      Math.floor(Math.random() * 10) - 20 // 랜덤 기울기
+    );
+  }
+}
+
+// 입자 움직임 처리 함수
+function stepParticle(particle) {
+  particle.tiltAngle += particle.tiltAngleIncremental; // 기울기 각도 업데이트
+  particle.y += (Math.cos(angle + particle.d) + 3 + particle.r / 2) / 3; // y 위치 업데이트
+  particle.x += Math.sin(angle); // x 위치 업데이트
+  particle.tilt = Math.sin(particle.tiltAngle) * 15; // 기울기 업데이트
+}
+
+// 입자 재위치 함수
+function repositionParticle(particle, xCoordinate, yCoordinate, tilt) {
+  particle.x = xCoordinate; // 새로운 x 좌표
+  particle.y = yCoordinate; // 새로운 y 좌표
+  particle.tilt = tilt; // 새로운 기울기
+}
+
+// 애니메이션 시작 함수
+function StartConfetti() {
+  (function animloop() {
+    if (animationComplete) return null; // 애니메이션이 완료되면 종료
+    animationHandler = requestAnimFrame(animloop); // 애니메이션 루프 요청
+    return Draw(); // 그리기
+  })();
+}
+
+// 애니메이션 종료 함수
+function StopConfetti() {
+  animationComplete = true; // 애니메이션 완료 상태로 설정
+  if (ctx === undefined) return; // 컨텍스트가 정의되지 않았으면 종료
+  ctx.clearRect(0, 0, W, H); // 캔버스 지우기
+  cancelAnimationFrame(animationHandler); // 현재 애니메이션 프레임 취소
+}
+
+// 요청 애니메이션 프레임 함수
+window.requestAnimFrame = (function () {
+  return (
+    window.requestAnimationFrame ||
+    window.webkitRequestAnimationFrame ||
+    window.mozRequestAnimationFrame ||
+    window.oRequestAnimationFrame ||
+    window.msRequestAnimationFrame ||
+    function (callback) {
+      return window.setTimeout(callback, 1000 / 60); // 60fps
+    }
+  );
+})();
+
+// DOM이 준비되면 실행
+$(document).ready(function () {
+  SetGlobals(); // 글로벌 변수 설정
+});