JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<div id="container"></div>
<div id="content_site">тут весь код сайта</div>

CSS

body {
  background: url('http://picsfab.com/download/image/140157/1920x1080_zima-sneg-ptitsa-snegir-perya.jpg');
  background-position: 50% 0;
  background-size: 100%;
  margin: 0;
  padding: 0;
}

/*код ниже*/

#content_site {
  position: relative;
}

#container {
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}

.snowflake {
  margin-top: -32px;
  position: absolute;
  text-shadow: 0 0 25px #FFFFFF;
  top: 0;
  z-index: 10000;
}

.snowflake_o_1 {
  opacity: 1;
}

.snowflake_o_2 {
  opacity: 0.9;
}

.snowflake_o_3 {
  opacity: 0.8;
}

.snowflake_o_4 {
  opacity: 0.7;
}

.snowflake_s_1 {
  font-size: 30px;
  height: 30px;
}

.snowflake_s_2 {
  font-size: 26px;
  height: 26px;
}

.snowflake_s_3 {
  font-size: 22px;
  height: 22px;
}

.snowflake_s_4 {
  font-size: 32px;
  height: 32px;
}

.snowflake_s_5 {
  font-size: 28px;
  height: 28px;
}

.snowflake_s_6 {
  font-size: 20px;
  height: 20px;
}

.snowflake_c_1 {
  color: #00a8ff;
}

.snowflake_c_2 {
  color: #0083C7;
}

.snowflake_c_3 {
  color: #ABDDF7;
}

.snowflake_c_4 {
  color: #00E2FF;
}

.snowflake_c_5 {
  color: #0081FF;
}

.snowflake_c_6 {
  color: #96D3FF;
}

.snowflake_c_7 {
  color: #969BFF;
}

.snowflake_c_8 {
  color: #CCCEFF;
}

.snowflake_c_9 {
  color: #CCF5FF;
}

.snowflake_c_10 {
  color: #E1E9FF;
}

JavaScript

var snow_intensive = 300, // интервал между снежинками
  snow_speed = 7500, // скорость падения снега
  snow_src = new Array('❉', '❈', '❇', '❅', '❊', '✳', '✲', '✱', '❄', '❆', '*', '☸'), // снежинки
  snow_y = $('#container').height(), // опредиление высоты страницы
  a = "", // - + 
  x = "", // напровление полёта снежинки (лево право)
  y = 1, // css snowflake_c_1 - snowflake_c_10
  s = 1, // css snowflake_s_1 - snowflake_s_6
  o = 1, // css snowflake_o_1 - snowflake_o_4
  z = 150; // колличество снежинок лежащик у подножья

function snow_start() {

  snow_id = 1;

  setInterval(function() {

    snow_x = Math.random() * document.body.offsetWidth - 100;

    snow_img = (snow_src instanceof Array ? snow_src[Math.floor(Math.random() * snow_src.length)] : snow_src);
    snow_elem = '<div class="snowflake snowflake_o_' + o + ' snowflake_s_' + s + ' snowflake_c_' + y + '" id="snow' + snow_id + '" style="left:' + snow_x + 'px;">' + snow_img + '</div>';

    $("#container").append(snow_elem);

    snow_move(snow_id);
    snow_id++;

    if (o == 4) o = 1;
    else o++;
    if (s == 6) s = 1;
    else s++;
    if (y == 10) y = 1;
    else y++;

  }, snow_intensive);

}

function snow_move(id) {

  var b = $('#snow' + id).height(),
    snow_h = snow_y - b,
    p = id - z;

  if (id % 2 == 0) {

    a = "+";
    x = snow_speed + Math.round(Math.random() * 2500);

  } else if (id % 2 == 1) {

    a = "-";
    x = snow_speed - Math.round(Math.random() * 2500);

  }

  $('#snow' + id).animate({

    top: snow_h,
    marginTop: 0,
    left: "+=" + a + Math.random() * 500

  }, x, function() {

    $('#snow' + p).empty().remove();

  });
}

$(document).ready(snow_start);