Merge pull request #12 from jwanner83/fixing-scroll

Fixing scroll
jwanner83 · Jun 26, 2020 · 4e81c02 · 4e81c02
2 parents d01a87a + e3870f6
commit 4e81c02
Show file tree

Hide file tree

Showing 7 changed files with 145 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# follow-js
+# Follow.js
 An experimental, dependency free script that let elements follow your cursor without a huge overhead.
 
 ## Usage
@@ -14,9 +14,9 @@ script or create an instance of the follow class with `let follow = new Follow()
 `npm i follow-js`
 
 #### with auto init
-`<script src"node_modules/follow-js/dist/follow.min.js" data-follow-auto></script>`
+`<script src="node_modules/follow-js/dist/follow.min.js" data-follow-auto></script>`
 #### without auto init
-`<script src"node_modules/follow-js/dist/follow.min.js"></script>`
+`<script src="node_modules/follow-js/dist/follow.min.js"></script>`
 
 ### unpkg
 #### with auto init
@@ -56,6 +56,10 @@ Have a look in the `examples` folder to see some magic.
 Feel free to open a Pull request or create a Issue on this project.
 
 ## Update Log
+### v2.1.1
+- Fixing scroll bug to enable custom cursor
+- Adding custom scroll and cursor example 
+
 ### v2.1.0
 Complete rewrite with Typescript and classes
 

diff --git a/dist/follow.min.js b/dist/follow.min.js
diff --git a/dist/follow.min.js.map b/dist/follow.min.js.map
diff --git a/examples/cursor.html b/examples/cursor.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Cursor Example - follow.js</title>
+
+    <style>
+        body, html {
+            height: 100%;
+            width: 100%;
+            margin: 0;
+            cursor: none;
+        }
+
+        body {
+            display: flex;
+            justify-content: center;
+        }
+
+        .cursor {
+            height: 20px;
+            width: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .cursor-inner {
+            transition: 200ms;
+            height: 20px;
+            width: 20px;
+            background: #AC0000;
+            border-radius: 100%;
+        }
+    </style>
+</head>
+<body>
+<div class="cursor" data-follow="1">
+    <div class="cursor-inner"></div>
+</div>
+
+<script src="../dist/follow.min.js" data-follow-auto></script>
+<script>
+    document.addEventListener('mousedown', () => {
+        document.querySelector('.cursor-inner').style.height = '10px';
+        document.querySelector('.cursor-inner').style.width = '10px';
+    })
+
+    document.addEventListener('mouseup', () => {
+        document.querySelector('.cursor-inner').style.height = '20px';
+        document.querySelector('.cursor-inner').style.width = '20px';
+    })
+</script>
+</body>
+</html>
diff --git a/examples/scroll.html b/examples/scroll.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Scroll Example - follow.js</title>
+
+    <style>
+        body, html {
+            height: 200%;
+            width: 100%;
+            margin: 0;
+        }
+
+        body {
+            display: flex;
+            justify-content: center;
+        }
+
+        .item {
+            transition: 100ms all linear 0s;
+            position: absolute;
+            height: 100px;
+            width: 100px;
+            top: 50%;
+            background: black;
+        }
+    </style>
+</head>
+<body>
+<div class="item" data-follow="5"></div>
+
+<script src="../dist/follow.min.js" data-follow-auto></script>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "follow-js",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "let elements follow your cursor",
   "main": "dist/follow.min.js",
   "repository": {

diff --git a/src/index.ts b/src/index.ts
@@ -1,16 +1,28 @@
 class Follow {
     /**
      * The options for the follow script
-     * @type FollowDefaults
+     * @type {FollowDefaults}
      */
-    public defaults: FollowDefaults = new FollowDefaults
+    public defaults: FollowDefaults = new FollowDefaults()
 
     /**
      * Array where all the elements are stored in
      * @type Array<FollowElement>
      */
     public elements: Array<FollowElement> = new Array<FollowElement>()
 
+    /**
+     * Position of the Mouse to use to calculate
+     * @type {FollowPosition}
+     */
+    public mouse: FollowPosition = new FollowPosition(0, 0)
+
+    /**
+     * Current scroll position to use to calculate
+     * @type {FollowPosition}
+     */
+    public scroll: FollowPosition = new FollowPosition(0, 0)
+
     /**
      * Constructor
      * @param {object} options
@@ -28,13 +40,16 @@ class Follow {
         let targets: NodeListOf<HTMLElement> = document.querySelectorAll(`[${this.defaults['attribute']}]`)
         targets.forEach(target => this.elements.push(new FollowElement(target, this.defaults)))
 
-        // because a class intern function which is called inside an eventListener on the document doesn't have the
-        // right context to the class to use class properties, we need to define the context into a variable and set
-        // it as attribute to the function
         let context = this
 
         document.addEventListener('mousemove', (event) => {
-            Follow.animate(event, context)
+            Follow.updateMousePosition(new FollowPosition(event.clientX, event.clientY), context)
+            Follow.animate(context)
+        })
+
+        document.addEventListener('scroll', () => {
+            Follow.updateScrollPosition(new FollowPosition(window.scrollX, window.scrollY), context)
+            Follow.animate(context)
         })
     }
 
@@ -56,23 +71,40 @@ class Follow {
 
     /**
      * Animate the element
-     * @param {MouseEvent} event
      * @param context
      */
-    private static animate (event: MouseEvent, context: any) {
-        let mouse: FollowPosition = new FollowPosition(event.clientX, event.clientY)
-
+    private static animate (context: any) {
         for (let element of context.elements) {
             let additional: FollowPosition = new FollowPosition(
-                Number(parseFloat(((mouse.x - element.position.x) / element.factor).toString()).toFixed(3)),
-                Number(parseFloat(((mouse.y - element.position.y) / element.factor).toString()).toFixed(3))
+                parseFloat(((context.mouse.x + context.scroll.x - element.position.x) / element.factor).toString()),
+                parseFloat(((context.mouse.y + context.scroll.y - element.position.y) / element.factor).toString())
             )
 
             // set the additional pixels as css transform translate
             element.setTranslate(additional)
         }
     }
 
+    /**
+     * Update the correct current mouse position
+     * @param {FollowPosition} position
+     * @param context
+     */
+    private static updateMousePosition (position: FollowPosition, context: any) {
+        context.mouse.x = position.x
+        context.mouse.y = position.y
+    }
+
+    /**
+     * Update the correct current scroll position
+     * @param {FollowPosition} position
+     * @param context
+     */
+    private static updateScrollPosition (position: FollowPosition, context: any) {
+        context.scroll.x = position.x
+        context.scroll.y = position.y
+    }
+
     /**
      * Set FollowOptions if they have been passed in the object initialization
      * @param {object} options
@@ -158,8 +190,8 @@ class FollowElement {
      */
     public setTranslate (position: FollowPosition) {
         // if value is exactly zero, change to 0.01 because the css interpreter in the browser interprets it different
-        if (position.x === 0) position.x = 0.01
-        if (position.y === 0) position.y = 0.01
+        if (position.x === 0) position.x = 0.1
+        if (position.y === 0) position.y = 0.1
 
         let transform: string = this.target.style.transform
         let translate: string = `translate(${position.x}px, ${position.y}px)`