Javascript의 매트릭스(및 펄리시) 배경 효과 :)

7927 단어 effectperljavascript
오늘은 쓸데없지만 멋진 것을 보여드리려고 합니다.

내 매트릭스 펄리쉬 배경! 😎 😎 😎



내 github 페이지를 확인하여 live preview 😀

그것은 here 또는 here에서 찾을 수 있는 작업에서 파생된 자바스크립트의 두 줄에 불과하므로 크레딧이 전혀 필요하지 않지만 더 멸시하게 보이도록 간단히 수정했습니다! 👍

(또는 p@r]i$% 원하시면 😀)

전체 코드 아래:

<html>
  <head>
  </head>
  <body>
    <!-- background animations -->
    <div class="div_bg">
      <canvas id="c"></canvas>
    </div>
    <script>
      var c = document.getElementById("c");
      var ctx = c.getContext("2d");
      c.height = window.innerHeight;
      c.width = window.innerWidth;
      var txts = "~!@#$%^&*)(_-=+;:{}[]|\/<>,.";
      txts = txts.split("");
      var font_size = 12;
      var columns = c.width / font_size;
      var drops = [];
      for (var x = 0; x < columns; x++) drops[x] = 1;

      function draw() {
        ctx.fillStyle = "rgba(255, 255, 255, 0.05)";
        ctx.fillRect(0, 0, c.width, c.height);
        ctx.fillStyle = "#000";
        ctx.font = font_size + "px arial";
        for (var i = 0; i < drops.length; i++) {
          var text = txts[Math.floor(Math.random() * txts.length)];
          ctx.fillText(text, i * font_size, drops[i] * font_size);
          if (drops[i] * font_size > c.height || Math.random() > 0.98) drops[i] = 0;
          drops[i]++;
        }
      }
      setInterval(draw, 20);
    </script>
  </body>
</html>
비공개 레지스트리에서 공개 npm 패키지를 호스팅해야 하는 이유
임의의 형식으로 그림의 견본을 절취하다

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage