From our sponsor: Elevate all your marketing with Mailchimp Smarts.
Today we’d like to share a little image effect with you. The idea is to add a tilt effect to an image by subtly moving copies of layers of semi-transparent divisions with the respective background-image. Maybe you’ve seen this effect already on sites like The DNA project by j.viewz, nclud or Daniel Spatzek’s Website. We’ve implemented this effect in one of our previous demos, the Photography Website Concept, and since we’ve gotten a couple of requests, we thought it would be interesting to create a little plugin so that it can be easily applied to any image.
How it works
A normal image is replaced with layers of semi-transparent divisions of the same image. Every layer moves according to the configuration, creating a subtle motion effect. The initial image wrapper should have an explicit width and height set so that the divisions can be sized correctly. Have a look at the examples in the demo to see how it’s done.
An image with the class “tilt-effect”
<div class="grid__img">
<img class="tilt-effect" src="img/theimage.jpg" alt="The image" />
</div>…gets transformed into a stack of divisions with the same background image:
<div class="grid__img">
<div class="tilt">
<div class="tilt__back" style="background-image: url(img/theimage.jpg);"></div>
<div class="tilt__front" style="opacity: 0.7; -webkit-transform: perspective(1000px) translate3d(0px, 0px, 0px) rotate3d(1, 1, 1, 0deg); transform: perspective(1000px) translate3d(0px, 0px, 0px) rotate3d(1, 1, 1, 0deg); background-image: url(img/theimage.jpg);"></div>
<div class="tilt__front" style="opacity: 0.7; -webkit-transform: perspective(1000px) translate3d(0px, 0px, 0px) rotate3d(1, 1, 1, 0deg); transform: perspective(1000px) translate3d(0px, 0px, 0px) rotate3d(1, 1, 1, 0deg); background-image: url(img/theimage.jpg);"></div>
</div>
</div>
Check out the demo for plugin options and examples. You’ll find some custom example styles in the demo.css.
We hope you enjoy this little plugin and find it useful!
Looks good BUT it shakes like crazy when you hover it.
Maybe you can make not it detect the initial mouse position when entering the canvas, instead create the default position at the center of the image, that way it wont snap-tilt and shake
If you’re using the Greensock animation library, you can easily replace tiltfx.js’s element stylings in the mousemove and mouseleave event listeners with Greensock’s TweenLite.to() for it to smoothly tween the images.
Cant figure out how to add on my own images. Would love a tutorial on this one, looks great thanks!
I am in love with your ideas .
Hello
First grateful for the powerful content
How do I add the source code to Joomla template?
How do I add ev
(ev)
mouseleave is not activated
This idea is brilliant. Anyone know how to apply it to background images?
Nice Tutorial
this is amazing
wow really cool! i’m doing some changes to get a dynamic fullscresn slider here http://www.nunocaeiro.com/imagetilteffect/. anyone know how to implement left and right arrows in order to achieve something like this but keeping this tilt effect? http://codepen.io/SitePoint/pen/ZbGwqe
Sorry for coping this link, I created this effect, by taking two wrong photos with my camera. I remember that exist some cards that you can tilt them and it appears that the background is changing. I dont know how this printed (3d) tilt cards can be called, or how this effect is called. Can you help me out Mary Loo?
Hi this effect is awesome but I have problem with implementation on WordPress page. I added javascript to body, insert image with tilt-effect, add css but after that my image disapeared from my page? What I’m doing wrong? Thanks
is this with or without the js? I only see instructions on the html and css. As a newbie I do not fully know how to implement the js. I know if needed, it must be included in the script tag. But do we tie events to certain element classes or ids? This instruction I do not see here or with the photographic designer portfolio example which is way complex for a newb.