JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div class="heroContainer">
  <div class="heroStars">
    <div class="debris heroStar"></div>
    <div class="debris heroStar"></div>
    <div class="debris heroStar"></div>
    <div class="debris heroStar"></div>
    <div class="debris heroStar"></div>
    <div class="debris heroStar"></div>
    <div class="debris heroStar"></div>
    <div class="debris heroStar"></div>
    <div class="debris heroStar"></div>
    <div class="debris heroStar"></div>
    <div class="debris heroStar"></div>
    <div class="debris heroStar"></div>
    <div class="debris heroStar"></div>
    <div class="debris heroStar"></div>
    <div class="debris heroStar"></div>
    <div class="debris heroStar"></div>
    <div class="debris heroStar"></div>
    <div class="debris heroStar"></div>
    <div class="debris heroStar"></div>
    <div class="debris heroStar"></div>
    <div class="debris heroStar"></div>
    <div class="debris heroStar"></div>
    <div class="debris heroStar"></div>
    <div class="debris heroStar"></div>
    <div class="debris heroStar"></div>
    <div class="debris heroStar"></div>
    <div class="debris heroStar"></div>
    <div class="debris heroStar"></div>
    <div class="debris heroStar"></div>
    <div class="debris heroStar"></div>
    <div class="debris heroStarLight"></div>
    <div class="debris heroStarLight"></div>
    <div class="debris heroStarLight"></div>
    <div class="debris heroStarLight"></div>
    <div class="debris heroStarLight"></div>
    <div class="debris heroStarLight"></div>
    <div class="debris heroStarLight"></div>
    <div class="debris heroStarLight"></div>
    <div class="debris heroStarLight"></div>
    <div class="debris heroStarLight"></div>
    <div class="debris heroStarLight"></div>
    <div class="debris heroStarLight"></div>
    <div class="debris heroStarLight"></div>
    <div class="debris heroStarLight"></div>
    <div class="debris heroStarLight"></div>
    <div class="debris heroStarLight"></div>
    <div class="debris...

CSS

.heroContainer {
    height: 560px;
    position: relative;
    background: linear-gradient(to top, #222 60%, black);
    overflow: hidden;
}
.heroTop {
  height: 210px;
}
.heroEarth {
  background: url('https://mp-dev.cloud.navy.mil/homeHero.png');
  height: 350px;
  width: 100vw;
  background-size: cover;
  background-position-x: center;
  background-position-y: -2px;
  position: absolute;
  z-index: 2;
}

.heroOverlay {
  background: rgba(0, 83, 148, 0.32);
  position: absolute;
  z-index: 3;
  width: 100%;
  height: 100%;
}
.nccsLogo {
    background: url('https://mp-dev.cloud.navy.mil/nccsLogo_130.png');
    position: fixed;
    margin-left: calc(50vw - 60px);
    margin-top: 70px;
    width: 130px;
    height: 130px;
    z-index:2;
}

.heroStars{
  position: fixed;
  width: 100vw;
  height: 400px;
  z-index: 1;
}
.heroStar {
    position: absolute;
    top: 100px;
    left: 100px;
    background: rgba(255,230,230, 0.3);
    display: block;
    width: 2px;
    height: 2px;
    border-radius: 5px;
    box-shadow: 0 0 3px 4px rgba(255,230,230,.03);
}
.heroStarLight {
    position: absolute;
    top: 100px;
    left: 100px;
    background: rgba(255,230,230, 0.2);
    display: block;
    width: 1px;
    height: 1px;
    border-radius: 5px;
    box-shadow: 0 0 3px 4px rgba(255,230,230,.01);
}

.trashspacer {height: 1000vh;}

JavaScript

// collect all the divs
var divs = document.getElementsByClassName('debris');
// get window width and height
var winWidth = window.innerWidth;
var winHeight = 1000;

// i stands for "index". you could also call this banana or haircut. it's a variable
for ( var i=0; i < divs.length; i++ ) {
 	
    // shortcut! the current div in the list
    var thisDiv = divs[i];
    
    // get random numbers for each element
    randomTop = getRandomNumber(0, winHeight);
    randomLeft = getRandomNumber(0, winWidth);
    
    // update top and left position
    thisDiv.style.top = randomTop +"px";
    thisDiv.style.left = randomLeft +"px";
    
}

// function that returns a random number between a min and max
function getRandomNumber(min, max) {
    
  return Math.random() * (max - min) + min;
    
}