Change background animation

.eslintrc.js

@@ -13,6 +13,9 @@ module.exports = {
     "@moritzruth",
     "@moritzruth/eslint-config/vue"
   ],
+  rules: {
+    "no-unused-vars": "warn"
+  },
   "settings": {
     "import/resolver": {
       webpack: {

assets/js/background-canvas.js

@@ -1,21 +1,18 @@
 /* eslint-disable no-extra-parens */
-const PROBABILITY = 1 / 10000;
-const MIN_RADIUS = 1;
-const MAX_RADIUS = 4;
-const FADE_DURATION = 5000;
-const FADE_PROBABILITY = 1 / 100;
-const THREESIXTY_DEGREES = Math.PI / 180 * 360;
+const PROBABILITY = 1 / 50000;
+const HEIGHT = 2;
+const MIN_LINE_LENGTH = 20;
+const MAX_LINE_LENGTH = 300;
+const SPEED = 0.4;
+const APPEAR_PROBABILITY = 1;
 
 const COLORS = [
-  "0,0,0",
-  "0,255,100",
-  "0,100,255"
+  "#000000",
+  "#00ff64",
+  "rgba(0,255,100,0.2)",
+  "#0064ff"
 ];
 
-function getStyleString (color, alpha) {
-  return `rgba(${color},${alpha})`;
-}
-
 function randomBetween (min, max) {
   return (Math.random() * (max - min)) + min;
 }
@@ -26,11 +23,9 @@ export class BackgroundCanvas {
     this._ctx = element.getContext("2d");
     this._destroyed = false;
     this._animationFrameRequestID = null;
-    this._points = [];
-    this._transformation = [0, 0];
+    this._lines = null;
     this.width = null;
     this.height = null;
-    this._isTouch = false;
 
     this._windowListeners = {
       touchstart: () => {
@@ -39,12 +34,6 @@ export class BackgroundCanvas {
       resize: () => {
         this._points = [];
         this._init();
-      },
-      mousemove: event => {
-        if (this._isTouch) return;
-
-        const { clientX: x, clientY: y } = event;
-        this._transformation = [(this.width / 2) - x, (this.height / 2) - y];
       }
     };
 
@@ -83,19 +72,20 @@ export class BackgroundCanvas {
     this.width = this._element.clientWidth;
     this.height = this._element.clientHeight;
 
+    while (this._lines === null || this._lines.length < 8) {
+      this._lines = [];
+
       for (let x = 0; x < this.width; x += 1) {
         for (let y = 0; y < this.height; y += 1) {
           if (Math.random() < PROBABILITY) {
-          const radius = randomBetween(MIN_RADIUS, MAX_RADIUS);
-          const z = randomBetween(-0.2, 0.2);
             const color = Math.round(Math.random() * (COLORS.length - 1));
+            const length = 0;
 
-          this._points.push([x, y, z, radius, color]);
+            this._lines.push({ x, y, color, length });
+          }
         }
       }
     }
-
-    console.log("Count of points:", this._points.length);
   }
 
   _loop() {
@@ -111,40 +101,23 @@ export class BackgroundCanvas {
   _draw() {
     // eslint-disable-next-line unicorn/prevent-abbreviations
     const ctx = this._ctx;
-    const [transformX, transformY] = this._transformation;
 
     ctx.clearRect(0, 0, this.width, this.height);
 
-    let first = true;
-    for (const point of this._points) {
-      const [x, y, z, radius, color] = point;
-      let [,,,,, fadeStartTime] = point;
-
-      let fadeProgress = 0;
-
-      if (fadeStartTime === undefined) {
-        if (Math.random() < FADE_PROBABILITY) {
-          fadeStartTime = Date.now();
-          point[5] = fadeStartTime;
+    for (const line of this._lines) {
+      if (line.length === 0) {
+        if (Math.random() < APPEAR_PROBABILITY) {
+          line.length = randomBetween(MIN_LINE_LENGTH, MAX_LINE_LENGTH);
         }
-      } else {
-        fadeProgress = (Date.now() - fadeStartTime) / FADE_DURATION;
       }
 
-      ctx.fillStyle = getStyleString(COLORS[color], fadeProgress);
+      ctx.fillStyle = COLORS[line.color];
+      ctx.fillRect(line.x, line.y, line.length, HEIGHT);
 
-      ctx.beginPath();
-      ctx.arc(x + (transformX * z), y + (transformY * z), radius, 0, THREESIXTY_DEGREES);
-      ctx.fill();
+      line.x += SPEED;
 
-      point[0] = x + 0.5;
-
-      if (point[0] > this.width) {
-        point[0] = 0;
-      }
-
-      if (first) {
-        first = false;
+      if (line.x >= this.width) {
+        line.x = -line.length;
       }
     }
   }

components/AnimatedLogo.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="animated-logo">
-    <svg class="animated-logo__svg" xmlns="http://www.w3.org/2000/svg" viewBox="76.75 182.661 358.5 146.679" width="358.5pt" height="146.679pt">
+    <svg class="animated-logo__svg" xmlns="http://www.w3.org/2000/svg" viewBox="76.75 182.661 358.5 146.679">
       <path class="animated-logo__m1" d=" M 121.75 182.749 L 166.75 329.339 L 76.75 329.339 L 121.75 182.749 Z " fill-rule="evenodd" fill="currentColor"/>
       <path class="animated-logo__m2" d=" M 206.75 182.749 L 251.75 329.339 L 161.75 329.339 L 206.75 182.749 Z " fill-rule="evenodd" fill="currentColor"/>
       <path class="animated-logo__r1" d=" M 327.25 182.705 L 372.25 329.295 L 282.25 329.295 L 327.25 182.705 Z " fill-rule="evenodd" fill="currentColor"/>
@@ -21,18 +21,21 @@
   $slide-length: 37.5%;
 
   .animated-logo {
-    width: 350px;
+    width: 250px;
+    max-width: 60vw;
 
     animation: scaleUp $scale-up-duration ease-out both;
   }
 
   .animated-logo__svg {
     width: 100%;
+
+    margin-bottom: 40px;
   }
 
   .animated-logo__name {
     font-size: 2rem;
-    animation: fadeIn $slide-duration $slide-delay ease both;
+    animation: fadeIn $slide-duration $scale-up-duration ease both;
     text-align: center;
   }
 

pages/index.vue

@@ -36,7 +36,7 @@
   }
 
   .index-page__background {
-    position: absolute;
+    position: fixed;
     top: 0;
     left: 0;
     right: 0;
@@ -45,6 +45,18 @@
     height: 100vh;
 
     z-index: -1;
+
+    animation: appear 2s 1.2s linear both;
+  }
+
+  @keyframes appear {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
   }
 
   .index-page__socials {