JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="demo"></div>
<div id="demoo"></div>
<div id="demooo"></div>
<div id="demoooo"></div>


<!-- <div id="slider">
  <div class="slide one active"></div>
  <div class="slide two"></div>
</div> -->

CSS

body {
  background: #19182a;
  margin: 0;
  transition: 1s;
}
body.active {
  background: lightblue;
}
#demo {
  width: 10px;
  height: 10px;
  position: fixed; 
  z-index: 3;
  /* border: 1px solid black; */
  border-radius: 50%;
  background: white;
  transition: .4s cubic-bezier(0, 0, 0.13, 1.01);
  box-shadow: 0 0 50px lime;
}
#demo.active {
  opacity: 0;
 transition: .5s cubic-bezier(0, 0, 0.13, 1.01);
 box-shadow: unset;
}
#demoo {
  width: 10px;
  height: 10px;
  position: fixed; 
  z-index: 3;
  /* border: 1px solid black; */
  border-radius: 50%;
  background: white;
  transition: .4s cubic-bezier(0, 0, 0.13, 1.01);
  box-shadow: 0 0 50px lime;
}
#demoo.active {
  opacity: 0;
 transition: .5s cubic-bezier(0, 0, 0.13, 1.01) .3s;
 box-shadow: unset;
}

JavaScript

var isScrolling;

document.addEventListener('mousemove', function(e) {


	document.getElementById('demo').classList.remove('active');
  document.querySelector('body').classList.remove('active');
  document.getElementById('demoo').classList.remove('active');

	window.clearTimeout( isScrolling );

	isScrolling = setTimeout(function() {

		console.log( 'Scrolling has stopped.' );

		document.getElementById('demo').classList.add('active');
    document.getElementById('demoo').classList.add('active');
     document.querySelector('body').classList.add('active');

	}, 66);

var a = document.querySelectorAll('.slide');
for(var i = 0; i < a.length; i++){
		
}


  
  setTimeout(function() {
    var x = e.clientX - 40;
    var y = e.clientY - 40;
    var xx = e.clientX + 100;
    var yy = e.clientY + 40;
    document.getElementById('demo').style.transform = "translate(" + x + 'px ,' + y + 'px)';
    document.getElementById('demoo').style.transform = "translate(" + xx + 'px ,' + yy + 'px)';
  })


})