How to create raining effect to your Shopify store
In this post I will show you how to create a raining effect using JavaScript to your Shopify store. We will also see how it works.
Follow below mentioned steps to make raining effect on your Shopify store.
Log in to your Shopify store. From your Shopify admin, go to Online Store > Themes. Click Actions > Edit code.
Step 1: Create a new Javascript file – rain-effect.js
In the Assets directory, click Add a new asset. In popup appear: Go to Create a blank file tab, give your asset the name rain-effect, choose .js and click Add asset.
In the online code editor, paste the content from the below text.
1 | $(document).ready(function(){$("body").append('<div class="ShopifyTipsRainEffect" style="position: fixed;z-index: 9999;left: 0;right: 0;bottom: 0;pointer-events: none;"><canvas id="canvasShopifyTipsRainEffect"></canvas></div>');var n=$("#canvasShopifyTipsRainEffect")[0];if(n.width=window.innerWidth,n.height=window.innerHeight,n.getContext){var t=n.getContext("2d"),a=n.width,e=n.height;t.strokeStyle="rgba(174,194,224,1)",t.lineWidth=1,t.lineCap="round";for(var i=[],o=0;o<1e3;o++)i.push({x:Math.random()*a,y:Math.random()*e,l:1*Math.random(),xs:4*Math.random()-4+2,ys:10*Math.random()+10});for(var r=[],d=0;d<1e3;d++)r[d]=i[d];setInterval(function(){t.clearRect(0,0,a,e);for(var n=0;n<r.length;n++){var i=r[n];t.beginPath(),t.moveTo(i.x,i.y),t.lineTo(i.x+i.l*i.xs,i.y+i.l*i.ys),t.stroke()}!function(){for(var n=0;n<r.length;n++){var t=r[n];t.x+=t.xs,t.y+=t.ys,(t.x>a||t.y>e)&&(t.x=Math.random()*a,t.y=-20)}}()},30)}}); |
Step 2: Embed the new Javascript file 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 | {{ 'rain-effect.js' | asset_url | script_tag }} |
Note: You must also load jQuery before loading this script.
