09/01/2023 Update

GabsEdits · Jan 9, 2023 · 294f535 · 294f535
1 parent 298a9c7
commit 294f535
Show file tree

Hide file tree

Showing 3 changed files with 114 additions and 147 deletions.
diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@
 </div>
 
 ## Change log (dd/mm/yyyy)
-* *09/01/2023* Fixed all the Grammer Issues and changed the README.md design
+* *09/01/2023* Fixed all the Grammer Issues, changed the README.md design made a new color palette and new cursor
 * *27/12/2022* Fixed `Find Me` tab
 * *26/12/2022* Added my telegram, changed the about me tab to bio and updated the projects list
 * *25/12/2022*  Added a Christmas Icon

diff --git a/index.html b/index.html
@@ -12,9 +12,13 @@
 
 </head>
 <body>
-    <div class="curzr" hidden>
-    <div class="curzr-dot"></div>
-  </div>
+
+  <svg class="curzr" hidden>
+    <filter id="motionblur" x="-100%" y="-100%" width="400%" height="400%">
+      <feGaussianBlur class="curzr-motion-blur" stdDeviation="0, 0"/>
+    </filter>
+    <circle cx="50%" cy="50%" r="7" fill="#120D27" filter="url(#motionblur)" />
+  </svg>
 
 <!-- partial:index.partial.html -->
 <div id="app">

diff --git a/script.js b/script.js
@@ -7,150 +7,113 @@ new Vue({
     } });
 
 
-class CircleAndDot {
-  constructor() {
-    this.root = document.body
-    this.cursor = document.querySelector(".curzr")
-
-    this.position = {
-      distanceX: 0, 
-      distanceY: 0,
-      distance: 0,
-      pointerX: 0,
-      pointerY: 0,
-    },
-    this.previousPointerX = 0
-    this.previousPointerY = 0
-    this.angle = 0
-    this.previousAngle = 0
-    this.angleDisplace = 0
-    this.degrees = 57.296
-    this.cursorSize = 20
-    this.fading = false
-
-    this.cursorStyle = {
-      boxSizing: 'border-box',
-      position: 'fixed',
-      top: `${ this.cursorSize / -2 }px`,
-      left: `${ this.cursorSize / -2 }px`,
-      zIndex: '2147483647',
-      width: `${ this.cursorSize }px`,
-      height: `${ this.cursorSize }px`,
-      backgroundColor: '#fff0',
-      border: '1.25px solid #111920',
-      borderRadius: '50%',
-      boxShadow: '0 -15px 0 -8px #0000',
-      transition: '250ms, transform 100ms',
-      userSelect: 'none',
-      pointerEvents: 'none'
-    }
-
-    this.init(this.cursor, this.cursorStyle)
-  }
-
-  init(el, style) {
-    Object.assign(el.style, style)
-    this.cursor.removeAttribute("hidden")
+    class MotionBlur {
+      constructor() {
+        this.root = document.body
+        this.cursor = document.querySelector(".curzr")
+        this.filter = document.querySelector(".curzr-motion-blur")
 
-    document.body.style.cursor = 'none'
-    document.body.querySelectorAll("button, label, input, textarea, select, a").forEach((el) => {
-      el.style.cursor = 'inherit'
-    })
-  }
-
-  move(event) {
-    this.previousPointerX = this.position.pointerX
-    this.previousPointerY = this.position.pointerY
-    this.position.pointerX = event.pageX + this.root.getBoundingClientRect().x
-    this.position.pointerY = event.pageY + this.root.getBoundingClientRect().y
-    this.position.distanceX = this.previousPointerX - this.position.pointerX
-    this.position.distanceY = this.previousPointerY - this.position.pointerY
-    this.distance = Math.sqrt(this.position.distanceY ** 2 + this.position.distanceX ** 2)
-
-    if (event.target.localName === 'button' || 
-        event.target.localName === 'a' || 
-        event.target.onclick !== null ||
-        event.target.className.includes('curzr-hover')) {
-      this.hover()
-    } else {
-      this.hoverout()
-    }
-
-    this.cursor.style.transform = `translate3d(${this.position.pointerX}px, ${this.position.pointerY}px, 0)`
-
-    this.rotate(this.position)
-    this.fade(this.distance)
-  }
-
-  rotate(position) {
-    let unsortedAngle = Math.atan(Math.abs(position.distanceY) / Math.abs(position.distanceX)) * this.degrees
-    this.previousAngle = this.angle
-
-    if (position.distanceX <= 0 && position.distanceY >= 0) {
-      this.angle = 90 - unsortedAngle + 0
-    } else if (position.distanceX < 0 && position.distanceY < 0) {
-      this.angle = unsortedAngle + 90
-    } else if (position.distanceX >= 0 && position.distanceY <= 0) {
-      this.angle = 90 - unsortedAngle + 180
-    } else if (position.distanceX > 0 && position.distanceY > 0) {
-      this.angle = unsortedAngle + 270
+        this.position = {
+          distanceX: 0, 
+          distanceY: 0,
+          pointerX: 0,
+          pointerY: 0,
+        },
+        this.previousPointerX = 0
+        this.previousPointerY = 0
+        this.angle = 0
+        this.previousAngle = 0
+        this.angleDisplace = 0
+        this.degrees = 57.296
+        this.cursorSize = 22
+        this.moving = false
+
+        this.cursorStyle = {
+          boxSizing: 'border-box',
+          position: 'fixed',
+          top: `${ this.cursorSize / -2 }px`,
+          left: `${ this.cursorSize / -2 }px`,
+          zIndex: '2147483647',
+          width: `${ this.cursorSize }px`,
+          height: `${ this.cursorSize }px`,
+          borderRadius: '50%',
+          overflow: 'visible',
+          transition: '200ms, transform 10ms',
+          userSelect: 'none',
+          pointerEvents: 'none'
+        }
+
+        this.init(this.cursor, this.cursorStyle)
+      }
+
+      init(el, style) {
+        Object.assign(el.style, style)
+        this.cursor.removeAttribute("hidden")
+
+        document.body.style.cursor = 'none'
+        document.body.querySelectorAll("button, label, input, textarea, select, a").forEach((el) => {
+          el.style.cursor = 'inherit'
+        })
+      }
+
+      move(event) {
+        this.previousPointerX = this.position.pointerX
+        this.previousPointerY = this.position.pointerY
+        this.position.pointerX = event.pageX + this.root.getBoundingClientRect().x
+        this.position.pointerY = event.pageY + this.root.getBoundingClientRect().y
+        this.position.distanceX = Math.min(Math.max(this.previousPointerX - this.position.pointerX, -20), 20)
+        this.position.distanceY = Math.min(Math.max(this.previousPointerY - this.position.pointerY, -20), 20)
+
+        this.cursor.style.transform = `translate3d(${this.position.pointerX}px, ${this.position.pointerY}px, 0)`
+        this.rotate(this.position)
+        this.moving ? this.stop() : this.moving = true
+      }
+
+      rotate(position) {
+        let unsortedAngle = Math.atan(Math.abs(position.distanceY) / Math.abs(position.distanceX)) * this.degrees
+
+        if (isNaN(unsortedAngle)) {
+          this.angle = this.previousAngle
+        } else {
+          if (unsortedAngle <= 45) {
+            if (position.distanceX * position.distanceY >= 0) {
+              this.angle = +unsortedAngle
+            } else {
+              this.angle = -unsortedAngle
+            }
+            this.filter.setAttribute('stdDeviation', `${Math.abs(this.position.distanceX / 2)}, 0`)
+          } else {
+            if (position.distanceX * position.distanceY <= 0) {
+              this.angle = 180 - unsortedAngle
+            } else {
+              this.angle = unsortedAngle
+            }
+            this.filter.setAttribute('stdDeviation', `${Math.abs(this.position.distanceY / 2)}, 0`)
+          }
+        }
+        this.cursor.style.transform += ` rotate(${this.angle}deg)`
+        this.previousAngle = this.angle
+      }
+
+      stop() {
+        setTimeout(() => {
+          this.filter.setAttribute('stdDeviation', '0, 0')
+          this.moving = false
+        }, 50)
+      }
+
+      remove() {
+        this.cursor.remove()
+      }
     }
-
-    if (isNaN(this.angle)) {
-      this.angle = this.previousAngle
-    } else {
-      if (this.angle - this.previousAngle <= -270) {
-        this.angleDisplace += 360 + this.angle - this.previousAngle
-      } else if (this.angle - this.previousAngle >= 270) {
-        this.angleDisplace += this.angle - this.previousAngle - 360
+
+    (() => {
+      const cursor = new MotionBlur()
+      if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+        document.onmousemove = function (event) {
+          cursor.move(event)
+        }
       } else {
-        this.angleDisplace += this.angle - this.previousAngle
+        cursor.remove()
       }
-    }
-    this.cursor.style.transform += ` rotate(${this.angleDisplace}deg)`
-  }
-
-  hover() {
-    this.cursor.style.border = '10px solid #111920'
-  }
-
-  hoverout() {
-    this.cursor.style.border = '1.25px solid #111920'
-  }
-
-  fade(distance) {
-    this.cursor.style.boxShadow = `0 ${-15 - distance}px 0 -8px #111920, 0 0 0 1px #F2F5F8`
-    if (!this.fading) {
-      this.fading = true
-      setTimeout(() => {
-        this.cursor.style.boxShadow = '0 -15px 0 -8px #11192000, 0 0 0 1px #F2F5F8'
-        this.fading = false
-      }, 50)
-    }
-  }
-
-  click() {
-    this.cursor.style.transform += ` scale(0.75)`
-    setTimeout(() => {
-      this.cursor.style.transform = this.cursor.style.transform.replace(` scale(0.75)`, '')
-    }, 35)
-  }
-
-  remove() {
-    this.cursor.remove()
-  }
-}
-
-(() => {
-  const cursor = new CircleAndDot()
-  if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
-    document.onmousemove = function (event) {
-      cursor.move(event)
-    }
-    document.onclick = function () {
-      cursor.click()
-    }
-  } else {
-    cursor.remove()
-  }
-})()
+    })()