创建一个步行循环动画Javascript / CSS

Question

我需要创建一个步行循环，在每个滚动上，图像应该更改为下一个。

我试着用：

<img src="" id="walk" />

var imageArr = ["img/walk1.png", "img/walk2.png", "img/walk3.png", "img/walk4.png"];

        function animate() {
            windowScrollCount = $(this).scrollTop();
            animationFrame = (windowScrollCount / 8);
            animationFrame = Math.floor(animationFrame % imageArr.length);
            $('#walk').attr("src", imageArr[animationFrame]);
        }

如果我滚动页面，则动画未完成。

我对步行周期的想法就是这样：http://www.rleonardi.com/interactive-resume/

我希望有人有个主意

Answer 1

您的代码看起来很好，采用这个非常简单的示例，而不是写出索引，执行设置src属性，就像在示例中一样。

$(window).scroll(function () {
  var fullheight = $(document).height();
  var progress = window.pageYOffset/fullheight;
  var subimagecount = 8;
  var subimage = Math.floor(progress * subimagecount)
  $('.counter').text(subimage);
});

https://codepen.io/anon/pen/axpQap

Answer 2

根据您的示例，您需要将animate函数添加到滚动处理程序，并在文档加载时初始化它：

const imageArr = ["img/walk1.png", "img/walk2.png", "img/walk3.png", "img/walk4.png"];

function animate() {
  windowScrollCount = $(this).scrollTop();
  animationFrame = (windowScrollCount / 8);
  animationFrame = Math.floor(animationFrame % imageArr.length);
  $('#walk').attr("src", imageArr[animationFrame]);
}

$('#container').on('scroll', animate);

$(function() {
  animate();
});

Fiddle有一个例子。

Answer 3

如果我滚动计数器，可以在1或2或3或4上停止。我的目标是在每个滚动中，函数从1开始并结束到4。

例：SCROLL - > [1,2,3,4,1]但现在是SCROLL - > [1,2]或[1,2,3]