数组中元素的不同滚动速度

Question

我在一个数组中有不同样式的随机星星，我希望它们每个都有不同的滚动速度，介于 -.2 和 -.8 之间。我们的想法是让他们做一个视差效果，让一切都随机一点会很酷。

这是使用图像的原始滚动速度代码：

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

我一直在尝试以某种方式为数组集成上面的代码：

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

如果starScrollSpeed是全球性的，那么所有的星星都在移动一大块。如果它在 starScroll() 函数内，每个星的值至少不同，但它会变得疯狂，因为它不断随机化和相乘。

关于如何使每颗星星的滚动速度随机化，使其看起来像视差效果，而不让它们在一个块中移动或变得疯狂，有什么想法吗？还是做一堆 css 行然后随机分配类?

更安全？

jsfiddle

Answer 1

有点不清楚你到底在追求什么。

如果您尝试为每个星星设置随机滚动速度，而不是在每次 startScroll 触发时都更改它。您可以在循环内分别为每个启动设置速度，然后在 startScroll 函数中使用它：

...
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

您可以为随机创建的数字创建一个数组，并将 returns 随机创建的速度的函数的值推入循环中的该数组，然后使用该数组获取随机值每个元素。

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>

数组中元素的不同滚动速度

Different scroll speeds for elements in array

javascript

css

arrays

parallax