Parallax Star Scroller (Method 2)

Test of parallax scrolling stars background. This version used individual elements for the stars.

by the_voder

HTML

<div id="starwrapper"></div>

<div id="wrapper"></div>

CSS

body {
  margin: 0;
  background-color: #000;
}

#starwrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  /* filter: drop-shadow(#fff 0 0 4px) */
}

#wrapper {
  position: relative;
  top: 0;
  width: 100vw;
	height: 1000vh;
  max-width: 1000px;
  margin: 0 auto;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background-color: #fff;
  border-radius: 50%;
}

JavaScript

/////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////
// Create scroll-influenced parallax star-field effect //
/////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////

$(document).ready(function() {

  //////////////////////
  // Global Variables //
  //////////////////////

  // Window dimensions
  let windowHeight = $(window).height();
  let windowWidth = $(window).width();
  let starsTop = -(0.5 * windowHeight);

  const containerID = "#starwrapper";

  const starCount = 1000;
  const starID = "star";
  const starClass = "star";

  // Random star center colours
  // Adding duplicate items is a quick-and-dirty way to bias the random choice (and save a little bit of code later)
  const colours = ["rgba(255,255,255,1.0)", "rgba(255,255,255,1.0)", "rgba(255,255,255,1.0)", "rgba(255,255,255,1.0)", "rgba(255,255,255,1.0)", "rgba(255,255,255,1.0)", "rgba(255,255,255,1.0)", "rgba(255,255,255,1.0)", "rgba(255,255,255,1.0)", "rgba(255,255,255,1.0)", "rgba(255,255,255,1.0)", "rgba(255,255,255,1.0)", "rgba(255,255,255,1.0)", "rgba(255,255,255,1.0)", "rgba(255,255,255,1.0)", "rgba(255,255,255,1.0)", "rgba(255,255,255,1.0)", "rgba(255,255,255,1.0)", "rgba(255,255,255,1.0)", "rgba(255,255,255,1.0)", "rgba(255,255,255,1.0)", "#rgba(255,255,255,1.0)", "rgba(255,255,255,1.0)", "rgba(255,255,255,1.0)", "rgba(255,255,255,1.0)", "rgba(255,255,255,1.0)", "rgba(250,85,88,1.0)", "rgba(251,194,23,1.0)", "rgba(23,236,251,1.0)"];

  // Movement parallax min, max
  const parallaxMin = 0.1;
  const parallaxMax = 0.9;

  // Star diameter min, max
  const diameterMin = 1;
  const diameterMax = 5;

  // Scroll delta values
  // Delta defines the direction and rate of movement
  const restingDeltaY = -1; // Rate of vertical movement when page is not being scrolled
  let scrollDelta = 0; // Rate and direction of movement when page is being scrolled
  const scrollDeltaScale...