Different scroll speeds for elements in array-CodePudding

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

CodePudding user response：

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 >
    <h2>
    Section 1
    </h2>
  </section>
  
  <div id="starContain">
  
  </div>
  
  <section >
    <h2>
    Section 2
    </h2>
  </section>
</main>

CodePudding user response：

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 >
    <h2>
      Section 1
    </h2>
  </section>

  <div id="starContain">

  </div>

  <section >
    <h2>
      Section 2
    </h2>
  </section>
</main>