The Parallax will only be in effect while the cursor is over the scene element, otherwise all layers move back to their initial position :
Step 1 - The main container
Add a DIV with the desired size and a unique ID (let's call it 'parallax-effect') :
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)
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:
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:
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.
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/
