"Christmas" ----- Is there any nice snowflake effect ?, Christmas -----

"Christmas" ----- Is there any nice snowflake effect ?, Christmas -----

After the baptism of "Christmas Eve", I think "Christmas" will be very different! (This is the only Christmas day of life !)

I wish you a good Christmas and receive more gifts!

In December, the season where snowflakes were supposed to be waving was rare in Beijing;

In December, the sky was supposed to be clear, but in Beijing, smog was always there, which left people suffocated;

In, many people said, "Please treat me well? OK ?"

In the last month of March 2014, we hope that "happiness", "happiness", and "romance" will always be around .........

Since today is Christmas, use canvas to write a simple snowflake demo! (Although Beijing does not snow, it is beautiful to write it yourself !)

1. HTML code

<canvas width="100%" height="100%" class="flare"></canvas><canvas width="100%" height="100%" class="snow"></canvas><canvas width="100%" height="100%" class="flake"></canvas>

2. css style

@charset "utf-8";html{height:100%;}body{    background:#040764; /* Old browsers */    padding:0;    text-align:center;    font-family:'open sans';    position:relative;    margin:0;    height:100%;    padding-bottom:50px;    box-sizing:border-box;    -webkit-box-sizing:border-box;    -moz-box-sizing:border-box;}a{text-decoration:none;}canvas{display:block;width:100%;height:100%;top:0;left:0;position:fixed;}canvas.flare{opacity:0.5;}

3. js Code

First reference A jquery-1.7.2.min.js to download a price difference on it!

The second is the written js Code,

/* ===================================================== =================================== * Jquery-let_it_snow.js v1 * ====================== ========================================================== ===* NOTE: this plugin is based on the work by Jason Brown (Loktar00) ** As the end of the year approaches, let's add * some festive to your website! * ** =================================================== =================================== */! Function ($) {var defaults = {speed: 0, interaction: true, size: 2, count: 200, opacity: 0, color: "# ffffff", windPower: 0, image: false };$. fn. let_it_snow = function (options) {var settings = $. extend ({}, defaults, options), el = $ (this), flakes = [], canvas = el. get (0), ctx = canvas. getContext ("2d"), flakeCount = settings. count, mX =-100, mY =-100; canvas. width = window. innerWidth; canvas. heweigh T = window. innerHeight; (function () {var requestAnimationFrame = window. requestAnimationFrame | window. required requestanimationframe | window. webkitRequestAnimationFrame | window. msRequestAnimationFrame | function (callback) {window. setTimeout (callback, 1000/60) ;}; window. requestAnimationFrame = requestAnimationFrame;}) (); function snow () {ctx. clearRect (0, 0, canvas. width, canvas. height); (Var I = 0; I <flakeCount; I ++) {var flake = flakes [I], x = mX, y = mY, minDist = 100, x2 = flake. x, y2 = flake. y; var dist = Math. sqrt (x2-x) * (x2-x) + (y2-y) * (y2-y), dx = x2-x, dy = y2-y; if (dist <minDist) {var force = minDist/(dist * dist), xcomp = (x-x2)/dist, ycomp = (y-y2)/dist, deltaV = force/2; flake. velX-= deltaV * xcomp; flake. velY-= deltaV * ycomp ;} Else {flake. velX * =. 98; if (flake. velY <= flake. speed) {flake. velY = flake. speed} switch (settings. windPower) {case false: flake. velX + = Math. cos (flake. step + =. 05) * flake. stepSize; break; case 0: flake. velX + = Math. cos (flake. step + =. 05) * flake. stepSize; break; default: flake. velX + = 0.01 + (settings. windPower/100);} var s = settings. color; var patt =/^ # ([\ da-fA-F] {2}) ([\ da-fA-F] {2 })([ \ Da-fA-F] {2}) $/; var matches = patt.exe c (s); var rgb = parseInt (matches [1], 16) + ", "+ parseInt (matches [2], 16) +", "+ parseInt (matches [3], 16); flake. y + = flake. velY; flake. x + = flake. velX; if (flake. y> = canvas. height | flake. y <= 0) {reset (flake);} if (flake. x> = canvas. width | flake. x <= 0) {reset (flake);} if (settings. image = false) {ctx. fillStyle = "rgba (" + rgb + "," + flake. opacity + ")" Ctx. beginPath (); ctx. arc (flake. x, flake. y, flake. size, 0, Math. PI * 2); ctx. fill ();} else {ctx. drawImage ($ ("img # lis_flake "). get (0), flake. x, flake. y, flake. size * 2, flake. size * 2) ;}} requestAnimationFrame (snow) ;}; function reset (flake) {if (settings. windPower = false | settings. windPower = 0) {flake. x = Math. floor (Math. random () * canvas. width); flake. y = 0;} else {if (settings. windP Ower> 0) {var xarray = Array (Math. floor (Math. random () * canvas. width), 0); var yarray = Array (0, Math. floor (Math. random () * canvas. height) var allarray = Array (xarray, yarray) var selected_array = allarray [Math. floor (Math. random () * allarray. length)]; flake. x = selected_array [0]; flake. y = selected_array [1];} else {var xarray = Array (Math. floor (Math. random () * canvas. width), 0); var yarray = Arr Ay (canvas. width, Math. floor (Math. random () * canvas. height) var allarray = Array (xarray, yarray) var selected_array = allarray [Math. floor (Math. random () * allarray. length)]; flake. x = selected_array [0]; flake. y = selected_array [1] ;}} flake. size = (Math. random () * 3) + settings. size; flake. speed = (Math. random () * 1) + settings. speed; flake. velY = flake. speed; flake. velX = 0; flake. opacity = (Math. r Andom () * 0.5) + settings. opacity;} function init () {for (var I = 0; I <flakeCount; I ++) {var x = Math. floor (Math. random () * canvas. width), y = Math. floor (Math. random () * canvas. height), size = (Math. random () * 3) + settings. size, speed = (Math. random () * 1) + settings. speed, opacity = (Math. random () * 0.5) + settings. opacity; flakes. push ({speed: speed, velY: speed, velX: 0, x: x, y: y, size: Size, stepSize: (Math. random ()/30, step: 0, angle: 180, opacity: opacity}) ;}snow () ;}if (settings. image! = False) {$ (" "). prependTo ("body")} init (); $ (window ). resize (function () {if (this. resizeTO) clearTimeout (this. resizeTO); this. resizeTO = setTimeout (function () {el2 = el. clone (); el2.insertAfter (el); el. remove (); el2.let _ it_snow (settings) ;}, 200) ;}); if (settings. interaction = true) {canvas. addEventListener ("mousemove", function (e) {mX = e. clientX, mY = e. clientY}) ;}}( window. jQuery );View Code

This is a short section of javascript. You only need to write it in html and write some snowflake attributes,

<script type="text/javascript">$(document).ready(function(){    $("canvas.flare").let_it_snow({        windPower: 0,        speed: 0,        color: "#392F52",        size:120,        opacity: 0.00000001,        count: 30,        interaction: false    });    $("canvas.snow").let_it_snow({        windPower: 3,        speed: 1,        count: 250,        size: 1.2    });    $("canvas.flake").let_it_snow({        windPower: -3,        speed: 2,        count: 30,        size: 15,        image: "images/white-snowflake02.png"    });});</script>

One small snowflake image is involved (Note: png snowflake image is enough)

In this case, the small effect of snowflake came out, because it was written by canvas, so it is dynamic, so I still don't know how to display it dynamically, so? If you want to see the effect, please copy it with your fingers! Hey ......

It is easy to see the static image, but there is no way ()