Use js Code and plug-ins to implement four methods for wordpress snowflake falling effect, jswordpress

Use js Code and plug-ins to implement four methods for wordpress snowflake falling effect, jswordpress

In the winter, many blog spaces have added the snowflake effect, so they looked at their effect implementation. If you have several results codes, you can get them. If you need them, you can try them out.

Snowflake pictures:

Result code 1

<Script type = "text/javascript" language = "javascript"> (function () {function k (a, B, c) {if (. addEventListener). addEventListener (B, c, false); else. attachEvent &. 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 ={}; for (type in {Top: "", Left: ""}) {var B = type = "Top "? "Y": "X"; if (typeof window ["page" + B + "Offset"]! = "Undefined") a [type. toLowerCase ()] = window ["page" + B + "Offset"]; else {B = document.doc umentElement. clientHeight? Document.doc umentElement: document. body; a [type. toLowerCase ()] = B ["scroll" + type]} return a} function l () {var a = document. body, B; if (window. innerHeight) B = window. innerHeight; else if (. parentElement. clientHeight) B =. parentElement. clientHeight; else if (a &. clientHeight) B =. clientHeight; return B} function I (a) {this. parent = document. body; this. createEl (this. parent, a); this. size = Math. ra Ndom () * 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. ran Dom (); 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 & Math. random () <B * 0.0025 & c. push (new I ());! 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 () {createSnow (a, B)}; window. removeSnow = function () {f = false}; I. prototype = {createEl: function (a, B) {this. el = document. createElement ("img"); this. el. setAttribute ("src", B + "absolute link address of snowflake image"); 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>

Copy and paste the above Code to the Header or Footer file in the topic. If you only want to display the article page, add it to single. Below we will provide you with Snowflake images (required materials). Small pictures: You need to upload them to the current topic of your blog, then, change the link in the Code to the image location. The effect is shown on this page.

Result Code 2:

 
This effect is demonstrated as follows (it is ugly and not recommended ):
Result code 3
In fact, the let it snow plug-in can also be used to implement the WordPress blog falling snow.
Let it snow plug-in usage I am not nagging here, and there is no difference with other plug-ins for installation, you can directly download and upload the files in the let it snow folder to the/wp-content/plugins/directory, activate the plug-in, and set the plug-in the WordPress Management Panel menu. You can also search for the plug-in library in the back header.
Let it snow Official Website: Click to visit
Result code 4
We can see a very powerful SnowStorm plug-in on the Internet. It seems that google searches for let it snow code with snow and frost effects, which is very creative. You can go to the official website to find out the best kids shoes.
I found a simple random snowflake Falling Effect code on the Internet to share with you (this effect is written in pure code. Snowflake is *.) :
Here are some functions:
1. letItSnow ()
It's just snowing (this sentence is still useless ). Then, createSnow is called to generate snow.
2. createSnow ()
Each snowflake generated is a <I> label, and a "*" is put in it to simulate the snowflake (google's copy won't work, it's actually displayed as a space, I have a sun ...), Then put it in a large container named snowBox, And the generated individual is pushed to the iArray for collection. Snowflake adopts the absolute positioning method with snowBox as the reference. The top is 0 PX, and Math. random () * window. screen. width is used for left to randomly generate snow in the screen width.
Color is used to control the depth of the snowflake color to produce a depth of field, ranging from 0 ~ Between 200
Use fontSize to control the snowflake size, in the range of 10px ~ Between 15px
Time is used to control the interval of calls for Snowflake falling. The range is 40 ms ~ 50 ms
Use snowInterval to control the interval of snowflake generation. The range is Ms ~ Between Ms
Then recursively call itself to produce snow continuously.
3. fallDown ()
As its name implies, it is used to make the snow fall at a speed of 2 PX, that is, 2 PX down each time. In this case, if the snowflake drops to a fixed height, that is, it is higher than the parent container, then remove it, which can reduce the pressure on the browser, otherwise, too many snowflakes will cause the browser to go slower and slower. It is invisible to overflow: hidden. Then, call a windBlow function while downgrading vertically to make snowflake fall.
4. windBlow ()
The name seems like a wind blow, but it is actually a wind blow effect (this is even worse. haha .), use a Math. sin () is used to generate the effect of snow wandering in the air. In this way, the snow will not fall in a monotonous straight line, but it will fall in a snake-like manner to control the interval of falling, so that the 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) {// delete it when the height is exceeded to 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 (16) + temNum. toString (16) + 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/
All right, the four results code will end here. Hope to help friends in need. If you have any questions, leave a message below.