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.
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.
1 2 | <link rel=“stylesheet” type=“text/css” href=“css/tilteffect.css” /> <script src=“js/tiltfx.js”></script> |
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:
1 | <img src=“my_image.jpg” class=“tilt-effect” data–tilt–options=‘{ “extraImgs” : 8, “opacity” : 0.5, “movement”: { “perspective” : 500, “translateX” : -35, “translateY” : -35, “translateZ” : 50, “rotateX” : 15, “rotateY” : 15 } }’ alt=“grid01” /> |
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:
Tutorial Categories:
