JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- my raf --test-->

CSS

body {
  margin:0;
  padding:0;
  background:#FFF;
  background-attachment:fixed;
  height:1000vh;
}
div {
  width:50px;
  height:50px;
  border:3px solid #000;
  position:fixed;
}

JavaScript

/*
 * IMPORTANT: this is an example on how *NOT* to do this!!
*/
var colors = ["#FC4936","#53ACC6","#333462"];
var num = 500;
var blurmod=2;
var scalemod=1;
var opacitymod=0.5;
var scrollmod=1.0;

var blobs=[];
function blob() {
  this.posZ=getRandomInt(1,200)-100;
  this.element=$('<div/>');
 this.element.css('background',colors[Math.floor(Math.random()*colors.length)]); //random bg color
  this.element.css('z-index',this.posZ);
  this.element.css('left',getRandomInt(5,95)+'%');
  this.startTop=getRandomInt(5,95);
  this.element.css('top',this.startTop+'%');
  //this.element.css('-webkit-filter','blur('+(Math.abs(this.posZ)/100*blurmod)+'px)').css('filter','blur('+(Math.abs(this.posZ)/100*blurmod)+'px)');
  if(this.posZ > 0)
    this.element.css('transform','scale('+(1+scalemod*this.posZ/100)+')').css('-webkit-transform','scale('+(1+scalemod*this.posZ/100)+')').css('-ms-transform','scale('+(1+scalemod*this.posZ/100)+')');
  else
    this.element.css('transform','scale('+(1/(1+(scalemod*this.posZ/-100)))+')').css('-webkit-transform','scale('+(1/(1+(scalemod*this.posZ/-100)))+')').css('-ms-transform','scale('+(1/(1+(scalemod*this.posZ/-100)))+')');
  this.element.css('opacity',(1-opacitymod*Math.abs(this.posZ)/100))
  this.element.appendTo('body');
}
blob.prototype.updateTop = function() {
  this.element.css('top',(this.startTop+scrollPercent*(this.posZ)/100*scrollmod)+'%');
};

var scrollPercent=0;
var index, len;
$(window).scroll(function(){
  scrollPercent = 100 * $(window).scrollTop() / ($(document).height() - $(window).height());
  for (index = 0, len = blobs.length; index < len; ++index) {
    blobs[index].updateTop();
  }
});

while(num > 0) {
  blobs.push(new blob());
  num--;
}

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}