Other jQuery Falling Snow Effect

reohh

Member
Hey guys, its about that time of the year where I start to design my website's annual Christmas/Winter theme. I wanted to add a falling snow effect, however I only found an outdated thread from 4 years ago on how to do it.

I decided to use a jQuery Snowfall Plugin and just import it to my XenForo theme. I'm going to give step-by-step instructions for anyone who isn't tech savvy but still wants a falling snow effect.

  1. Download the "snowfall.jquery.min.js" file from here: https://github.com/loktar00/JQuery-Snowfall/tree/master/dist
  2. Upload that file to your server using FTP and place it in the /js/xenforo folder.
  3. In your style, edit the template called "logo_block"
  4. At the end of the template, add this:
    Code:
    <xen:require js="js/xenforo/snowfall.jquery.min.js" />
    <script>
    $(document).snowfall();
    </script>
  5. Save template and see how it looks.

Couple of things to note: If you uploaded the file to a different folder, make sure to change the location in the code you add. If you wish to add options to the snowfall, you can view the available options at the Github page here.

Some options are to change the way the snow looks, use shadows, use sprites as the snow, and even specify a div for the snow to collect on.

Live Demo

Credit to loktar00 for making the jquery. You can view his website here: http://www.somethinghitme.com/
 
Yeah I tried using that but I didn't like how every time you moved the mouse the snow changed direction. And you couldn't edit any of the options without changing the XML directly.
 
You copied the js wrong. You copied the entire HTML of the github page instead of the js.

http://www.zbrushindonesia.com/js/xenforo/snowfall.jquery.min.js

Thats the HTML page.

This is all you need:

Code:
!function(t){t.snowfall=function(e,i){function s(s,n,a,o,l){this.id=l,this.x=s,this.y=n,this.size=a,this.speed=o,this.step=0,this.stepSize=h(1,10)/100,i.collection&&(this.target=m[h(0,m.length-1)]);var r=null;i.image?(r=t(document.createElement("img")),r[0].src=i.image):(r=t(document.createElement("div")),r.css({background:i.flakeColor})),r.attr({"class":"snowfall-flakes",id:"flake-"+this.id}).css({width:this.size,height:this.size,position:i.flakePosition,top:this.y,left:this.x,fontSize:0,zIndex:i.flakeIndex}),t(e).get(0).tagName===t(document).get(0).tagName?(t("body").append(r),e=t("body")):t(e).append(r),this.element=document.getElementById("flake-"+this.id),this.update=function(){if(this.y+=this.speed,this.y>d-(this.size+6)&&this.reset(),this.element.style.top=this.y+"px",this.element.style.left=this.x+"px",this.step+=this.stepSize,this.x+=S===!1?Math.cos(this.step):S+Math.cos(this.step),i.collection&&this.x>this.target.x&&this.x<this.target.width+this.target.x&&this.y>this.target.y&&this.y<this.target.height+this.target.y){var t=this.target.element.getContext("2d"),e=this.x-this.target.x,s=this.y-this.target.y,n=this.target.colData;if(void 0!==n[parseInt(e)][parseInt(s+this.speed+this.size)]||s+this.speed+this.size>this.target.height)if(s+this.speed+this.size>this.target.height){for(;s+this.speed+this.size>this.target.height&&this.speed>0;)this.speed*=.5;t.fillStyle="#fff",void 0==n[parseInt(e)][parseInt(s+this.speed+this.size)]?(n[parseInt(e)][parseInt(s+this.speed+this.size)]=1,t.fillRect(e,s+this.speed+this.size,this.size,this.size)):(n[parseInt(e)][parseInt(s+this.speed)]=1,t.fillRect(e,s+this.speed,this.size,this.size)),this.reset()}else this.speed=1,this.stepSize=0,parseInt(e)+1<this.target.width&&void 0==n[parseInt(e)+1][parseInt(s)+1]?this.x++:parseInt(e)-1>0&&void 0==n[parseInt(e)-1][parseInt(s)+1]?this.x--:(t.fillStyle="#fff",t.fillRect(e,s,this.size,this.size),n[parseInt(e)][parseInt(s)]=1,this.reset())}(this.x>p-f||this.x<f)&&this.reset()},this.reset=function(){this.y=0,this.x=h(f,p-f),this.stepSize=h(1,10)/100,this.size=h(100*i.minSize,100*i.maxSize)/100,this.speed=h(i.minSpeed,i.maxSpeed)}}function n(){for(r=0;r<o.length;r+=1)o[r].update();c=requestAnimationFrame(function(){n()})}var a={flakeCount:35,flakeColor:"#ffffff",flakePosition:"absolute",flakeIndex:999999,minSize:1,maxSize:2,minSpeed:1,maxSpeed:5,round:!1,shadow:!1,collection:!1,collectionHeight:40,deviceorientation:!1},i=t.extend(a,i),h=function(t,e){return Math.round(t+Math.random()*(e-t))};t(e).data("snowfall",this);var o=[],l=0,r=0,d=t(e).height(),p=t(e).width(),f=0,c=0;if(i.collection!==!1){var g=document.createElement("canvas");if(g.getContext&&g.getContext("2d"))for(var m=[],x=t(i.collection),u=i.collectionHeight,r=0;r<x.length;r++){var z=x[r].getBoundingClientRect(),w=t("<canvas/>",{"class":"snowfall-canvas"}),v=[];if(z.top-u>0){t("body").append(w),w.css({position:i.flakePosition,left:z.left+"px",top:z.top-u+"px"}).prop({width:z.width,height:u});for(var y=0;y<z.width;y++)v[y]=[];m.push({element:w.get(0),x:z.left,y:z.top-u,width:z.width,height:u,colData:v})}}else i.collection=!1}for(t(e).get(0).tagName===t(document).get(0).tagName&&(f=25),t(window).bind("resize",function(){d=t(e)[0].clientHeight,p=t(e)[0].offsetWidth}),r=0;r<i.flakeCount;r+=1)l=o.length,o.push(new s(h(f,p-f),h(0,d),h(100*i.minSize,100*i.maxSize)/100,h(i.minSpeed,i.maxSpeed),l));i.round&&t(".snowfall-flakes").css({"-moz-border-radius":i.maxSize,"-webkit-border-radius":i.maxSize,"border-radius":i.maxSize}),i.shadow&&t(".snowfall-flakes").css({"-moz-box-shadow":"1px 1px 1px #555","-webkit-box-shadow":"1px 1px 1px #555","box-shadow":"1px 1px 1px #555"});var S=!1;i.deviceorientation&&t(window).bind("deviceorientation",function(t){S=.1*t.originalEvent.gamma}),n(),this.clear=function(){t(e).children(".snowfall-flakes").remove(),t(".snowfall-canvas").remove(),o=[],cancelAnimationFrame(c)}},t.fn.snowfall=function(e){return"object"==typeof e||void 0==e?this.each(function(){new t.snowfall(this,e)}):"string"==typeof e?this.each(function(){var e=t(this).data("snowfall");e&&e.clear()}):void 0}}(jQuery);
 
Ooww...
so these code should I copy and paste to say notepad, and save it as snowfall.jquery.min.js

Sorry, I am really no knowledge for this..

thanks for the info.
 
No problem :)

We all have to learn from somewhere!

If you want to control the size/count/speed of the snow you can add some parameters to it now.

For instance on my site I have:

Code:
<xen:require js="js/xenforo/snowfall.jquery.min.js" />
<script>
$(document).snowfall({flakeCount : 75, maxSpeed : 10, maxSize : 3});
</script>
 
cool!
I've tried this... thanks for the tips (y)(y)(y)

How do you actually put an image like the live demo?
 
actually I saw the link page you give:
$(element).snowfall({image :"images/flake.png", minSize: 10, maxSize:32});
is this $(element) can be changed to $(document)?
 
man.. the collection is wicked...
how can you achieve this?? :eek:

anyway, I'm happy with the result as it is...
I just kind of amused by people who can make this magic happening... (y)
thanks
 
Back
Top Bottom