CODEWITHSUNDEEP
javascriptonmousemove
Gaspar
Gaspar

Reputation: 63

onmousemove event not working

I'm learning to use onmousemove event but can't make it work, the idea is to tilt a bit an image to create an effect like it's following the mouse a kind of parallax I guess. this is what I want to achieve: https://tympanus.net/Development/PhotographyWebsiteConcept/#

and this is the code:

    <div class="container-fluid" >
        <div class="row" onmousemove="myFunction(event)">
            <div class="col-sm-12" >
                <div class="hero" id="myDIV">
                    <div class="hero__back hero__back--static"></div>
                    <div class="hero__back hero__back--mover" id="move" style="transform: perspective(1000px) translate3d(-3.08931px, 9.6px, 48px) rotate3d(-0.96, -0.308931, 0, 2deg);"></div>
                    <div class="hero__front"></div>
                </div>
            </div>
        </div>
    </div>

this is JS:

<script>
function myFunction(e) {
    var xVal = -1/(win.height/2)*e.clientY + 1;
    var         yVal = 1/(win.width/2)*e.clientX - 1;
    var         transX = 20/(win.width)*e.clientX - 10;
    var         transY = 20/(win.height)*e.clientY - 10;
    var         transZ = 100/(win.height)*e.clientY - 50;
    var coor = "Coordinates: (" + x + "," + y + ")";
    document.getElementById("move").style.transform = 'perspective(1000px) translate3d(' + transX + 'px,' + transY + 'px,' + transZ + 'px) rotate3d(' + xVal + ',' + yVal + ',0,2deg)';
    document.getElementById("move").style.WebkitTransform = 'perspective(1000px) translate3d(' + transX + 'px,' + transY + 'px,' + transZ + 'px) rotate3d(' + xVal + ',' + yVal + ',0,2deg)';
}

</script>

Upvotes: 0

Views: 300

Answers (1)

Keming
Keming

Reputation: 253

I think is because the div of class row has no height, you can use inspector to check the height of that div. You can try add the onmousemove function to another div, which has the full height of your image.

Upvotes: 1

Related Questions