-
Notifications
You must be signed in to change notification settings - Fork 108
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Jitter Bug #5
Comments
Hi there, Can you create a jsfiddle/codepen or kind of tools for this issue? |
Here you go: |
Well, that was caused by the inner element interfering with hover action, To fix this we need to set pointer-events on .film_content to none. .film_content{ pointer-events: none } But this will raise another problem, which is we can't interact with elements inside it. |
damn :( is there no other way around it? if not i guess ill have to leave it be and not user hover.js |
I haven't found the solution for this issue, Another kind of library did the same thing. Btw, In my opinion this effect can/should be applied with a simple card with only single link, If you are using this effect on you current UI, I think it'll lower the UX since user will hard to interact with the link within it (you know it will rotate away from user cursor :D ). You can checkout the same library from codrops and it's cooler than mine (https://tympanus.net/codrops/2016/11/23/tilt-hover-effects/), They also use single link on the card. :) |
Thanks mate :) and yeah i agree, to be honest this was just for fun on a site im coding. I love how it works! I think this plugin works best if you arnt linking to anything |
Hi @joebentaylor, i have update the plugin for this fix, please try it out. Hope this fix the problem 😄 |
@ariona I get the same problem but I don't think it was solved.When mouse hover it, the animation doesn't work. I have used the new version published 8 month ago. |
@ariona there is no bug when the first time I hover it, but when you move the mouse out and move on it, the bug shows |
@EasonYou any live URL that can be checked? |
Usually this caused by overlapping elements within the 3d space. try changing the translateZ in my source to 3px or more. source $shine.css({
position : "absolute",
top : 0,
left : 0,
bottom : 0,
right : 0,
transform : 'translateZ(1px)', // try changing the value to 3px or more to give more space
"z-index" : 9
}); |
@ariona No, It doesn't work either. But I found the reason and fixed. I compare the first time with other situation, I found that the style $card.css({
perspective : settings.perspective+"px",
transformStyle : "preserve-3d",
transform : "" // it was rotateX(0) rotateY(0)
}); In fact I am not familiar with css, but I think you are right, it should be |
Hi, im using chrome.
when i hover over the element i have made the card, the hover isnt smooth, it jitters really bad. is there something that can cause jitters?
this is my code: ( I have the classes stated in the docs already in)
Archive.zip
JS:
$(".film_3d_wrapper").hover3d({ selector: ".film_3d", perspective: 1000, shine: false });
Its not letting me upload my html so i will attach it in a .zip
see my video:
jitterbug.zip
The text was updated successfully, but these errors were encountered: