Adding snow effect to your website using Javascript

Winter is pretty near.. so is the snow that comes with it.
Would you want your website to have the same feeling as going outside in these cold winter times?

Let’s get straight to the point of this article. All you have to do is add this line of Javascript to your website.

var marginBottom,marginRight,snowMax=115,snowColor=["#E4EFF0","#E4EFF0"],snowEntity="•",snowSpeed=.6,snowMinSize=26,snowMaxSize=41,snowRefresh=40,snowStyles="cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;",snow=[],pos=[],coords=[],lefr=[];function randomise(o){return rand=Math.floor(o*Math.random()),rand}function initSnow(){var o=snowMaxSize-snowMinSize;for(marginBottom=document.body.scrollHeight-5,marginRight=document.body.clientWidth-15,i=0;i<=snowMax;i++)coords[i]=0,lefr[i]=15*Math.random(),pos[i]=.03+Math.random()/10,snow[i]=document.getElementById("flake"+i),snow[i].style.fontFamily="inherit",snow[i].size=randomise(o)+snowMinSize,snow[i].style.fontSize=snow[i].size+"px",snow[i].style.color=snowColor[randomise(snowColor.length)],snow[i].style.zIndex=1e3,snow[i].sink=snowSpeed*snow[i].size/5,snow[i].posX=randomise(marginRight-snow[i].size),snow[i].posY=randomise(2*marginBottom-marginBottom-2*snow[i].size),snow[i].style.left=snow[i].posX+"px",snow[i].style.top=snow[i].posY+"px";moveSnow()}function resize(){marginBottom=document.body.scrollHeight-5,marginRight=document.body.clientWidth-15}function moveSnow(){for(i=0;i<=snowMax;i++)coords[i]+=pos[i],snow[i].posY+=snow[i].sink,snow[i].style.left=snow[i].posX+lefr[i]*Math.sin(coords[i])+"px",snow[i].style.top=snow[i].posY+"px",(snow[i].posY>=marginBottom-2*snow[i].size||parseInt(snow[i].style.left)>marginRight-3*lefr[i])&&(snow[i].posX=randomise(marginRight-snow[i].size),snow[i].posY=0);setTimeout("moveSnow()",snowRefresh)}for(i=0;i<=snowMax;i++)document.write(""+snowEntity+"");window.addEventListener("resize",resize),window.addEventListener("load",initSnow);

You can do that by creating a new JavaScript file and linking it to your main website or you can add it straight to the html/php file.

You can also tweak the JavaScript code and make the snow faster/heavier by changing the values however we do not recommend going too much as it will use too much resources therefore it will slow your website down.

Do let us know how the snow effect comes out in your site : )!

LowEndHost – Modern Free Blesta Hosting Template

LowEndHost –  Free Blesta Modern Hosting Template

LowEndHost is now a Blesta Hosting template! It comes in three colors and it’s beautifully designed.

 

HTML/PHP template contains these pages:

  • Home
  • Virtual Private Server
  • Dedicated Servers
  • Game Servers
  • Terms of Service

 

You can view live the template here:

https://aalayer.com/preview/#lowendhost_green  – Green Version

https://aalayer.com/preview/#lowendhost_blue – Blue Version

https://aalayer.com/preview/#lowendhost_red – Red Version

 

To download this free hosting template, head to AALayer Marketplace:

https://marketplace.aalayer.com/themes/lowendhost-blesta/

 

You’ll have the installation instructions once you download the template.

 

LowEndHost – Free WHMCS hosting template!

Lowendhost – Free Modern & Unique Web hosting template

Designed and released for the first time in 2018, probably one of the most downloaded free whmcs hosting template. Now it’s back and updated to the latest 7.x WHMCS versions!

Template contains PHP/HTML version and WHMCS integration… plus 3 colors version! [Blue, red and green].

 

Pages that are included in the PHP/HTML version are:

  • Home
  • Web Hosting
  • VPS
  • Dedicated Servers
  • Game Servers
  • and Terms of Service.

 

A few screenshots:

 

You can view live the template here:

https://aalayer.com/preview/#lowendhost_green  – Green Version

https://aalayer.com/preview/#lowendhost_blue – Blue Version

https://aalayer.com/preview/#lowendhost_red – Red Version

 

To download this free hosting template, head to AALayer Marketplace:

https://marketplace.aalayer.com/themes/lowendhost-whmcs/

 

Thank you!