Creating a water ripple animation following the mouse cursor on a HTML element
You want to make an good first impression on your Shopify store. Try creating a water ripple animation effect following the mouse cursor on an HTML element.
ripples is a fancy jQuery plugin that helps you to do that.
ripples is a fancy jQuery plugin that creates a water ripple animation following the mouse cursor on a HTML element based on WebGL. Currently works with modern browsers that support at least one of the following: WebGL, OES_texture_float extension, OES_texture_float_linear extension.
How to use it:
Step 1:
Load jQuery ripples plugin at the end of the HTML document.
1 | {{ '//cdnjs.cloudflare.com/ajax/libs/jquery.ripples/0.5.3/jquery.ripples.min.js' | script_tag }} |
Step 2:
Create a HTML element with a background image that you want to apply the effect to.
1 | <div class="ripple-ShopifyTips" style="background-image:url({{ 'bg.jpg' | asset_url }})"></div> |
Step 3:
Call the plugin with options
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | $('.ripple-ShopifyTips').ripples({ // Image Url imageUrl: null, // The width and height of the WebGL texture to render to. // The larger this value, the smoother the rendering and the slower the ripples will propagate. resolution: 256, // The size (in pixels) of the drop that results by clicking or moving the mouse over the canvas. dropRadius: 20, // Basically the amount of refraction caused by a ripple. // 0 means there is no refraction. perturbance: 0.04, // Whether mouse clicks and mouse movement triggers the effect. interactive: true, // The crossOrigin attribute to use for the affected image. crossOrigin: '' }); |
API methods
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | // show the effect $('.ripple-ShopifyTips').ripples('show'); // hide the effect $('.ripple-ShopifyTips').ripples('hide'); // destroy the plugin $('.ripple-ShopifyTips').ripples('destroy'); // play the simulation's state $('.ripple-ShopifyTips').ripples('play'); // pause the simulation's state $('.ripple-ShopifyTips').ripples('pause'); // add a drop at the element's relative coordinates (x, y). // radius controls the drop's size and strength the amplitude of the resulting ripple. $('.ripple-ShopifyTips').ripples('drop', x, y, radius, strength); |
