Parallax View

Download Plugin

Horizontal Parallax View

In this Article we will learn how we can make the element move in x and y direction on mouse move to achive the horizontal parallax effect, We have multiple layer of image ni div element which will move x,y,z, diraction on mouse move on it, It signifies that this image will move slower horizontally compared to other images. It adds a parallax effect by creating a visual difference in the scroll speed between this image and the rest of the content.

Let go thorough the article and learn horizontal parallax scrolling , how to create parallax effect, parallax scrolling etc

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.

Implement a Free Horizontal Parallax Effect with HTML CSS and javascript, each element will move with ease when we mouse over the parallax container, with different speed also we can scale it on hover

Setting up the HTML Structure

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>

Implementing the JavaScript Logic

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

CSS you Must Have

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;
        }
Download Plugin

Share Now

Free website development tutorials and blogs offer valuable resources for individuals looking to learn web design and coding skills without incurring costs.

views 76