Giters

gijsroge / tilt.js

A tiny 60+fps parallax tilt hover effect for jQuery.

Home Page:http://gijsroge.github.io/tilt.js/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Glare div blocks clicks

nth-chile opened this issue · comments

commented

If glare is set to true, an overlay div js-tilt-glare blocks click functionality of elements nested within the tilt object.

commented

Mmh, that shouldn't be happening. Can you provide an example? On my landing page it seems to be working. http://gijsroge.github.io/tilt.js/ (click on the top left logo, it will refresh the page)

commented

It does work when the element marked with data-tilt itself is the link. In my case, the link buttons are nested within the data-tilt object. Sorry I will edit my post.

commented

I was able to fix this by adding the following line to my CSS.

.js-tilt-glare { pointer-events: none; }

I think tilt.js adds "pointer-events : none;" to the child glare element and not the parent, thus causing the issue.

cheers !

commented

Thx Smashr!! This css code did the trick!

commented

@Smashr thank you, I was having the same issue. @gijsroge you should add that note to the docs!

commented

Hi guys, it's generally a bad idea to add links inside a tilt element. Just for usability sake. But for other cases its indeed necessary thats why I already added pointer-events to the inner glare element but I should have added it to the wrapper instead.

I'll try to change it later today.

commented

You are welcome guys.

Yes Gijs Rogé, it would be perfect if the "pointer-events: none;" was added dynamically to the ".js-tilt-glare" element instead of ".js-tilt-glare .js-tilt-glare-inner".

Currently the "pointer-events: none;" is being added to ".js-tilt-glare .js-tilt-glare-inner" by the plugin.

Thanks !

commented

Should be fixed guys! Thanks for reporting!

commented

@gijsroge "it's generally a bad idea to add links inside a tilt element. Just for usability sake."

Could you elaborate on that? I'm not sure why that would be a bad thing. Just curious about your thought process. Also, is it updated in all the latest website downloads, or do I have to pull from the master?

Thanks let me know!

commented

@tr1s What I meant was that it's not a good idea to add <a> links or <button> elements inside a tilt element. Example: https://codepen.io/gijs/pen/0d74a1a86ecf75e1250d3f057f3bf7da/

This is just bad UX its weird and hard to click on these items. The tilt element itself should be a link.