How to create ripple effect on click
Ripple effects is very popular due to simplicity of animation and its eye catching presence. Follow below mentioned steps to make your Shopify store eye catching more with ripple effect on click.
Log in to your Shopify store. From your Shopify admin, go to Online Store > Themes. Click Actions > Edit code.
Step 1: Create ripple-effect.scss file
In the Assets directory, click Add a new asset. In popup appear: Go to Create a blank file tab, give your asset the name ripple-effect, choose .scss and click Add asset.
In the online code editor, paste the content from the below text.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | div.shopifyTipsClickEffect{ position:fixed; box-sizing:border-box; border-style:solid; border-color:#000000; border-radius:50%; animation:shopifyTipsClickEffect 0.4s ease-out; z-index:99999; } @keyframes shopifyTipsClickEffect{ 0%{ opacity:1; width:0.5em; height:0.5em; margin:-0.25em; border-width:0.5rem; } 100%{ opacity:0.2; width:15em; height:15em; margin:-7.5em; border-width:0.03rem; } } |
Step 2: Embed the new Javascript into theme
In the Layouts folder, locate and click on your theme.liquid file to open it in the online code editor. In the online code editor, scroll down a bit until you see the closing tag. Right before the closing tag, paste the code.
1 2 3 4 5 6 7 8 9 10 11 | {{ 'ripple-effect.scss.css' | asset_url | stylesheet_tag }} <script type="text/javascript"> function shopifyTipsClickEffect(e){ var d=document.createElement("div"); d.className="shopifyTipsClickEffect"; d.style.top=e.clientY+"px";d.style.left=e.clientX+"px"; document.body.appendChild(d); d.addEventListener('animationend',function(){d.parentElement.removeChild(d);}.bind(this)); } document.addEventListener('click',shopifyTipsClickEffect); </script> |
