Question

我正在使用AOS库（css＆amp; js）它帮助我创建每次用户向下滚动页面时触发的动画。我有一个问题，我的页面的顶部元素只运行一次，因为AOS只在向下滚动时触发它。我希望我的所有动画运行evrytime用户向下和向上滚动。我该怎么做？这是我的问题的一个例子。

JSFiddle

看起来向上滚动请不要生效

var mesh7;
loader.load("test_obj/dae/07.DAE", function (result) {

    mesh7 = result.scene.children[0].children[0].clone();
    mesh7.scale.set(1, 1, 1);
    mesh7.position.set(0, 0, 0);
    mesh7.opacity: 0.5; //it doesn't work

    objects.push( mesh7 );
    console.log(mesh7);
});

在

<div class="alert kotak" data-aos="bounce">

标签

Answer 1

您需要添加“aos-item”的类名，这是一个动画，每次滚动时都会重新设置动画。

<div class="well hidden-sm hidden-xs aos-item" data-aos="zoom-out"  data-aos-anchor-placement="top-center">

Answer 2

我有同样的问题，我在容器上使用了属性：

 data-aos-mirror="true"

或将其作为设置传递给init对象。

AOS.init();

// You can also pass an optional settings object
// below listed default settings
AOS.init({
  // Global settings:
  debounceDelay: 50, // the delay on debounce used while resizing window (advanced)


  // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
  once: false, // whether animation should happen only once - while scrolling down
  mirror: true, // whether elements should animate out while scrolling past them

});

希望它对像我这样的新手有帮助。

如何使用AOS向上滚动触发动画

2 个答案: