How to create a floating image effect

Add paragraph text. Click “Edit Text” to customize this theme across your site. You can update and reuse text themes.

const getMouseCoordinates =
    `document.body.addEventListener("mousemove", sendMouseCoordinates);

    function sendMouseCoordinates(e) {
            document.getElementsByTagName("mouse-move")[0].dispatchEvent(new CustomEvent('coor',{ 
                detail: { 
                    clientX : e.clientX, 
                    clientY : e.clientY 
                } 
            }
        )); 
    }`;

class MouseMove extends HTMLElement {

    constructor() {
        super();
    }

    connectedCallback() {
        var funcScript = document.createElement('script');
        funcScript.innerHTML = getMouseCoordinates;
        this.appendChild(funcScript);
    }

    static get observedAttributes() {
        return ['element-id'];
    }


}

customElements.define('mouse-move', MouseMove);

import wixAnimations from 'wix-animations';

$w.onReady(function () {
    const bigMove = $w('#imageX30, #imageX28, #imageX63, #imageX62');
    const smallMove = $w('#imageX31, #imageX29, #imageX61, #imageX43, #imageX65');
    $w('#customElement1').on('coor', (event) => {
        let clientX = event.detail.clientX;
        let clientY = event.detail.clientY;
        playAnimation2(clientX, clientY);
    });

    function playAnimation2(clientX, clientY) {
        wixAnimations.timeline()
            .add(bigMove, { x: clientX / 10, y: clientY / 10, duration: 500, easing: 'easeLinear' })
            .add(smallMove, { x: clientX / 15, y: clientY / 15, duration: 500, easing: 'easeLinear' }, 0)
            .play();
    }
});