Winter is here, and many blog spaces have added snowflakes, so I went to see their effect. There are several effect codes, so I took them over. Friends in need can take them over and try them.
Big snowflake pictures:
Effect code 1
<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 = {};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.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;else 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 && 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() {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 picture");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 directly into the header or Footer file in the topic. If you just want the article page to display, then add it to the single directly. Below, we will provide you with the snowflake picture (required material). Small picture: You need to upload it to the current topic of your blog, and then change the link in the code to the location of the picture. The effect is as shown in this page.
Effect code 2:
<html><head><script>function start(){var array=new Array();var canvas=document.getElementById("mycanvas");var context=canvas.getContext("2d");for(var i=0;i<50;i++){var Showsnow=new showsnow();array.push(Showsnow);}time=setInterval(function(){context.clearRect(0,0,canvas.width,canvas.height);for(var i=0;i<array.length;i++){array[i].move();array[i].draw(context);}},500);}function showsnow(){var y=parseInt(Math.random()*50)*10;var x=parseInt(Math.random()*80)*10;this.draw=function(context){context.font="50px Calibri";context.fillText("*",x,y);}this.move=function(){y+=20;if(y>600){y=0;}}}</script></head><body><input type="button" value="start" onclick="start()" /><br/><canvas id="mycanvas" style="border: 3px solid blue"></canvas></body></html>This effect is demonstrated as follows (it feels ugly, not recommended):
Effect code three
In fact, if you implement the WordPress blog, you can also use the let it snow plug-in.
I won’t talk about how to use let it snow plug-in here. It’s no different from other plug-ins installations. You can directly download and upload the files in the folder let it snow to the /wp-content/plugins/ directory, and then activate this plug-in and set the plug-in in the WordPress management panel menu. Or search directly in the plug-in library in the back, you can also find it.
let it snow official website: click to visit
Effect code four
I've seen a very powerful SnowStorm plugin online. It's so awesome, it seems that the code for searching let it snow on Google will have snow and frost effects, which is very creative. If you think you have good children's shoes, you can go to the official website by yourself.
I found a simple random snowflake falling effect code online to share with you (this effect is written in pure code. Snowflakes are *.):
A few functions are explained briefly:
1. letItSnow()
It's snowing (this sentence is still useless). Then createSnow is called to generate snowflakes.
2. createSnow()
Each snowflake is a <i> tag, and a "*" is placed inside to simulate the snowflakes (Google's copy cannot be downloaded, it actually shows it as a space, I made a sun...), and then put it in a large container called snowBox, and the generated individuals are pushed into iArray to collect it. Snowflakes use absolute positioning method with snowBox as reference. Top is 0px, and left uses Math.random()*window.screen.width to allow snowflakes to be generated randomly in the screen width.
Use color to control the color depth of snowflakes to generate depth of field, ranging from 0 to 200
Use fontSize to control the size of snowflakes, ranging from 10px to 15px
Use time to control the call interval of snowflakes falling, ranging from 40ms to 50ms
Use snowInterval to control the interval of snowflake generation, ranging from 500ms to 1000ms
Then the recursive call itself is called, and snowflakes are constantly generated.
3. FallDown()
As the name suggests, it means that snowflakes fall, with a speed of 2px, which means that each vertical drop is 2px. At this time, do a test. If the snowflakes fall to a fixed height, which is higher than the parent container, then remove it. This can reduce the pressure on the browser. Otherwise, too many snowflakes will cause the browser to go slower and slower. Anyway, it has been overflow:hidden and can't see it, and it is clean if you don't see it. Then call a windBlow function while descending vertically to make the snowflakes more artistic.
4. windBlow()
A name seems to be wind blowing, but it is actually the effect of wind blowing (this is even more useless. Haha.). Use a Math.sin() to produce the effect of snowflakes floating in the air, so that the snowflakes will not fall in a monotonous manner, but will fall in a snake shape, control the interval of falling, so that the continuity is better and 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 reaches the height, delete it to relieve 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)+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.VeVB.COM/js/2014/snow/
OK, the four effect codes end here. Hope it can help friends in need. If you have any questions, please leave a message below.