In this tutorial, I will show how to create 3d effects on your images with javascript plugin. It’s very easy and very interesting. This awesome plugin will make your web page alive and very creative.
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.
STEP 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.
[code]
<link rel="stylesheet" type="text/css" href="css/tilteffect.css" />
<script src="js/tiltfx.js"></script>
[/code]
STEP 2 :
There are 2 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 our example : we will make it like the following:
[code]
<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" />
[/code]
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
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.
Also Do Contact Me For:
- PHP Course in Mumbai.
- CodeIgniter Course Training In Mumbai.
- AngularJS Classes in Mumbai.
- Magento 2 Classes in Mumbai.
- Live Online Project Training.
and many more.