Rotation + ImageHover Addon (I need help on cool javascript effect :)

[Johan Saj]

Hi guys, i love laytheme and the new features that you added on the last update

I need help!

I want to use the ImageHover addon (with the fixed centered img position setup) and when the img appears I want it to rotate around its center.

For now I am using this code:

<script>

var img = jQuery('.lay-imagehover-region img');
if(img.length > 0){
    var offset = img. gap();
    function mouse(evt){
        var center_x = (offset.left) + (img.width()/2);
        var center_y = (offset.top) + (img.height()/2);
        var mouse_x = evt.pageX; var mouse_y = evt.pageY;
        var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
        var degree = (radians * (180 / Math.PI) * -1) + 90;
        img.css('-moz-transform', 'rotate('+degree+'deg)');
        img.css('-webkit-transform', 'rotate('+degree+'deg)');
        img.css('-o-transform', 'rotate('+degree+'deg)');
        img.css('-ms-transform', 'rotate('+degree+'deg)');
    }
    jQuery(document).mousemove(mouse);
}

</script>

But the image is no longer in the right place. And I don't understand javascript code well enough to answer all my questions.

Would someone be kind to help me?

Thanks a lot!

Here is the exemple:
http://www.rodeo-basilic.johansaj.com/

[kalamakumaran]

@Johan-Saj

Haven't tested it but what about adding an animation to the img via css

.lay-imagehover-region img {
  animation: rotation 5s infinite linear;
}

@keyframes rotation {
  100% {transform: rotate(360deg);}
}}

[Johan Saj]

@kalamakumaran
Thanks a lot for your answer!
But I think I did not explain myself well enough.

So:

I have an image at the center of my screen and i want it to rotate a little bit at the left when my mouse goes on the left of the screen and on the right when my mouse goes on the right of the screen. I also would like the rotation effect to follow the position of my mouse (the more the mouse goes on the left, the more the image rotates)

I don't know if i made myself clear ?

My website:
http://www.rodeo-basilic.johansaj.com/

[arminunruh]

do u have an example website where the effect is shown