add canvas's animations

Author: CodeWithSushil

assets/js/anime.js

@@ -0,0 +1,58 @@
+const canvas2 = document.getElementById('anime');
+const ctx2 = canvas.getContext('2d');
+canvas.style.position = 'fixed';
+canvas.style.top = 0;
+canvas.style.left = 0;
+canvas.style.zIndex = '-1';
+canvas.style.width = '100%';
+canvas.style.height = '100%';
+canvas.style.background = '#0f1720';
+
+let snowflakes = [];
+const numFlakes = 100;
+
+function resizeCanvas(){
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+}
+window.addEventListener('resize', resizeCanvas);
+resizeCanvas();
+
+class Snowflake {
+  constructor(){
+    this.reset();
+  }
+  reset(){
+    this.x = Math.random() * canvas.width;
+    this.y = Math.random() * canvas.height;
+    this.radius = Math.random() * 3 + 1;
+    this.speedY = Math.random() * 1 + 0.5;
+    this.speedX = Math.random() * 0.5 - 0.25;
+  }
+  update(){
+    this.y += this.speedY;
+    this.x += this.speedX;
+    if(this.y > canvas.height){
+      this.y = -this.radius;
+      this.x = Math.random() * canvas.width;
+    }
+  }
+  draw(){
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2);
+    ctx.fillStyle = "rgba(255,255,255,0.9)";
+    ctx.fill();
+  }
+}
+
+for(let i=0;i<numFlakes;i++) snowflakes.push(new Snowflake());
+
+function animate(){
+  ctx.clearRect(0,0,canvas.width,canvas.height);
+  for(let flake of snowflakes){
+    flake.update();
+    flake.draw();
+  }
+  requestAnimationFrame(animate);
+}
+animate();

assets/js/bg.js

@@ -0,0 +1,60 @@
+const canvas = document.getElementById('bgCanvas');
+const ctx = canvas.getContext('2d');
+canvas.style.position = 'fixed';
+canvas.style.top = 0;
+canvas.style.left = 0;
+canvas.style.zIndex = '-1';
+canvas.style.width = '100%';
+canvas.style.height = '100%';
+canvas.style.background = '#0f1720';
+
+let stars = [];
+const numStars = 150;
+
+// Resize
+function resizeCanvas(){
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+}
+window.addEventListener('resize', resizeCanvas);
+resizeCanvas();
+
+// Star class
+class Star {
+  constructor(){
+    this.reset();
+  }
+  reset(){
+    this.x = Math.random() * canvas.width;
+    this.y = Math.random() * canvas.height;
+    this.size = Math.random() * 1.5;
+    this.alpha = Math.random();
+    this.speed = 0.002 + Math.random() * 0.02;
+  }
+  twinkle(){
+    this.alpha += this.speed;
+    if(this.alpha >= 1 || this.alpha <= 0){
+      this.speed *= -1;
+    }
+  }
+  draw(){
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+    ctx.fillStyle = `rgba(255,255,255,${this.alpha})`;
+    ctx.fill();
+  }
+}
+
+// Create stars
+for(let i=0;i<numStars;i++) stars.push(new Star());
+
+// Animate
+function animate(){
+  ctx.clearRect(0,0,canvas.width,canvas.height);
+  for(let s of stars){
+    s.twinkle();
+    s.draw();
+  }
+  requestAnimationFrame(animate);
+}
+animate();

index.html

@@ -46,9 +46,14 @@ <h1 id="modal-title"></h1>
   </div>
 </div>
 
+<canvas id="bgCanvas"></canvas>
+<canvas id="anime"></canvas>
+
 <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
 
 <script src="./assets/js/main.js"></script>
+<script src="./assets/js/anime.js"></script>
+<script src="./assets/js/bg.js"></script>
 </body>
 </html>