JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://zhogov.org.ua/wp-content/uploads/demo/let-it-snow/js/jquery.let_it_snow.js"></script>
<center><div style="color:#fff;font-size:25px;text-alighn:center;padding-top:20%;">IMAPO.RU</div></center>
<canvas width="100" height="100" class="snow"></canvas>
CSS
body {
background: #000;
overflow: hidden;
min-height:600px;
}
.snow {
position:fixed;
top:0px;
left:0px;
z-index:0;
}
JavaScript
/* ===========================================================
* jquery-let_it_snow.js v1
* ===========================================================
* NOTE: This plugin is based on the work by Jason Brown (Loktar00)
* https://github.com/loktar00/JQuery-Snowfall
* http://www.thepetedesign.com
*
* As the end of the year approaches, let's add
* some festive to your website!
*
* https://github.com/peachananr/let_it_snow
*
* ========================================================== */
console.log($(window).height())
!function($){
var defaults = {
speed: 3,
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 = $(document).width();
canvas.height = $(document).height();
(function() {
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
window.requestAnimationFrame = requestAnimationFrame;
})();
function snow() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (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),
...