Comments (13)
@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.
from hover3d.
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
)
from hover3d.
Here you go:
http://codepen.io/joebentaylor/pen/LxrQPB
from hover3d.
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.
from hover3d.
damn :( is there no other way around it? if not i guess ill have to leave it be and not user hover.js
from hover3d.
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. :)
from hover3d.
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
from hover3d.
Hi @joebentaylor, i have update the plugin for this fix, please try it out. Hope this fix the problem đ
from hover3d.
@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.
from hover3d.
@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
from hover3d.
@EasonYou any live URL that can be checked?
from hover3d.
from hover3d.
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
});
from hover3d.
Related Issues (7)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
đ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. đđđ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google â¤ī¸ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hover3d.