Using JS code and Plug-ins to achieve the effect of WordPress snow falling four ways _javascript skills

Winter arrived, a lot of blog space has been added to the effect of snowflakes, so to see their effect to achieve. There are several effect code, took over, have the need of friends can take the past to try.

Snowflake Big Picture:

Effect Code A

<script type= "Text/javascript" language= "JavaScript" > (function () {function K (a, B, c) {if (A.addeventlistener) a
. AddEventListener (b, C, false); else a.attachevent && a.attachevent ("on" + B, c)} function g (a) {if (typeof window.onload!= "function") window.
onload = A; else {var b = window.onload window.onload = function () {b (); A ()}}} function H () {var a = {}; ", Left:"}) {var b = type = = ' top '?
Y ":" X ";
if (typeof window["page" + B + "offset"]!= "undefined") a[type.tolowercase ()] = window["page" + B + "offset"]; else {b = Document.documentElement.clientHeight document.documentElement:document.body; a[type.tolowercase ()] = b[" Scroll ' + type]} return a} function L () {var a = document.body, B; if (window.innerheight) b = window.innerheight; El
Se if (a.parentelement.clientheight) b = a.parentelement.clientheight;
else if (a && a.clientheight) b = a.clientheight; Return B} function I (a) {this.parent = Document.body tHis.createel (This.parent, a);
This.size = Math.random () * 5 + 5;
This.el.style.width = Math.Round (this.size) + "px";
This.el.style.height = Math.Round (this.size) + "px";
This.maxleft = document.body.offsetwidth-this.size;
This.maxtop = document.body.offsetheight-this.size;
This.left = Math.random () * THIS.MAXLEFT;
This.top = h (). Top + 1;
This.angle = 1.4 + 0.2 * math.random ();
This.minangle = 1.4;
This.maxangle = 1.6;
This.angledelta = 0.01 * Math.random ();
This.speed = 2 + math.random ()} var j = false;
g (function () {j = true});
var F = true; Window.createsnow = function (A, b) {if (j) {var c = [], M = setinterval (function () {f && B > C.length && Amp Math.random () < b * 0.0025 && C.push (New I (a));!
F &&!c.length && clearinterval (m);  for (var e = h (). Top, n = L (), d = c.length-1 d >= 0; d--) if (C[d]) if (C[d].top < e | | c[d].top + c[d].size + 1 > e + N) {c[d].remove (); c[d] = null; C.splice (d, 1)} else {c[d].move (); c[D].draw ()}, 40); K (window, "scroll", function () {for (var e = c.length-1 e >= 0; e--) C[e].draw ()})} else g (function () {Createsno
W (A, B)})};
Window.removesnow = function () {f = false}; I.prototype = {Createel:function (A, b) {this.el = document.createelement ("img"); This.el.setAttribute ("src", B + "snowflake picture")
Absolute link Address ");
This.el.style.position = "absolute";
This.el.style.display = "block";
This.el.style.zIndex = "99999"; 
This.parent.appendChild (This.el)}, Move:function () {if (This.angle < This.minangle | | this.angle > This.maxangle)
This.angledelta =-this.angledelta;
This.angle + = This.angledelta;
This.left + + this.speed * Math.Cos (This.angle * Math.PI);
This.top-= This.speed * Math.sin (This.angle * Math.PI);
if (This.left < 0) This.left = this.maxleft; 
else if (This.left > this.maxleft) this.left = 0}, Draw:function () {this.el.style.top = Math.Round (this.top) + "px"; This.el.style.left = Math.Round (this.left) + "px"}, Remove:function () {THIS.PARENT.REmovechild (This.el);
this.parent = This.el = null}}}) ();
Createsnow ("", 40); </script>

It will be copied directly to the header or footer file in the topic, and if you just want the article page to be displayed, add it directly to the single. Below the snowflake picture (the required material) for everyone, small picture: Need everyone to upload to their blog's current use of the theme, and then the code in the link to the picture location can be. The effect is as shown on this page.

Effect code Two:

This effect is demonstrated as follows (feel ugly, not recommended):

Effect Code Three

In fact, the implementation of WordPress blog falling snowflakes can also use let it Snow plug-ins.

Let it snow plug-in usage I'm here to not nag, and other plug-in installation is no different, you can go directly to download the upload folder Let it snow file to the/wp-content/plugins/directory, and then activate this plugin, Set up plugins in WordPress's admin Panel menu. Or in the back of the plugin library directly search, you can also find.

Let It Snow official website: Click to visit

Effect Code Four

See a very powerful snowstorm plugin on the web. And cool, like Google search let it snow will have snow and frost effect of the code, very creative. Feel good children's shoes can go to the official website to see.

Online find a simple random snow falling effect code to share to everyone (this effect is written in pure code.) Snowflakes are *. ）：

Explain a few of the functions in a little bit:

1, Letitsnow ()

It is snowing (this sentence is still waste). Then call Createsnow to produce snowflakes.

2, Createsnow ()

Produce snowflakes each snowflake is a <i> label, which put a "*" to simulate snowflakes (Google that copy does not come down, incredibly show as a space, I have a sun ... And then put it into a large container called snowbox inside, and the resulting individual push into the iarray is collected. Snowflakes using Snowbox as a reference to the absolute positioning method, top for 0px,left on the Math.random () *window.screen.width, so that snowflakes randomly generated in the screen width.

Use color to control the depth of the snow to produce depth of field, range between 0~200
Use FontSize to control the size of snowflakes, ranging between 10px~15px
Use time to control the snow-falling call interval, range between 40ms~50ms
Use Snowinterval to control the spacing of snowflakes, ranging between 500ms~1000ms

And then recursively calls itself, constantly producing snowflakes.

3, Falldown ()

As the name implies is to let snow falling, falling speed speed for 2px, that is, each vertical descent 2px. This time to do a test, if the snowflakes fall to a fixed height, that is, higher than the parent container, then remove it, so you can reduce the pressure of the browser, or too much snow will cause the browser to go slower, anyway, has given overflow:hidden out of sight, the eye is not clear. And then in the vertical descent of the same time call a windblow function, so that snowflakes drop the art of some.

4, Windblow ()

A name seems to wind blowing, in fact, is really the effect of wind blowing (this word more waste.) haha.), using a math.sin () to produce snowflakes in the air roundabout effect, so that the snowflakes will not be monotonous straight down, but the serpentine falling, control the interval of falling, so continuity is better, it looks more comfortable.

function Letitsnow () {var Snowbox=document.getelementbyid ("Snowbox");
	var iarray=new Array ();

Createsnow (Snowbox,iarray);
	function Falldown (temobj,iarray) {var speed=2;
	var top=parseint (temObj.style.top); if (top>510) {//when it is over the height of the delete it, reduce the browser pressure for (Var i=0;i<iarray.length;i++) {if (temobj==iarray[i)) {Iarray.splice (i
				, 1);
				var Snowbox=document.getelementbyid ("Snowbox");
				Snowbox.removechild (Temobj);
			return false;
	}} temobj.style.top=top+speed+ "px";
	var wind=windblow (temobj,top);
Temobj.style.left=parseint (temObj.style.left) +wind*2+ "px";
	function Windblow (temobj,top) {if (parseint (Math.random ())%2==1) return Math.sin (TOP/16);
else return Math.Cos (TOP/16);
	function Createsnow (snowbox,iarray) {var temobj=document.createelement ("I");
	var temtext=document.createtextnode ("*");
	Temobj.appendchild (Temtext);
	Temobj.style.left=parseint (Math.random () *window.screen.width) + "px";
	temobj.style.top= "0px";
	var temnum=parseint (Math.random () *200); TemoBj.style.color= "#" +temnum.tostring (+temnum.tostring) +temnum.tostring (16);
	Iarray.push (Temobj);
	Snowbox.appendchild (Temobj);
	var temnum=0;
	while (temnum<10) {Temnum=parseint (Math.random () *15);

	} temobj.style.fontsize=temnum+ "px";
	var time=0;
	while (time<40) {Time=parseint (Math.random () *50);								
	} temobj.timer=setinterval (function () {Falldown (Temobj,iarray);
	},time);
	var snowinterval=0;
	while (snowinterval<500) {Snowinterval=parseint (Math.random () *1000);	
		var createtimer=settimeout (function () {createsnow (Snowbox,iarray);
	Cleartimeout (Createtimer);
},snowinterval); }

Demo Address: http://demo.jb51.net/js/2014/snow/

Okay, here's the end of the four effect code. Hope to help the needy friends. If you have any questions, you can leave a message below.