Parallax View
Download Plugin
The mouse move parallax effect works by moving elements on the page in relation to the mouse position. As the user moves their mouse, the elements shift in different directions and at different speeds, creating a sense of depth and interactivity. This effect is achieved by calculating the position of the mouse relative to the element and then adjusting the element's position accordingly.
To create the plugin, you'll need to set up the HTML structure for the elements that will be affected by the parallax effect. This typically involves wrapping the elements in a container div and assigning unique classes or IDs to each element. For example:
<section class="parallax-container">
<div class="moon parallax-element" data-speed="10" data-scale="1">
<img src="images/moon.png" />
</div>
<div class="heading-text-container">
<h1 class="parallax-element" data-speed="50" data-scale="1">Parallax View</h1>
<a class="download-button parallax-element" data-speed="60" data-scale="1" href="#">Download Plugin</a>
</div>
<div class="tomb-back parallax-element" data-speed="30" data-scale="1">
<img src="images/topmbback.png" />
</div>
</section>
parallaxElement() function will initialize on page load you can also initialize when your dynamic components loaded on page just go thorough below code and impliment in your website
const parallaxElement = function() {
document.addEventListener('DOMContentLoaded', () => {
const elements = document.querySelectorAll('.parallax-element');
elements.forEach(element => {
const speed = parseFloat(element.getAttribute('data-speed')) || 50;
const scale = parseFloat(element.getAttribute('data-scale')) || 1.1;
const container = element.closest('.parallax-container');
const updateTransform = (deltaX, deltaY) => {
element.style.transform = `translate(${deltaX}px, ${deltaY}px) scale(${scale})`;
};
// Mouse move for desktop
const handleMouseMove = (e) => {
const { clientX: mouseX, clientY: mouseY } = e;
const { left, top, width, height } = container.getBoundingClientRect();
const centerX = (left + width) / 2;
const centerY = (top + height) / 2;
const deltaX = (mouseX - centerX) / speed;
const deltaY = (mouseY - centerY) / speed;
updateTransform(deltaX, deltaY);
};
// Device orientation for mobile
const handleOrientation = (event) => {
const alpha = event.alpha || 0;
const beta = event.beta || 0;
const gamma = event.gamma || 0;
const deltaX = (gamma / speed) * 10;
const deltaY = (beta / speed) * 10;
updateTransform(deltaX, deltaY);
};
// Check if the device is mobile
const isMobile = /Mobi|Android/i.test(navigator.userAgent);
if (isMobile) {
window.addEventListener('deviceorientation', handleOrientation);
} else {
container.addEventListener('mousemove', handleMouseMove);
}
// Reset transform on mouse leave for desktop
container.addEventListener('mouseleave', () => {
element.style.transform = 'translate(0, 0) scale(1)';
});
});
});
}
parallaxElement()
Your element must have the class with name parallax-element and attributes data-speed , data-scale
data-speed : between 0 t0 100 its better if you put like 10, 20, 30 lesser the value more the movment
data-scale: Add simple scale value if you want to make element zoom on hover 1 is for no scale and 1.2 and more then that is to scale the element on hover
Your parallax-container must have 100% of width and overflow x as hidden in css also add some transition in each element of parallax for no jerk and providing some ease
.parallax-container {
height: 100vh;
width: 100%;
overflow: hidden;
background: url("../images/main-bg.jpg") no-repeat center bottom;
background-size: cover;
position: relative;
}
.parallax-container * {
transition: all .2s ease;
}