Well, you must be wondering what the post title "Make your images look like lakes using jQuery" says and what does it mean. I was also finding it difficult to how does I put this in words. But you will understand the meaning of the title, once you take a look at below images.
I am sure that now you have got the idea, what I am trying to say. And these are not gif images. The First image looks like this.
So how to provide such effect to the images? Lake.js is a jQuery plugin which allows you to provide such effects.
Put an image on your page.
This plugin also provides some option to customize the waves.
Feel free to contact me for any help related to jQuery, I will gladly help you.
I am sure that now you have got the idea, what I am trying to say. And these are not gif images. The First image looks like this.
So how to provide such effect to the images? Lake.js is a jQuery plugin which allows you to provide such effects.
How to use it?
Put an image on your page.
//Code Starts <img id="lake-img" src="lake.png" style="display: none;"/> //Code EndsDownload the plugin and add reference of jQuery library and lake.js library. And call .lake() function on the image.
//Code Starts $(document).ready(function() { $('#lake-img').lake(); }); //Code EndsLake.js takes an img element and inserts a canvas element displaying the image and its flipped reflection directly after the img element. The new canvas element will be the same width as the original image and double the height.
This plugin also provides some option to customize the waves.
- Speed : makes the waves move faster or slower.
- Scale : makes the waves higher or shallower.
- Waves : creates more or less waves.
//Code Starts $(document).ready(function() { $('#lake-img').lake({ 'speed': 1, 'scale': 0.5, 'waves': 10 }); }); //Code EndsFrames are precomputed, lake.js will slow down page loads but will perform well on lots of devices.
Feel free to contact me for any help related to jQuery, I will gladly help you.
No comments:
Post a Comment