Merge pull request #540 from maniacedoc/feature/maniacedoc

Adding animation in cursor

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-    "liveServer.settings.port": 5501
+    "liveServer.settings.port": 5502
 }

cursor.js

@@ -0,0 +1,178 @@
+class Cursor {
+    constructor(t) {
+        this.bindAll(this, ["resize", "move", "touch", "draw"]),
+        this.colors = t.colors,
+        this.D = document,
+        this.W = window,
+        this.container = t.el,
+        this.time = t.time,
+        this.char = t.character,
+        this.particles = [],
+        this.init()
+    }
+    hasTouch() {
+        var t = "ontouchstart"in this.D
+          , s = navigator.msMaxTouchPoints && navigator.msMaxTouchPoints > 1
+          , i = !!this.W.navigator.msPointerEnabled;
+        return t || s || i
+    }
+    init() {
+        this.resize(),
+        this.events(),
+        this.draw()
+    }
+    events() {
+        this.W.addEventListener("resize", this.resize),
+        this.hasTouch() ? (this.D.addEventListener("touchmove", this.touch),
+        this.D.addEventListener("touchstart", this.touch)) : this.D.addEventListener("mousemove", this.move)
+    }
+    draw() {
+        requestAnimationFrame(this.draw),
+        this.update()
+    }
+    resize() {
+        this.win = {
+            W: this.W.innerWidth,
+            H: this.W.innerHeight
+        },
+        this.cursor = {
+            x: this.win.W / 2,
+            y: this.win.W / 2
+        }
+    }
+   /* move(t) {
+        this.cursor.x = t.clientX,
+        this.cursor.y = t.clientY,
+        console.log(`Cursor position: (${this.cursor.x}, ${this.cursor.y})`),
+
+        this.create(this.cursor.x, this.cursor.y, this.colors[Math.floor(Math.random() * this.colors.length)])
+    }
+    touch(t) {
+        if (t.touches.length > 0)
+            for (var s = 0; s < t.touches.length; s++)
+                this.create(t.touches[s].clientX, t.touches[s].clientY, this.colors[Math.floor(Math.random() * this.colors.length)])
+    }
+    create(t, s, i) {
+        this.particle = new Particle(this.container,this.char,this.time),
+        this.particle.init(t, s, i),
+        this.particles.push(this.particle)
+    }
+        */
+    move(t) {
+        this.cursor.x = t.clientX;
+        this.cursor.y = t.clientY;
+        console.log(`Cursor position: (${this.cursor.x}, ${this.cursor.y})`);
+
+        const color = this.colors[Math.floor(Math.random() * this.colors.length)];
+        console.log(`Creating particle with color: ${color}`);
+        this.create(this.cursor.x, this.cursor.y, color);
+    }
+
+    touch(t) {
+        if (t.touches.length > 0) {
+            for (var s = 0; s < t.touches.length; s++) {
+                const touchX = t.touches[s].clientX;
+                const touchY = t.touches[s].clientY;
+                console.log(`Touch position: (${touchX}, ${touchY})`);
+
+                const color = this.colors[Math.floor(Math.random() * this.colors.length)];
+                console.log(`Creating particle with color: ${color}`);
+                this.create(touchX, touchY, color);
+            }
+        }
+    }
+
+    create(t, s, i) {
+        console.log(`Creating particle at: (${t}, ${s}) with color: ${i}`);
+        this.particle = new Particle(this.container, this.char, this.time);
+        this.particle.init(t, s, i);
+        this.particles.push(this.particle);
+    }
+
+    /*update() {
+        for (var t = 0; t < this.particles.length; t++)
+            this.particles[t].update();
+        for (t = this.particles.length - 1; t >= 0; t--)
+            this.particles[t].time < 0 && (this.particles[t].destroy(),
+            this.particles.splice(t, 1))
+    }
+    bindAll(t, s) {
+        const i = s.length;
+        for (let e = 0; e < i; e++)
+            t[s[e]] = t[s[e]].bind(t)
+    }
+    
+}
+    */
+update() {
+    console.log("Updating particles...");
+    for (var t = 0; t < this.particles.length; t++) {
+        console.log(`Updating particle ${t} at position (${this.particles[t].pos.x}, ${this.particles[t].pos.y})`);
+        this.particles[t].update();
+    }
+    for (t = this.particles.length - 1; t >= 0; t--) {
+        if (this.particles[t].time < 0) {
+            console.log(`Destroying particle ${t} at position (${this.particles[t].pos.x}, ${this.particles[t].pos.y})`);
+            this.particles[t].destroy();
+            this.particles.splice(t, 1);
+        }
+    }
+    console.log("Particle update complete.");
+}
+
+bindAll(t, s) {
+    console.log("Binding methods...");
+    const i = s.length;
+    for (let e = 0; e < i; e++) {
+        console.log(`Binding method: ${s[e]}`);
+        t[s[e]] = t[s[e]].bind(t);
+    }
+    console.log("Method binding complete.");
+}
+}
+function styles(t, s) {
+    for (var i in s)
+        t.style[i] = s[i]
+}
+class Particle {
+    constructor(t, s, i) {
+        this.char = s,
+        this.time = i,
+        this.container = t,
+        this.styles = {}
+    }
+    init(t, s, i) {
+        this.velocity = {
+            x: (Math.random() < .5 ? -1 : 1) * (Math.random() / 2),
+            y: 1
+        },
+        this.pos = {
+            x: t-300,
+            y: s -100
+        },
+        this.styles.color = i,
+        this.element = document.createElement("div"),
+        this.element.textContent = this.char,
+        styles(this.element, this.styles),
+        this.update(),
+        document.getElementById(this.container).append(this.element)
+    }
+    update() {
+        this.pos.x += this.velocity.x,
+        this.pos.y += this.velocity.y,
+        this.time--,
+        this.element.style.transform = "translate3d(" + this.pos.x + "px," + this.pos.y + "px, 0) scale(" + this.time / 120 + ")"
+    }
+    destroy() {
+        this.element.remove()
+    }
+}
+(function() {
+    window.innerWidth >= 750 && new Cursor({
+        el: "cursor",
+        time: 80,
+        character: window.cursor.emoji,
+        colors: [window.cursor.color]
+    })
+}
+)();

index.html

@@ -222,7 +222,17 @@
 
   <script src="script.js"></script>
 
-  <div id="progress-bar"></div>
+  <div id="cursor"></div>
+  <script>
+    window.cursor={
+      emoji: "🌤️",
+      color: "black",
+    };
+  </script>
+
+<script src="cursor.js" defer="defer"></script>
+
+<div id="progress-bar"></div>
   <!-- funcioning of progress bar -->
   <script>
     window.addEventListener('scroll', function () {

style.css

@@ -82,6 +82,28 @@ body {
   font-family: "Poppins", sans-serif;
 }
 
+#cursor {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 97;
+  font-size: 20px;
+}
+
+.cloud {
+  position: absolute;
+  font-size: 24px;
+  opacity: 1;
+  transition: opacity 1s ease-out;
+}
+
+.cloud.fade-out {
+  opacity: 0;
+}
+
 #progressBarContainer {
   position: fixed;
   top: 0;