Question

我使用FullPage进行各部分之间的动画滚动。

我希望项目显示为aos.js但是当fullPage.js工作时，aos不起作用。

Answer 1

简答：对fullPage.js或autoScrolling使用scrollBar：true选项：如果您不想使用自动滚动功能，请使用false。或者......使用parallax：与Parallax扩展名一起使用。

说明： Parallax以及许多依赖于网站滚动的其他插件，会侦听javascript的scrollTop属性和scroll事件。 fullPage.js实际上并没有滚动网站，但它改变了网站的top或translate3d属性。仅当使用fullPage.js选项scrollBar：true或autoScrolling：false时，它才会以scrollTop属性可访问的方式实际滚动网站。

但我鼓励您使用fullPage.js callbacks来制作动画，或者fullPage.js state classes如果您想使用CSS进行动画制作。请参阅this video tutorial。

Answer 2

我提出了这个解决方案-也许它并不完美，但对我有用。另外，我使用了jQuery。

AOS.init();  // AOS initiation

$('.aos-init').removeClass('aos-animate'); // remove ALL classes which triggers animation in document

new fullpage('#fullpage', {   // standard fullpage usage
    responsive: true,
    navigation: true,
    anchors: ['start', 'quality', 'performance', 'dob', 'parameters','compatibility', 'options', 'contact'],

    afterLoad: function(){       
        var a_table = ['start', 'quality', 'performance', 'dob', 'parameters','compatibility', 'options', 'contact'];   // duplicated table of anchors name

        for (var i = 0; i < a_table.length; i++) {
            $('.section-'+ a_table[i] +'.active .aos-init').addClass('aos-animate'); // all magic goes here - when page is active, then all elements with AOS will start animate
        }
    }
}

aos.js没有使用fullPage.js

2 个答案: