[HTML/CSS/JS] codepen 페이지에 번개 효과 구현하기

728x90

프로그래밍 세계를 탐구합시다.

codepen의 코드를 사용하여 페이지에 번개 효과를 구현할 수 있습니다.

https://codepen.io/jackrugile/pen/kQwPRO

Canvas Lightning WIP

Work in Progress...

codepen.io

구현 화면

Codepen을 활용하여 멋진 번개 효과를 페이지에 추가할 수 있습니다.

HTML, CSS 그리고 JavaScript의 기본적인 지식이 필요합니다.

아래는 코드 활용 예시입니다.

HTML

<body>
<canvas id="canvas"></canvas>
</body>

CSS

<style>
canvas {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    /* 배경에 번개가 있어도 마우스 이벤트가 동작하지 않도록 합니다. */
  }
  </style>

<script>
var canvasLightning = function (c, cw, ch) {


    this.init = function () {
      this.loop();
    };
    var _this = this;
    this.c = c;
    this.ctx = c.getContext('2d');
    this.cw = cw;
    this.ch = ch;
    this.mx = 0;
    this.my = 0;

    this.lightning = [];
    this.lightTimeCurrent = 0;
    this.lightTimeTotal = 50;

    this.rand = function (rMi, rMa) { return ~~((Math.random() * (rMa - rMi + 1)) + rMi); };
    this.hitTest = function (x1, y1, w1, h1, x2, y2, w2, h2) { return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1); };

    this.createL = function (x, y, canSpawn) {
      this.lightning.push({
        x: x,
        y: y,
        xRange: this.rand(5, 30),
        yRange: this.rand(5, 25),
        path: [{
          x: x,
          y: y
        }],
        pathLimit: this.rand(10, 35),
        canSpawn: canSpawn,
        hasFired: false
      });
    };

    this.updateL = function () {
      var i = this.lightning.length;
      while (i--) {
        var light = this.lightning[i];


        light.path.push({
          x: light.path[light.path.length - 1].x + (this.rand(0, light.xRange) - (light.xRange / 2)),
          y: light.path[light.path.length - 1].y + (this.rand(0, light.yRange))
        });

        if (light.path.length > light.pathLimit) {
          this.lightning.splice(i, 1)
        }
        light.hasFired = true;
      };
    };

    this.renderL = function () {
      var i = this.lightning.length;
      while (i--) {
        var light = this.lightning[i];

        this.ctx.strokeStyle = 'hsla(0, 100%, 100%, ' + this.rand(10, 100) / 100 + ')';
        this.ctx.lineWidth = 1;
        if (this.rand(0, 30) == 0) {
          this.ctx.lineWidth = 2;
        }
        if (this.rand(0, 60) == 0) {
          this.ctx.lineWidth = 3;
        }
        if (this.rand(0, 90) == 0) {
          this.ctx.lineWidth = 4;
        }
        if (this.rand(0, 120) == 0) {
          this.ctx.lineWidth = 5;
        }
        if (this.rand(0, 150) == 0) {
          this.ctx.lineWidth = 6;
        }

        this.ctx.beginPath();

        var pathCount = light.path.length;
        this.ctx.moveTo(light.x, light.y);
        for (var pc = 0; pc < pathCount; pc++) {

          this.ctx.lineTo(light.path[pc].x, light.path[pc].y);

          if (light.canSpawn) {
            if (this.rand(0, 100) == 0) {
              light.canSpawn = false;
              this.createL(light.path[pc].x, light.path[pc].y, false);
            }
          }
        }

        if (!light.hasFired) {
          this.ctx.fillStyle = 'rgba(255, 255, 255, ' + this.rand(4, 12) / 100 + ')';
          this.ctx.fillRect(0, 0, this.cw, this.ch);
        }

        if (this.rand(0, 30) == 0) {
          this.ctx.fillStyle = 'rgba(255, 255, 255, ' + this.rand(1, 3) / 100 + ')';
          this.ctx.fillRect(0, 0, this.cw, this.ch);
        }

        this.ctx.stroke();
      };
    };


    this.lightningTimer = function () {
      this.lightTimeCurrent++;
      if (this.lightTimeCurrent >= this.lightTimeTotal) {
        var newX = this.rand(100, cw - 100);
        var newY = this.rand(0, ch / 2);
        var createCount = this.rand(1, 3);
        while (createCount--) {
          this.createL(newX, newY, true);
        }
        this.lightTimeCurrent = 0;
        this.lightTimeTotal = this.rand(200, 400);
      }
    }

    this.clearCanvas = function () {
      this.ctx.globalCompositeOperation = 'destination-out';
      this.ctx.fillStyle = 'rgba(0,0,0,' + this.rand(1, 30) / 100 + ')';
      this.ctx.fillRect(0, 0, this.cw, this.ch);
      this.ctx.globalCompositeOperation = 'source-over';
    };

    $(window).on('resize', function () {
      _this.cw = _this.c.width = window.innerWidth;
      _this.ch = _this.c.height = window.innerHeight;
    });

    this.loop = function () {
      var loopIt = function () {
        requestAnimationFrame(loopIt, _this.c);
        _this.clearCanvas();
        _this.updateL();
        _this.lightningTimer();
        _this.renderL();
      };
      loopIt();
    };

  };

  var isCanvasSupported = function () {
    var elem = document.createElement('canvas');
    return !!(elem.getContext && elem.getContext('2d'));
  };

  var setupRAF = function () {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
      window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
      window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
    };

    if (!window.requestAnimationFrame) {
      window.requestAnimationFrame = function (callback, element) {
        var currTime = new Date().getTime();
        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
        var id = window.setTimeout(function () { callback(currTime + timeToCall); }, timeToCall);
        lastTime = currTime + timeToCall;
        return id;
      };
    };

    if (!window.cancelAnimationFrame) {
      window.cancelAnimationFrame = function (id) {
        clearTimeout(id);
      };
    };
  };

  $(document).ready(function () {
    if (isCanvasSupported) {
      var c = document.getElementById('canvas');
      var cw = c.width = window.innerWidth;
      var ch = c.height = window.innerHeight;
      var cl = new canvasLightning(c, cw, ch);

      setupRAF();
      cl.init();
    }
  });
  window.addEventListener('load', function () {
    if (isCanvasSupported) {
      var c = document.getElementById('canvas');
      var cw = c.width = window.innerWidth;
      var ch = c.height = window.innerHeight;
      var cl = new canvasLightning(c, cw, ch);

      setupRAF();
      cl.init();
    }
  });
</script>

effect.html 와 같이 파일을 만들어서 코드를 적절히 조합하면 위 구현 화면과 같은 효과를 적용할 수 있습니다.

728x90

저작자표시 비영리 변경금지

'IT > Java - Spring Boot' 카테고리의 다른 글

[Spring Boot] 카카오 지도 api 활용하여 지도 출력하기 (1)	2023.11.01
[Spring Boot] 페이지에 상단 바 코딩하기 (0)	2023.11.01
[Spring Boot] 페이지에 사이드 바 코딩하기 (0)	2023.11.01
[Spring Boot] 페이지에 팝업 창 띄우기 (0)	2023.11.01
[Spring Boot] 네이버 뉴스 API 활용해서 특정 키워드 뉴스 페이지에 출력하기 (1)	2023.10.28