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。

例如：滚动-> [1,2,3,4,1] 但现在滚动-> [1,2]或[1,2,3]

创建步行周期动画Javascript / CSS

3 个答案: