jQuery addClass example

Change class name on click in jQuery

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

HTML

<canvas id="box_canvas1"></canvas>
<div data-snowman="block" class="snowman"></div>
<div id="snow_container"></div>
<div data-block="ss" class="ss">СЕРЁЖКА СЕДЛЯРЧУК</div>
<div data-client="cursor" class="cursor"></div>

CSS

body {
  background: #0600ff;
  padding: 0;
  margin: 0;
}

.ss {
  left: 0;
  top: 0;
  color: #ffed00;
  font-size: 30px;
  font-weight: 700;
  font-family: cursive;
  position: fixed;
}

html,
body {
  cursor: none;
}

.cursor {
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAMAAADzapwJAAAAM1BMVEUAAAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABdXV3///+frRuHAAAAD3RSTlMAAAULEBYcIScyNz1DSFNagiHkAAAAgUlEQVQYV23QgQrDIAwE0DSNWVud6f9/7UzULmoPQXgccghbiey4tQDUy1i4+8D34yM/PnH3mZsvXH1l8xdWf2Pz5W1N39lYT/6meOyeJaufHMi3JUfli8YlMXJQ/wxL6GDEWveM+t/U6n+29PrEpS6SgmOwIF/ppIUBqcxeHvH5AWd6CRqTqhgMAAAAAElFTkSuQmCC');
  background-repeat: no-repeat;
  display: none;
  position: fixed;
  height: 22px;
  width: 22px;
}

.cursor.active {
  display: block;
}

#snow_container {
  left: 0;
  position: fixed;
  top: 0;
  height: 100vh;
  width: 100vw;
}

.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;
}

.snowman {
  width: 234px;
  height: 250px;
  position: fixed;
  left: 0;
  bottom: 0;
  background:...

JavaScript

var self = window.self;
(function(self) {


  var points = [],
    numPoints = 1000,
    i, canvas, context, width, height, bounce = -1.9,
    particleSize = [];

  canvas = document.getElementById("box_canvas1");
  width = self.innerWidth;
  height = self.innerHeight;
  context = canvas.getContext("2d");

  context.canvas.width = width;
  context.canvas.height = height;

  self.addEventListener('resize', function() {
    width = self.innerWidth;
    height = self.innerHeight;
    context.canvas.width = width;
    context.canvas.height = height;
  });

  for (i = 0; i < numPoints; i += 1) {
    points.push({
      x: Math.random() * width,
      y: Math.random() * height,
      vx: Math.random() * 0.5 - 0.25,
      vy: Math.random() * 0.5 - 0.25
    });
    particleSize.push(Math.random() * 10 + 5);
  }

  function drawCircle(x, y, radius) {
    let alpha = Math.random() * .1 + .9;

    let color = 'rgba(' + fn.random(0, 255) + ', ' + fn.random(0, 255) + ', ' + fn.random(0, 255) + ',' + alpha + ')';

    context.beginPath();
    context.arc(x, y, radius, 0, Math.PI * 2, false);
    context.strokeStyle = color;
    context.stroke();
    context.closePath();
  }


  function update() {
    var i, point;

    for (i = 0; i < numPoints; i += 1) {

      point = points[i];
      point.x += point.vx;
      point.y += point.vy;

      if (point.x >= width) {
        point.x = width;
        point.vx *= bounce;
      } else if (point.x <= 0) {
        point.x = 0;
        point.vx *= bounce;
      }
      if (point.y > height) {
        point.y = height;
        point.vy *= bounce;
      } else if (point.y < 0) {
        point.y = 0;
        point.vy *= bounce;
      }
    }
    draw();

  }

  function draw() {
    context.clearRect(0, 0, width, height);
    var i, point, sides = 6,
      a = ((Math.PI * 2) / sides);
    for (i = 0; i < numPoints; i += 1) {
      point = points[i];
      var size = particleSize[i];
      drawCircle(point.x, point.y, size);
    }
  }

 ...