February 29, 2016 11:22 am

Make 3d effects to your images with this awesome JavaScript plugin

While I was surfing the web to see what JS developers has in a store lately, I stumbled upon this great plugin which makes web images come alive.

Make 3d effects to your images with this awesome JavaScript plugin

First of all, it’s coded in native JavaScript, not in jQuery which improves the performance. It depends on creating image layers above your image to create 3d like effects when the mouse pointer goes over it. It’s not mobile friendly because it works 嘉盛外汇 when the mouse pointer enters the image area and works with only modern browsers. The browser compatibility isn’t a big problem, at least from my point of view because most internet users are abandoning the legacy browsers like IE8 and the versions before it.

This plugin has a lot of great effects and we will go on in details in a later article. For now, let’s get things going and make the magic of it happen.1- Let’s include the necessary files in the head tag of out page. You can include the script file at the end of the file for better performance.

2- The are to attributes that will make the effect work. First, you have to assign the class “image-tilt” to the image element. Second, the data-tilt-options attribute which will contain the 3d transformation options. For out example we will make it like the following:

3- It’s done now as simple as that. Save your file and see the magic happen.

Note: Don’t give your image any width or height styles because this will affect the plugin’s behavior. To make the image have a size that matches your design, wrap it inside a container, a <div> for example and add the style that you want to it.

This is pretty much that we do for today. Wait for the next article that will has more examples of what this beautiful plugin can do.

Tutorial Categories:

Author Amr Abdou

A full-stack web developer, Linux enthusiast, freelance tech writer & open-source supporter. Loves finding quit corners in public places or cafes accompanied by his laptop to try changing the world from there. You can check his latest works at social-evolvea.com or follow him on facebook, twitter, Linkedin or Google+

Tutorial Categories:

Leave a Reply

Your email address will not be published. Required fields are marked *