ariona/hover3d

Jitter Bug

joebentaylor opened this issue · 13 comments

joebentaylor commented

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

ariona commented

Hi there,

Can you create a jsfiddle/codepen or kind of tools for this issue?
The jitter may occure if there is some element lay on top of the card, this can be fixed by setting pointer-events property on all element inside the card to none. (pointer-events:none)

ariona commented

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. ☹️

joebentaylor commented

damn :( is there no other way around it? if not i guess ill have to leave it be and not user hover.js

ariona commented

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. :)

joebentaylor commented

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

ariona commented

Hi @joebentaylor, i have update the plugin for this fix, please try it out. Hope this fix the problem 😄

EasonYou commented

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

EasonYou commented

@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

ariona commented

@EasonYou any live URL that can be checked?

EasonYou commented

@ariona here is the demo.

ariona commented

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
});
EasonYou commented

@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 styletransform : "rotateX(0) rotateY(0)"; make it not smooth. Then I make it transform : '';, it fixed.

$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 transform : "rotateX(0) rotateY(0)";.But actrually It don't need it.I don't know why either, haha.

  • 👍1