Parallax Star Scroller (Method 1.5)

Test of parallax scrolling stars background. This version used 4 layers, each filled with a static SVG background image.

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;
}

/* Styles for all star layer elements */
.starlayer {
	position: fixed;
	width: 100vw;
	/* Scale layer to be 3x viewport height to allow for "handle" (extra content) above and below viewport */
	height: 300vh;
	/* Position 100vh-worth of tiling background above and below viewport */
	top: -100vh;
	left: 0;
	/* Height must be exactly 100vh or there will be a glitch when layer position is reset by JavaScript */
	background-size: auto 100vh;
	background-position: center;
	/* Force background to repeat (tile) */
	background-repeat: repeat;
}

/*
  Styles for individual star layer elements
 Use your own images (but I recommend using SVGs) 
  */
#starlayer1 {
	background-image: url(http://mctestserver.gold.ac.uk/tmp/2023/03/starfield/starfield_01.svg);
}

#starlayer2 {
	background-image: url(http://mctestserver.gold.ac.uk/tmp/2023/03/starfield/starfield_02.svg);
	opacity: 0.75;
}

#starlayer3 {
	background-image: url(http://mctestserver.gold.ac.uk/tmp/2023/03/starfield/starfield_03.svg);
	opacity: 0.6;
}

#starlayer4 {
	background-image: url(http://mctestserver.gold.ac.uk/tmp/2023/03/starfield/starfield_04.svg);
	opacity: 0.4;
}

JavaScript

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

/*
Stars are created with static SVG background images in this version.

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

$(document).ready(function () {

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

  // Window dimensions
  // jQuery $(window).width()/height() don't seem to work (return content rather than viewport dimensions)
  let windowHeight = window.innerHeight;
  let windowWidth = window.innerWidth;

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

  // Scroll delta values
  const restingDeltaY = -1; // 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: null,
    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, dy) {
      // Calculate X (horizontal) position-transform value (based on mouse position)
      this.shiftX = sx * this.parallaxFactorX;
      // Calculate Y (vertical)...