javascript - Js 无限字幕文本。适用于鼠标悬停，但不适用于文档加载

Question

我有一个奇怪的问题。我挖出了这个代码片段，它允许文本行向左动画，然后无限重复。虽然这很有效。我希望所有行都在 body 负载上进行动画，但速度要慢得多。然后，当您将鼠标悬停在每一行上时，动画速度会加快。

<强> https://codepen.io/umbriel/pen/RjYqRR

到目前为止，我已经尝试过循环每个问题然后运行动画之类的方法。但它仍然只抓取了一个 div 并为其设置了动画。

var el_text = questions[i].querySelectorAll('.intro-question-text');

for (var i = 0; i < el_text.length; i++) {
  el_text[i].style.transform = 'translate3d(' + qScrollPositions[i] + 'px,0,0)'
}

有什么指点吗？非常感谢!

Answer 1

您可以使用 setInterval 函数让它执行您想要的操作(当用户将鼠标悬停在元素上时将其交换为更快的函数)。

var textCopy = document.querySelectorAll('.intro-question-text')
for (var i = 0; i < textCopy.length; i++) {
  var text = textCopy[i].innerHTML.repeat(5)
  textCopy[i].insertAdjacentHTML('beforeend', text)
}

var WIN_H,
    WIN_W,
    qFrame = [];

var questions = document.querySelectorAll('.intro-question');
var scrollRequest;
var qScrollPositions = [];
var passiveRepeaters = [];
var repeater;

function initIntroScript() {
  Array.prototype.map.call(questions, function(q, i) {
    addImageHover(i);
  })
  window.addEventListener('resize', resizeHandler);
  resizeHandler();
}

function addImageHover(i) {
  qFrame[i] = 0;
  qScrollPositions[i] = Math.floor(Math.random() * -200);
  questions[i].querySelector('.intro-question-text').style.transform = 'translate3d(' + qScrollPositions[i] + 'px,0,0)';
  questions[i].addEventListener('mouseenter', function() {
    //console.log("mouseenter -> " + i);
    clearInterval(passiveRepeaters[i]);
    repeater = setInterval(function() {
      scrollQuestionText(i);
    }, 10);
  });
  
  questions[i].addEventListener('mouseleave', function() {
    //console.log("mouseleave -> " + i);
    clearInterval(repeater);
    passiveRepeaters[i] = setInterval(function() {
      scrollQuestionText(i);
    }, 20);
  });
  
  passiveRepeaters[i] = setInterval(function() {
  	scrollQuestionText(i);
  }, 20);
}

function scrollQuestionText(i) {
  var shift = Math.floor(4 + WIN_W/800) * Math.min(0.2, qFrame[i] / 20);
  cancelAnimationFrame(scrollRequest);
  var el_text = questions[i].querySelector('.intro-question-text');
  qScrollPositions[i] = qScrollPositions[i] - shift;
  if (qScrollPositions[i] < -el_text.clientWidth / 2 - 5) {
    qScrollPositions[i] = 0;
  }
  el_text.style.transform = 'translate3d(' + qScrollPositions[i] + 'px,0,0)'
  qFrame[i]++;
}

initIntroScript();

function resizeHandler() { // NEEDS TO NOT BREAK ON RESIZE
  WIN_W = window.innerWidth;
  WIN_H = window.innerHeight;
}

body {
  font-family: sans-serif;
  font-size:4rem;
}
.intro-question {
    position: relative;
    color: #000000;
    cursor: pointer;
    transition: .3s;
    white-space: nowrap;
    padding: 0;
    backface-visibility: hidden;
    will-change: transform, color, background;
    flex-shrink: 2;
    /* opacity: 0; */
    transition: opacity .5s, transform 1s ease-out;
    z-index: 2;
}
.intro-question-text {
    backface-visibility: hidden;
    will-change: transform;
    position: relative;
    display: inline-block;
    transition: .5s opacity;
}

<div class="intro-questions">
  <div class="intro-question">
    <div class="intro-question-text white">
      Testing content in here
    </div>
  </div>
  <div class="intro-question">
    <div class="intro-question-text white">
      Content testing
    </div>
  </div>
  <div class="intro-question">
    <div class="intro-question-text white">
      Content stackoverflow please
    </div>
  </div>      
</div>

编辑

例如，您可以通过减少函数调用之间的间隔来提高帧速率

  questions[i].addEventListener('mouseenter', function() {
    //console.log("mouseenter -> " + i);
    clearInterval(passiveRepeaters[i]);
    repeater = setInterval(function() {
      scrollQuestionText(i);
    }, 10);
  });

  questions[i].addEventListener('mouseleave', function() {
    //console.log("mouseleave -> " + i);
    clearInterval(repeater);
    passiveRepeaters[i] = setInterval(function() {
      scrollQuestionText(i);
    }, 20);
  });

  passiveRepeaters[i] = setInterval(function() {
    scrollQuestionText(i);
  }, 20);

如果您这样做并且不希望滚动速度加快，您可以像这样减小步长

var shift = Math.floor(4 + WIN_W/800) * Math.min(0.2, qFrame[i] / 10);