@teamthunderfoot/mouse-move-parallax

Mouse-move-parallax

The mouse-move-parallax package applies a parallax effect to a set of elements based on the position of the mouse cursor. The elements are translated in the opposite direction of the mouse movement, with the amount of movement determined by the depth of each element. If you want to translate the elements in the same direction of the cursor, you need to determine the depth of the element in negative values. For example: data-depth = -20.

Here's an example

Installation

npm install @teamthunderfoot/mouse-move-parallax

Usage

import MouseMoveParallax from "@teamthunderfoot/mouse-move-parallax";

class Index {
    constructor() {
        this.init();
    }
    init() {
        new MouseMoveParallax({
            elements: document.querySelectorAll(".parallax-element"),
            wrapper: document.querySelector(".element-wrapper"),
            duration: 1,
        });
    }
}

export default Index;
new Index();

In your HTML file, include elements with the data attribute data-depth that will trigger the mouse-move-parallax functionality.

<div class="parallax-element" data-depth="20">Mouse Move Parallax</div>

Options

• elements (required): represents the elements that will be animated with a parallax effect. It is expected to be an array of DOM elements, but it can be just one element. It's the only option totally neccesary.

• wrapper:an optional wrapper element that contains the elements to be animated. If provided, the elements will be translated only when the cursor is being moved over the wrapper. The width and height of the wrapper will be used to calculate the half dimensions (this.width and this.height) for the parallax effect. If not provided, the dimensions of the window (window.innerWidth and window.innerHeight) will be used instead.

• duration: specifies the duration of the CSS transition for the animated elements. It is expected to be a number in seconds, which is then converted to a string with an appended 's'. For example, if payload.duration is 0.5, this.duration will be set to '0.5s'.