Rotation + ImageHover Addon (I need help on cool javascript effect :)
-
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/ -
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);} }}
-
@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/ -
do u have an example website where the effect is shown
Before you post:
Use the Search Feature. Maybe there is already a solution to your issue.
1. Update Lay Theme and all Lay Theme Addons
2. Disable all Plugins
3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
4. When using a WordPress Cache plugin, disable it or clear your cache.
Now see if your problem solved itself.
Go here, see if your problem is listed here:
Troubleshooting
When you post:
1. Post a link to where the problem is
2. If the problem is difficult to explain, post screenshots / link to a video to explain it
I don't answer or check forum DMs, please just post on the forum.