Different scroll speeds for elements in array

195
February 19, 2022, at 10:00 PM

I have different randomly-styled stars in an array and I would like them to each have different scroll speeds between -.2 and -.8. The idea is to have them do a parallax effect, and it'd be cool to have everything a little random.

This was the original scroll speed code using images:

var starsOne = document.querySelector("#starsOne"); 
function setTranslate(xPos, yPos, el) {
    el.style.transform = "translate3d(" + xPos + ", " + yPos + "px, 0)";
}
var xScrollPosition;
var yScrollPosition;
function scrollLoop() {
    xScrollPosition = window.scrollX;
    yScrollPosition = window.scrollY;
    setTranslate(0, yScrollPosition * -0.6, starsOne);
    requestAnimationFrame(scrollLoop);
}
window.addEventListener("load", scrollLoop, false);

I've been trying to integrate the above code somehow for the array:

let starScrollMin = 2;
let starScrollMax = 8;
var starScrollSpeed = -Math.abs((Math.floor(Math.random() * (starScrollMax - starScrollMin + 1)) + starScrollMin) / 10);
function starScroll() {
        for (i = 0; i < starDivvyArr.length; i++) {
        yScrollPos = window.scrollY;
        starDivvyArr[i].style.transform = "translate3d(" + 0 + "px, " + yScrollPos * starScrollSpeed + "px, 0)"; 
        }
        requestAnimationFrame(starScroll);
}
    window.addEventListener("load", starScroll, false);

If starScrollSpeed is global, then all the stars move in a big chunk. If it's within the starScroll() function, the values are at least different per star, but it gets crazy as it keeps randomizing and multiplying.

Any ideas on how to randomize the scroll speed for each star so it looks like a parallax effect, without them moving in one single chunk or going crazy? Or is it a safer bet to make a bunch of css lines and then randomly assign classes?

jsfiddle

Answer 1

It's a bit unclear what exactly you're after.

If you're trying to set a random scroll speed for each star, and not change it every time the startScroll triggers. you could set a speed for each start separately inside the loop and use that in the startScroll function instead:

...
starDivvyArr[i].starScrollSpeed = -Math.abs((Math.floor(Math.random() * (starScrollMax - starScrollMin + 1)) + starScrollMin) / 10);
...
 starDivvyArr[i].style.transform = "translate3d(" + 0 + "px, " + yScrollPos * starDivvyArr[i].starScrollSpeed + "px, 0)";

    var starCount = 25;
    let starContain = document.getElementById('starContain');
    /*Create star divs*/
    for (var i = 0; i < starCount; i++) {
      var starDiv = document.createElement("div");
      starDiv.className = 'star';
      starContain.append(starDiv);
    }
    /*Make an array from the star divs*/
    var starDivvy = document.querySelectorAll(".star");
    var starDivvyArr = Array.from(starDivvy);
    /*Create some possible styles*/
    var starColor = ['yellow', 'blue', 'white'];
    var starSizeMin = 5;
    var starSizeMax = 25;
    let starContainWidth = starContain.offsetWidth;
    let starContainHeight = starContain.offsetHeight;
    let starScrollMin = 2;
    let starScrollMax = 8;
    /*Give the star array some different styles*/
    for (i = 0; i < starDivvyArr.length; i++) {
      /*Change star color*/
      starDivvyArr[i].style.backgroundColor = starColor[Math.floor(Math.random() * starColor.length)];
      /*Change star position within container*/
      starDivvyArr[i].style.left = Math.floor((Math.random() * starContainWidth) + 1) + "px";
      starDivvyArr[i].style.top = Math.floor((Math.random() * starContainHeight) + 1) + "px";
      /*Change star size*/
      starDivvyArr[i].style.width = Math.floor(Math.random() * (starSizeMax - starSizeMin + 1)) + starSizeMin + "px";
      starDivvyArr[i].style.height = starDivvyArr[i].style.width;
      starDivvyArr[i].starScrollSpeed = -Math.abs((Math.floor(Math.random() * (starScrollMax - starScrollMin + 1)) + starScrollMin) / 10);
    }

    /*>>>>>>>POINT OF CONFUSION<<<<<<<*/
    /*Randomize scroll speed between -0.2 and -0.8*/

    /*Give the stars a scrolling function*/
    function starScroll() {
      for (i = 0; i < starDivvyArr.length; i++) {
        yScrollPos = window.scrollY;
        starDivvyArr[i].style.transform = "translate3d(" + 0 + "px, " + yScrollPos * starDivvyArr[i].starScrollSpeed + "px, 0)";
      }
      requestAnimationFrame(starScroll);
    }

    window.addEventListener("load", starScroll, false);
*{
  margin:0 auto;
}
section{
  width:100vw;
  height:150vh;
}
.section1{
  background-color:#000;
}
.section2{
  background-color:#202;
}
h2{
  text-align:center;
  color:#ccc;
}
#starContain{
    width:100vw;
    height:500px;
    position:absolute;
    top:50vh;
    z-index:2;
    background-color:rgba(255,255,255,0.2);
}
.star{
    background-color:green;
    position:absolute;
    z-index:100;
    border-radius:50%;
}
<main>
  <section class="section1">
    <h2>
    Section 1
    </h2>
  </section>
  
  <div id="starContain">
  
  </div>
  
  <section class="section2">
    <h2>
    Section 2
    </h2>
  </section>
</main>

Answer 2

You could create an array for the randomly created numbers and push a value from a function that returns the randomly created speed into that array with in the loop and then use that array to get a random value for each element.

var starCount = 25;
let starContain = document.getElementById('starContain');
/*Create star divs*/
for (var i = 0; i < starCount; i++) {
  var starDiv = document.createElement("div");
  starDiv.className = 'star';
  starContain.append(starDiv);
}
/*Make an array from the star divs*/
var starDivvy = document.querySelectorAll(".star");
var starDivvyArr = Array.from(starDivvy);
/*Create some possible styles*/
var starColor = ['yellow', 'blue', 'white'];
var starSizeMin = 5;
var starSizeMax = 25;
let starContainWidth = starContain.offsetWidth;
let starContainHeight = starContain.offsetHeight;
/*Give the star array some different styles*/
for (i = 0; i < starDivvyArr.length; i++) {
  /*Change star color*/
  starDivvyArr[i].style.backgroundColor = starColor[Math.floor(Math.random() * starColor.length)];
  /*Change star position within container*/
  starDivvyArr[i].style.left = Math.floor((Math.random() * starContainWidth) + 1) + "px";
  starDivvyArr[i].style.top = Math.floor((Math.random() * starContainHeight) + 1) + "px";
  /*Change star size*/
  starDivvyArr[i].style.width = Math.floor(Math.random() * (starSizeMax - starSizeMin + 1)) + starSizeMin + "px";
  starDivvyArr[i].style.height = starDivvyArr[i].style.width;
}

/*>>>>>>>POINT OF CONFUSION<<<<<<<*/
/*Randomize scroll speed between -0.2 and -0.8*/
let starScrollMin = 2;
let starScrollMax = 8;
//function for creating random scroll speed
const starScrollSpeed = (min,max) => {
  return -Math.abs((Math.floor(Math.random() * (min - max + 1)) + min) / 10);
}
//==> added array
const starArray = [];
/*Give the stars a scrolling function*/
function starScroll() {
  for (i = 0; i < starDivvyArr.length; i++) {
    // array to hold randomly created scroll speeds
    starArray.push(starScrollSpeed(starScrollMin,starScrollMax))
    yScrollPos = window.scrollY;
    starDivvyArr[i].style.transform = "translate3d(" + 0 + "px, " + yScrollPos * starArray[i] + "px, 0)";
  }
  requestAnimationFrame(starScroll);
}

window.addEventListener("load", starScroll, false);
* {
  margin: 0 auto;
}
section {
  width: 100vw;
  height: 150vh;
}
.section1 {
  background-color: #000;
}
.section2 {
  background-color: #202;
}
h2 {
  text-align: center;
  color: #ccc;
}
#starContain {
  width: 100vw;
  height: 500px;
  position: absolute;
  top: 50vh;
  z-index: 2;
  background-color: rgba(255, 255, 255, 0.2);
}
.star {
  background-color: green;
  position: absolute;
  z-index: 100;
  border-radius: 50%;
}
<main>
  <section class="section1">
    <h2>
      Section 1
    </h2>
  </section>
  <div id="starContain">
  </div>
  <section class="section2">
    <h2>
      Section 2
    </h2>
  </section>
</main>

Rent Charter Buses Company
READ ALSO
Centering a table header

Centering a table header

I'm having issues centering a single table headerBelow is the tablea snapshot of the table Im trying to center Its header

133
Creating on/off button in react

Creating on/off button in react

I am making a button that is going to say "disable" when its on and "enable" when its offhow do I do that in react?? I have tried to make it but I have no idea where to even start, is there some syntax im missing?

158
Color changeable SVG?

Color changeable SVG?

I wish to build a website where icon colors can be easily changed with the only change of the cssI've been given a set of custom icons in form of svg files

131
Printing using JS and @media print CSS but content pushed down

Printing using JS and @media print CSS but content pushed down

My content in the print preview window is displaying down about 5 or 6 lines

154