gijsroge / tilt.js Goto Github PK
View Code? Open in Web Editor NEWA tiny 60+fps parallax tilt hover effect for jQuery.
Home Page: http://gijsroge.github.io/tilt.js/
License: MIT License
A tiny 60+fps parallax tilt hover effect for jQuery.
Home Page: http://gijsroge.github.io/tilt.js/
License: MIT License
This would be a nice option to have.
Thanks
How do you use when jQuery is not global?
Even using it this way throws me that jQuery is undefined.
require('jquery')
require('tilt.js')
Also tried like this but I got the same error though:
var jQuery = require('jquery')
require('tilt.js')
var $container = jQuery('.photos')
if (jQuery.fn.tilt) $container.tilt()
Help? 👍
PS: Awesome lib, thanks!
Wondering if its possible to implement a delay or add easing to the tilt effect.
See how http://thexx.info/home/ works for an example.
I'm kinda new to programming and I don't know how to make or if I should make Responsive Web Page to ALL DEVICES. Is it necessary or is there another method? How do I make it Responsive for landscape and portrait? Thanks in advance!
I tried the demo in the master, it has wrong links. Tried adding jquery.min manually but results in errors.
'Tilt.js: the axis setting has been renamed to disableAxis. See #26 for more information
(anonymous) @ tilt.jquery.js? [sm]:278
each @ jquery-3.2.1.slim.min.js:2
each @ jquery-3.2.1.slim.min.js:2
$.fn.tilt @ tilt.jquery.js? [sm]:255
(anonymous) @ index.html:19'
Hi,
I really like the jquery plugin so I built a react version.
I'm working on the glare effect, tests and refactoring.
Thank you.
It's a problem with no reaction when tilt object under the another object (Z-index).
Is it possible to install this jQuery plugin through bower
?
Thanks.
I was wondering if tilt works with an image?
Hi, I noticed that the mouse events are wrong on the documentation:
tilt.on('tilt.mouseLeave', callback);
tilt.on('tilt.mouseEnter', callback);
Is in fact:
tilt.on('tilt.mouseleave', callback);
tilt.on('tilt.mouseenter', callback);
Sorry if this is obvious – I just didn't notice it straight away :)
I would be over the moon stoked if someone could possibly help me add this to a joomla site.
When the windows is resized the glare height & width
need to be recalculated.
The glare appears as a rotating white square on tall divs.
I'm testing with a block with a height of 600 and a width of 280px. also happens on 600 x 100, 600x 200 etc.
I believe it is caused because the size of the "js-tilt-glare-inner" is calculated based on the width of the element and does not take into consideration the height of the element.
Thanks.
var btnMetro = $('<div style="transform-style: preserve-3d;background-color: red;" class="live-tile"><span class="tile-title" style="text-align:center;font-size: 18px;">'+this.displayName+'</span><img class="full" style="transform: translateZ(50px) translateY(-55%) translateX(-50%);width: 96px;height: 96px;position: absolute;left: 50%;top: 50%;" src="'+this.icon+'"/></div>');
btnMetro.click(function(){
self.run();
});
$(btnMetro).tilt({
glare: true,
perspective: 100,
maxGlare: .5
});
$(document.body).append(btnMetro);
I need help to make it work in image inside
Hello, Inspired by your repo, I build a Polymer component polymer-tilt (based Polymer2) and upload it to webcomponents.org.
Thank you! 😋
This is not really an issue but something which i thought worth sharing.
I'm not quite sure about Apple TV hover effect but just psychologically when the mouse hovers on a point it should apply (imaginary) weight of the pointer and push that point that side down instead of up.
maybe you can consider having an option that can reverse the effect.
Hi,
I'm trying to add parallax effect to a portfolio gallery items. I activate data-tilt on the main container and inside of it there are thumbnails, overlay, title etc, which are all nested inside each other. I set the main container to transform-style: preserve-3d;
and set following nested child elements to transform: translateZ(50px);
but it doesn't seem to be working, there is no parallax effect going on.
The only way I could make it work was by using data-tilt on one of the pre-last nested child elements and only in that case the last child inside of it actually had parallax working. So it looks like parallax refuses to work if there are more than one child elements inside of main data-tilt container. Tilt.js parallax samples all have only one element nested inside as well, proving my guesses.
Could you please take a look at that issue and maybe give a hint how to add parallax to all (or some) nested child elements?
Thank you
When I add 'transform: translateZ(20px)' to my inner elements, the elements will only popout when I hover it with my mouse. Is it possible to place the items correct when opening the website without having to hover it?
I am using an ajax call to reload the items that use tilt. (filtering and ordering by location for example).
The script removes all current items and generates new code, without reloading the page.
That causes tilt to stop working for the new items.
As a workaround i now send the vanilla tilt script with each ajax call, but it feels dirty.
I believe these can be solved by converting to delegate methods like .on("click".. instead of click(..)
First of all nice work!
Can you make tilt.js installable via bower?
If glare
is set to true
, an overlay div js-tilt-glare
blocks click functionality of elements nested within the tilt object.
In this case, we will be able to trigger movement of the element when hovering over an element that is covering tilt element. Codepen example: https://codepen.io/Momciloo/pen/MOqaLN. If you uncomment text-overlay
element in HTML, tilt doesn't work.
Hi, I was trying this plugin for designing a card block but i encounter a problem on mac safari, on following link, i created a demo to show the issue, when we hover on it, it overlaps and gave a cut on the image
https://codepen.io/hasanji/pen/bYdXwX
can you please help me with this issue ?
Hi there,
Absolutely fantastic effect! I have one request, that exists in the Vanilla Tilt.js documentation, but doesn't seem to be included in the jQuery Tilt.js That functionality is "Reverse tilt". On the Vanilla Tilt.js you can reverse the tilt direction by adding data-tilt-reverse="true", however this doesn't seem to be working in jQuery Tilt.js, unless I am mistaken.
I would love this feature!
Hi,
when somebody use zoom-out (ctrl + scroll down) and then use tilt object It cause problems with size because effect of "parallax" is many times bigger then It should be.
Is it possible to somehow prevent this problem?
Thank you
(Tried on chrome)
Hey !
Nice job! I like this plugin.
Can you add an invert
option just like this one??
https://github.com/ariona/hover3d
I feel more natural about the tilt effect of the above plugin.
But your plugin works more smoothly, and no need to write CSS manually. so I picked yours♥
How do you think?
The landing page says in order to disable a particular axis, an axis property can be provided as
$('.js-tilt').tilt({ axis: x });
Which doesn't work
The value should be string and wrapped in quotes as axis: 'x'
in order to work.
Might be helpful for both projects :)
micku7zu/vanilla-tilt.js#23
whenever I scroll superfast I get this error. Is there a fix for this?
tilt.jquery.min.js:1 Uncaught TypeError: Cannot read property 'x' of undefined
at HTMLDivElement.h (tilt.jquery.min.js:1)
at HTMLDivElement.g (tilt.jquery.min.js:1)
Thanks
Hello. Thanks for the awesome project.
Is there any way in which we can apply glare to images or SVGs?
Hello,
Tilt is working very well, although I have came across an issue where when you move your mouse off a tilt element with scaling enabled, the contents blur afterwards.
See below a screenshot.
Here you can see the content in the box in the middle is blurry, as opposed the content on the right. Each of these boxes are separate tilt elements, each with scaling enabled.
Thanks in advance.
Other-than this issue, great job with tilt.js. I love it.
Isn't this lib available on some CDN provider?
Is there any way to run that cool animation without hovering mouse over?
I'm trying to use the destroy key in a media query to disable the effect on mobile devices, but I just can't get it right. Can someone provide the correct code for a media query to disable on certain size and re-enable on another size?
Thanks in advance!
Hi, good job with Tilt, I really liked, but I have an question, do you plan a version without jquery dependency?
✌️
Hi
so basically i have a Polaroid collage with slightly rotated images. I would like to initiate tilt on mouse over and destroy it on mouse out. But i would like it to stay in the original rotated position at all times. But when you hover over the image it straightens out. Is there a way to stop this from happening? I ended up just using a mouse out event and removed those styles but why wont the destroy do that. I removed my mouse out event so that you can see what happens with out it.
avid7.com/test/ is the domain that it is on
Hello,
I'm having a problem with getting tilt to run on my node server web app. I'm importing both jquery and tilt.js through the angular-cli configuration file.
However, when trying to run, I get this log error:
columnNumber : 24
fileName : "http://localhost:4200/main.bundle.js"
lineNumber : 381
message : "$(...).tilt is not a function"
My initial exposure to Tilt.js was through the webpage https://gijsroge.github.io/tilt.js/
However, following the basic usage, It states you're to use <span data-tilt></span>
. Until visiting the git did I then realise it is now a <div>
tag.
Please, can you edit your website?
Hello, I've got some strange behavior of the reset method. This is my code:
const tilt = $('.js-tilt').tilt({ scale: 1.05 });
Everything works well, scaling is used on mouse-hover event, but when I'm trying to reset my tilt with this code:
tilt.tilt.reset.call(tilt);
sometimes (mainly in firefox, but sometimes in chrome too) it is resetting js-tilt element and scaling it for some reason I don't know. Please check this fiddle in firefox and try to run it several times: https://jsfiddle.net/c5jtsutb/
It could be fixed by some weird methods like resetting the css-transform property after timer, but its really ugly solution..
I would love to see this option implemented to make this more mobile-responsive. Right now, tapping on an object using tilt.js sometimes slightly changes the orientation and looks pretty bad and inconsistent on mobile, whereas allowing the device's orientation to control tilt would show the effect much better on mobile.
Hi, your library is great!!
I only had an incompatibily with the CSS property "clip-path".
The move for elements inside my data-tilt doesnt work and 3D effect is lost... ¿could I change anything or add something else for have both effects (clip-path and transform)?
This is my demo site: http://test.1simplegame.com/
When I hover over Iframe trying to use this plugin there is an error:
Uncaught TypeError: Cannot read property 'x' of undefined
at HTMLDivElement.getValues (tilt.jquery.js:91)
at HTMLDivElement.updateTransforms (tilt.jquery.js:106)
getValues @ tilt.jquery.js:91
updateTransforms @ tilt.jquery.js:106
It works perfectly with everything else, but not with one thing I need. I wanted to apply this effect to google maps iframe.
I guess this is kind of issue so here I am :)
Hi, it's not documented, but I was wondering what accessibility concerns (if any) there are with using tilt.js?
If there are any or not, it may be worth stating this on the documentation for reassurance. 🙂
Hi,
Tihs library is amazing, simply amazing! However I have a question: I would like an image inside the page to be tilted when the mouse moves over the page (not the image itself). While the user moves the mouse over the page from left to right I would like the image to tilt accordingly.
is it possible? Many parallax libraries allow this to happen, would it be possible with this library?
The cdn you provide: https://unpkg.com/[email protected]/dest/tilt.jquery.min.js
is coming up with this response:
"Not found: file "/dest/tilt.jquery.min.js" in package [email protected]"
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.