Breakdance4fun Logo

Parallax Effect on Mouse Position with GSAP

The Parallax will only be in effect while the cursor is over the scene element, otherwise all layers move back to their initial position :

Parallax Example3
Photo Portrait Of A Funny Ceo
Parallax Example2

Step 1 - The main container

Add a DIV with the desired size and a unique ID (let's call it 'parallax-effect') :

Parallax Mouse Effect Scene
Parallax Mouse Effect Id

Step 2 - Add the layers

Inside that container (DIV), add a new Div and set the width and height to 100%.
Most important, set its position to absolute

and finally. add the attribute data-parallax with your desired value (it can also be a negative number)

Parallax Mouse Effect Layer
Parallax Mouse Effect Attribute

Step 3 - Add your elements

Inside that DIV, we can add an image or any other element.
If you want to keep it centered, then there is nothing else to change.

If you want to move it to a different position, set the position to relative and change some of the position values:

Parallax Mouse Effect Position

The final structure will look like this. The main DIV (aka container, or scene), and then each element (3 images in our example) wrapped in their own DIV:

Parallax Mouse Effect Structure

Step 4 - The Magic Code

Finally, add the Javascript code. It needs GSAP so you can use the GSAP Block element (see How to use GSAP with Breakdance) or use the Assets4Breakdance element.

// Get the container's bounding rectangle
var container = document.querySelector('#parallax-effect');
let rect = container.getBoundingClientRect();

// Initialize mouse object with initial values
var mouse = {x: 0, y: 0, moved: false, leave: false};

// Add mousemove event listener to the container
container.addEventListener('mousemove', function(e) {
mouse.moved = true;
mouse.leave = false;
mouse.x = e.clientX - rect.left;
mouse.y = e.clientY - rect.top;
});

container.addEventListener('mouseleave', function(e) {
mouse.moved = true;
mouse.leave = true;
});

// Ticker event will be called on every frame
gsap.ticker.add(function() {
if (mouse.moved) {
const parallaxEl = container.querySelectorAll('[data-parallax]');
parallaxEl.forEach((element) => {
const paraValue = mouse.leave ? 0 : element.dataset.parallax;
const easing = mouse.leave ? "elastic.out" : "power2";
const speed = mouse.leave ? 1 : 0.5;
parallaxIt(element, paraValue, speed, easing);
})
}
mouse.moved = false;
});

// Function to apply parallax effect to target elements
function parallaxIt(target, movement, speed, easing) {
gsap.to(target, {
duration: speed,
ease:easing,
x: (mouse.x - rect.width / 2) / rect.width * movement,
y: (mouse.y - rect.height / 2) / rect.height * movement
});
}


// Add resize and scroll event listeners to the window
window.addEventListener('resize', updateRect);
window.addEventListener('scroll', updateRect);

// Function to update the container's bounding rectangle on resize and scroll
function updateRect() {
rect = container.getBoundingClientRect();
}

More parallax

Check the AssetsforWP website for examples to copy and paste onto your own websites :

https://assetsforwp.com/assets/parallax-effect-on-mouse-position/

Parallax Symbols 1
Parallax Symbols 2
Parallax Symbols 3

Multi Backgrounds Parallax