Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

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

    Need Custom Coding for Lay Theme? Find 3rd Party Developers here.
    3
    4
    51
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Johan Saj
      Johan Saj last edited by

      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/

      K 1 Reply Last reply Reply Quote 0
      • K
        kalamakumaran @Johan Saj last edited by

        @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 1 Reply Last reply Reply Quote 0
        • Johan Saj
          Johan Saj @kalamakumaran last edited by

          @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/

          1 Reply Last reply Reply Quote 0
          • arminunruh
            arminunruh Global Moderator last edited by

            do u have an example website where the effect is shown

            1 Reply Last reply Reply Quote 0
            • First post
              Last post

            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. Now see if your problem solved itself
            5. 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

            Thanks!

            Online Users

            Recent Topics

            • T

              OpenType Feature

            • T

              Split Screen just on front page / subpages without the split?

            • T

              problem when I click on the category filter buttons on mobile

            • G

              z index has different behaviors on different pages

            laytheme.com