Parallax Star Scroller CSS Generator

Generate star field CSS for Parallax Star Scroller.

by the_voder

HTML

<div id="output"></div>

JavaScript

///////////////////////////////////////////////
///////////////////////////////////////////////
// Create CSS for random "star-field" effect //
// https://jsfiddle.net/the_voder/3sbwkcxz/  //
///////////////////////////////////////////////
///////////////////////////////////////////////

/*
Create CSS for "star-field" effect using stacked radial gradients.
Quick-and-dirty hack to avoid the need for background images. Creating all these gradients is CPU-intensive though, so use of actual background images (.png or.svg with transparent background) is preferred.
*/

$(document).ready(function() {

  // Layer count
  const layers = 4;

  // Count of star gradients to create per layer
  // First item is nearest layer, last is furthest away. There will be more stars further away
  // (Edit number of items if using more/fewer layers)
  const count = [25, 50, 100, 200];

  // Random star diameter min, max
  const diameterMin = 0.75;
  // Array of maximum star diameter values for layers 1-4
  // First item is nearest layer, last is furthest away. Further away stars will tend to look smaller
  // (Edit number of items if using more/fewer layers)
  const diameterMax = [10, 7.5, 3, 2];

  // Random star center colours
  // Adding duplicate items is a quick-and-dirty way to bias the random choice
  const colours = ["#EEE", "#EEE", "#EEE", "#EEE", "#EEE", "#EEE", "#EEE", "#EEE", "#EEE", "#EEE", "#EEE", "#EEE", "#EEE", "#EEE", "#EEE", "#EEE", "#EEE", "#EEE", "#FA5558", "#FBC217", "#17ECFB"];

  // CSS selector for rule (number will be added to end of selector CSS)
  let selector = "#starlayer";

  // Init CSS string
  let starsCSS = "";

  // Loop through layers
  for (var i = 0; i < layers; i++) {

    // Make CSS star string
    starsCSS += selector + (i + 1) + " { background-image: ";

    // Generate CSS for count * "stars"for this layer
    for (var j = 0; j < count[i]; j++) {

      // Random diameter
      var randD = diameterMin + (Math.random() * (diameterMax[i] -...