Parallax Star Scroller (Method 1)

Test of parallax scrolling stars background. This version used 4 layers, each filled with stars created using multiple CSS background gradients.

by the_voder

HTML

<div id="starwrapper">	
	<div class="starlayer" id="starlayer1"></div>
	<div class="starlayer" id="starlayer2"></div>
	<div class="starlayer" id="starlayer3"></div>
	<div class="starlayer" id="starlayer4"></div>
</div>

<div id="wrapper">

</div>

CSS

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

#starwrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

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

/*
The CSS for the stars could be dumped into a seperate stylesheet.
See https://jsfiddle.net/the_voder/3mz1Lck2/
for a script to generate the CSS
*/

.starlayer {
  position: fixed;
  top: -100vh;
  left: 0;
  width: 100vw;
  /* height  */
  height: 300vh;
  background-size: 100vw 100vh;
  background-repeat: repeat;
}

/*
CSS pasted from code-generator
https://jsfiddle.net/the_voder/vgr2kdbw/
*/

#starlayer1 {
  background-image: radial-gradient(3.8720931279557647px 3.8720931279557647px at 17.08411804927801vw 79.35266489442596vh, #EEE, rgba(0, 0, 0, 0)), radial-gradient(1.1741421364479754px 1.1741421364479754px at 73.27052914459682vw 27.308755960960283vh, #EEE, rgba(0, 0, 0, 0)), radial-gradient(5.009588201051108px 5.009588201051108px at 9.696917670434646vw 92.25049776180822vh, #17ECFB, rgba(0, 0, 0, 0)), radial-gradient(5.588163130039324px 5.588163130039324px at 4.905587339591958vw 31.50829658189638vh, #EEE, rgba(0, 0, 0, 0)), radial-gradient(1.5352631682106286px 1.5352631682106286px at 27.553659105727057vw 43.81558867111289vh, #EEE, rgba(0, 0, 0, 0)), radial-gradient(7.290651626524448px 7.290651626524448px at 85.02910985778698vw 83.4813882727568vh, #EEE, rgba(0, 0, 0, 0)), radial-gradient(6.226272896184338px 6.226272896184338px at 19.956113732681253vw 24.924061926593964vh, #EEE, rgba(0, 0, 0, 0)), radial-gradient(4.827224816835246px 4.827224816835246px at 32.352512797738115vw 62.550176425780805vh, #EEE, rgba(0, 0, 0, 0)), radial-gradient(5.928652232664303px 5.928652232664303px at 33.91368504390675vw 6.528425922298386vh, #EEE, rgba(0, 0, 0, 0)), radial-gradient(1.6108197472255197px 1.6108197472255197px at 59.26666911083813vw 57.39187000437924vh, #EEE, rgba(0, 0, 0, 0)),...

JavaScript

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

/*
Stars are created with pure CSS using stacked radial gradient backgrounds. Hack to avoid the need for background images. Creating all these gradients is CPU-intensive and requires a LOT of CSS so use of actual background images (.png or.svg with transparent background) is strongly advised!!

Parallax effect used for star movement to create sense of depth.

See CSS tab for URL of CSS code generator sketch.
*/

$(document).ready(function() {

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

  // Window dimensions
  let windowHeight = $(window).height();
  let windowWidth = $(window).width();

  // Scroll-position current and previous values
  let scroll = 0;
  let oldScroll = 0;

  // Scroll delta values
  // Delta is the rate and direction of movement
  let restingDeltaY = -2; // Delta when page isn't being scrolled
  let scrollDelta = 0; // Delta from scroll
  let deltaY = restingDeltaY; // Actual vertical position delta

  // Mouse X (horizontal) value
  let mouseX = 0;
  // Scale mouse X effect on layer horizontal position
  let mouseScaleX = 25;
  
  ///////////////////////
  // Object Definition //
  ///////////////////////

  // Layer object
  // Contains all values and functions required to animate a single layer
  const layer = {
    layer: "",
    parallaxFactorX: 0,
    parallaxFactorY: 0,
    shiftX: 0,
    shiftY: 0,
    // Initialise method
    // Requires layer ID, Parallax Factor X, Parallax Factor Y
    init: function(id, pfx, pfy) {
      this.layer = $("#" + id);
      this.parallaxFactorX = pfx;
      this.parallaxFactorY = pfy;
    },
    // Position-update method
    // Requires Shift X and Delta Y
    updateOffset: function(sx,...