JSFiddle - React, Tailwind, and code Playground

by Vladimir Sobolev

HTML

<body>
	<div class="site-wrapper">

		<div class="left-canvas-box">

			<h1>Slogan Goes Here</h1>		

		</div>

		<canvas id="canvas" width="500" height="500" style="border: 1px solid #000000;"></canvas>		


		<div class="right-scroll-content">

			<div class="scrollable">

				<div class="panel panel-1-bio">
					<h3>Name</h3>

					<h2>Slogan!</h2>

					<p class="side-panel-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida, ipsum quis pretium accumsan, magna ante aliquet lorem, sollicitudin convallis tortor mauris vitae massa. Pellentesque sit amet facilisis libero. Integer semper diam a nunc iaculis, nec vulputate ante euismod. Nulla dolor est, consectetur quis aliquam vel, malesuada ut arcu. In sit amet tempus erat, sed auctor sem. Sed ultrices nisi nec lacus lobortis, eget vestibulum purus egestas. Nunc ex diam, blandit et arcu ac, viverra posuere enim. Suspendisse eleifend molestie orci et imperdiet. Cras a erat turpis. Nulla facilisi. Cras non lorem imperdiet ex venenatis pharetra eget sed felis. Sed maximus massa lorem, sit amet molestie erat porttitor nec. Aenean rutrum laoreet lorem, in feugiat ex.</p>

				</div>

				<div class="panel panel-2-talents">
				</div>

				<div class="panel panel-3-works">
				</div>

				<div class="panel panel-4-contact">
				</div>

			</div>

		</div>
	</div>

</body>

CSS

body {
	padding: 0;
	margin: 0;
}

#canvas{
position: fixed;
top: 0;
left: 0;
z-index: -1;
}

.left-canvas-box, .right-scroll-content{
width: 50%;
float: left;
display: block;
}

.left-canvas-box{
background: rgba(0, 0, 0, .2);
height: 723px;
}

.right-scroll-content{
background: #FFF;
height: 723px;
position: absolute;
top: 0;
right: 0;
}

h1{
width: 70%;
font-size: 44px;
text-align: center;
color: #FFF;
margin: 0 auto;
font-family: helvetica, sans-serif;
top: 40px;
position: relative;
}

.panel{
padding: 0 70px;
font-family: helvetica, sans-serif;
line-height: 24px;
}


h3{
font-size: 15px;
font-style: normal;
text-transform: uppercase;
letter-spacing: .5px;
color: #AEACAC;
margin-bottom: -10px;
font-weight: 600;
}

h2{
	font-size: 22px;
font-weight: 400;
color: #333537;
padding-bottom: 7px;
}

@media only screen and (min-width:0px) and (max-width:670px){
    
.left-canvas-box, .right-scroll-content{
width: 100%;
float: none;
display: block;
}
    
    #canvas{
position: fixed;
top: 0;
left: 0;
z-index: -1;
height:723px;
}

.right-scroll-content{
background: #FFF;
height: 723px;
position: relative;
z-index:1;
}
    
.left-canvas-box{
background: rgba(0, 0, 0, .2);
height: 723px;
z-index:1;
display:block;
        
    }
    
}

JavaScript

//Canvas webframe animations

// RequestAnimFrame: a browser API for getting smooth animations
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       || 
		  window.webkitRequestAnimationFrame || 
		  window.mozRequestAnimationFrame    || 
		  window.oRequestAnimationFrame      || 
		  window.msRequestAnimationFrame     ||  
		  function( callback ){
			window.setTimeout(callback, 1000 / 60);
		  };
})();

// Initializing the canvas
// I am using native JS here, but you can use jQuery, 
// Mootools or anything you want
var canvas = document.getElementById("canvas");

// Initialize the context of the canvas
var ctx = canvas.getContext("2d");

// Set the canvas width and height to occupy full window
var W = window.innerWidth, H = window.innerHeight;
canvas.width = W;
canvas.height = H;


// Some variables for later use
var particleCount = 120,
	particles = [],
	minDist = 70,
	dist;

// Function to paint the canvas black
function paintCanvas() {
	// Set the fill color to green
	ctx.fillStyle = "rgba(44, 62, 80, 1)";
	
	// This will create a rectangle of white color from the 
	// top left (0,0) to the bottom right corner (W,H)
	ctx.fillRect(0,0,W,H);
}

// Now the idea is to create some particles that will attract
// each other when they come close. We will set a minimum
// distance for it and also draw a line when they come
// close to each other.

// The attraction can be done by increasing their velocity as 
// they reach closer to each other

// Let's make a function that will act as a class for
// our particles.

function Particle() {
	// Position them randomly on the canvas
	// Math.random() generates a random value between 0
	// and 1 so we will need to multiply that with the
	// canvas width and height.
	this.x = Math.random() * W;
	this.y = Math.random() * H;
	
	
	// We would also need some velocity for the particles
	// so that they can move freely across the space
	this.vx = -1 + Math.random() * 2;
	this.vy = -1 + Math.random()...