jQuery addClass example

Change class name on click in jQuery

by shelukhin89

HTML

<div id="div">
		  <canvas id="canvas"></canvas>
		  <span class="span">PREMIUM</span>
		</div>

CSS

html {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
body {
	background: #010278;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	overflow: hidden;
  background-image:url(https://cdn.pixabay.com/photo/2018/07/23/19/32/abstract-3557682_960_720.jpg);
  background-size:cover;
  background-position:50% 50%;
}
#div{
	position:relative;
}
.span {
	font-size: 120px;
	font-family: Arial;
	font-weight: 700;
	color: #fff;
	font-style: italic;
	text-shadow: 0 0 10px rgba(255,255,255,0.5),0 0 10px rgba(255,255,255,0.5);
	position: relative;
}
#canvas {
	position: absolute;
	left: -100px;
	top: -100px;
	*margin-left: -385px;
	*margin-top: -125px;
	pointer-events: none;
	display: block;
}

JavaScript

function randInt(min, max) {
				var rand = min + Math.random() * (max - min)
				rand = Math.round(rand);
				return rand;
			}

			var c = document.getElementById('canvas');
      var d = document.getElementById('div');
			var ctx = c.getContext('2d');

			c.width = d.offsetWidth + 200;
			c.height = d.offsetHeight + 200;

			var particles = [];

			setInterval(function(){
				createParticles();
			}, 50);

			draw();

			function draw(){
				
				drawBg();
				incParticles();
				drawParticles();
				
				window.requestAnimationFrame(draw);
				
			}

			function drawBg(){
				ctx.clearRect(0, 0, canvas.width, canvas.height);
				/*
				ctx.rect(0, 0, c.width, c.height);
				ctx.fillStyle = "#010278";
				ctx.fill();*/
			}

			function drawParticles(){
				for(i = 0; i < particles.length; i++){
					ctx.beginPath();
					ctx.arc(particles[i].x,
								 particles[i].y,
								 particles[i].size,
								 0,
								 Math.PI * 2);
					ctx.fillStyle = particles[i].color;
					ctx.closePath();
					ctx.fill();
				}
			}

			function incParticles(){
				for(i = 0; i < particles.length; i++){
					particles[i].x += particles[i].velX;
					particles[i].y += particles[i].velY;
					
					particles[i].size = Math.max(0, (particles[i].size - .05));
					
					if(particles[i].size === 0){
						particles.splice(i, 1);
					}
				}
			}

			function createParticles(){
				for(i = 0; i < 150; i++){
					particles.push({
						x: randInt(c.width / 100 * 12, c.width / 100 * 88),
						y: randInt(c.height / 100 * 30, c.height / 100 * 70),
						size: parseInt(Math.random() * 2),
						color: '#' + ranRgb(),
						//color: '#fff',
						velX: ranVel(),
						velY: ranVel()
					});
				}
			}

			function ranRgb(){
				var colors = [
					'ffa200',
					'ffffff',
					'0096ff',
				];
				
				var i = parseInt(Math.random() * 10);
				
				return colors[i];
			}

			function ranVel(){
				var vel = 0;
				
				if(Math.random() < 0.5){
					vel =...