JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<input type="button" value="Фон #1" id="aposw" onclick="aposw($(this));">

<div class="imapo">IMAPO.RU - Уникальные скрипты для сайтов</div>

<div class="apocanvas">
<canvas id="canvas"></canvas>
<canvas id="c"></canvas>
</div>

CSS

html,
body {
  margin: 0px;
  background: #000;
}

.imapo {
  font-size: 30px;
  text-align: center;
  height: 100px;
  padding-top: 70px;
  background: rgba(255, 255, 0, 0.5);
  margin: 50px;
  color: #fee;
  box-shadow: 1px 1px 5px #000;
}

#canvas {
  -webkit-filter: blur(1px);
  filter: blur(1px);
}

.apocanvas {
  position: fixed;
  z-index: -1;
  top: 0px;
}

.apocanvas canvas {
  display: none;
}

#aposw {
  position: absolute;
  top: 0px;
}

JavaScript

$(function() {
  if(localStorage.getItem('apoht')) {
    $('canvas#canvas').show();
    $('#aposw').val('Фон #2');
  } else {
    $('canvas#c').show();
  };
});

function aposw(a) {
  if(localStorage.getItem('apoht')) {
    localStorage.removeItem('apoht');
    $('canvas#canvas').hide();
    $('canvas#c').show();
    a.val('Фон #1');
  } else {
    localStorage.setItem('apoht', 1);
    $('canvas#c').hide();
    $('canvas#canvas').show();
    a.val('Фон #2');
  };
}

//Converting this code into a particle system soonnn!
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var circleArray = [];
//Color array to look like bubbles
var ballColorSelections = ['#A7DBD8', '#EFEFEF', '#ADF7D3', '#88F7D2'];
//Global settings
var settings = {
maxCount: 400,
//Reversed the bounce from collisions to create an attraction
bounce: -0.05,
force: -1.25,
gravity: -0.01
}
//Just for my profile background, using the CSS here for it too ;)
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
createCircle(settings.maxCount);
window.addEventListener('resize', function() {
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
});
 
function Circle() {
this.positionX = (Math.random() * window.innerWidth / 2) + window.innerWidth /
4;
this.positionY = window.innerHeight;
this.radius = Math.floor((Math.random() * window.innerWidth * 0.005) +
1);
this.velocityY = (Math.random() * 100) / 100 * -1;
this.velocityX = (Math.random() * 100) / 100 * -1;
this.color = ballColorSelections[Math.floor(Math.random() * 5)];
}
 
function createCircle(max) {
for (var i = 0; i < max; i++) {
var circleObject = new Circle;
circleObject.id = i;
circleArray.push(circleObject);
}
//After creation of circle attributes, the animations begin
moveCircle();
}
 
function drawCircle(object) {
for (var i = 0; i < object.length; i++) {
context.beginPath();
context.arc(object[i].positionX, object[i].positionY, object[i].radius,
0, 2 *...