Question

如何利用与GSAP插件集成的fullPage.js来实现这种website？尝试了几次，我对jQuery代码不是很清楚。

序列将是：

- 页面加载时的动画启动

- 向下滚动时，动画反向将首先触发直至完成，然后跳转到下一部分。

- 第二节页面加载的动画开始

- 向上滚动第二部分时，动画反向将首先触发直至完成，然后跳转到上一部分。

- 向下滚动第二部分时，动画反向将首先触发直到完成，然后跳转到下一部分。

感谢您对此事的善意建议。

不开心的reproduction demo。

var head = $("#one h1"),
    head2 = $("#two h1");

tl = new TimelineLite();

$("#reverse").click(function(){tl.reverse();});

$("#restart").click(function(){tl.restart();});

$('#fullpage').fullpage({
    sectionsColor: ['darkgrey', 'grey', 'lightgrey'],
    scrollingSpeed: 1000,
    afterLoad: function(anchorLink, index) {

    var loadedSection = $(this);

    if (index == 1) {
        $(head2).hide();
        tl.staggerFrom(head, 0.2, {scale: 0,autoAlpha: 0}, 0.5)
    }

    if (index == 2) {
        tl.staggerFrom(head2, 0.2, {scale: 0,autoAlpha: 0}, 0.5)
    }

    },
    onLeave: function(index, nextIndex, direction) {

    var leavingSection = $(this);

    if (index == 1 && direction == 'down') {
      //tl.reverse(head, 0.2, {scale: 0,autoAlpha: 0}, 0.5);
      $(head2).show();
    } else if (index == 2 && direction == 'up') {
      $(head2).hide();
      //tl.restart(head, 0.2, {scale: 0,autoAlpha: 0}, 0.5);
    }

  }
});

Answer 1

如果您的问题是滚动动画元素，我建议您使用绝对或固定元素的空白部分，您可以使用fullPage.js回调（例如afterLoad）来显示或隐藏它们。 / p>

Demo online

$('#fullpage').fullpage({
    sectionsColor: ['yellow', 'yellow', 'yellow', 'yellow'],
    scrollOverflow:true,

    //events
    afterLoad: function(anchorLink, index){
        $('.element').removeClass('active');
        $('.element' + index).removeClass('hidden').addClass('active');
    },
    onLeave: function(index, nextIndex, direction){
        $('.element').addClass('hidden');
        setTimeout(function(){
            $('.element').addClass('hidden');
        },700);

    },

});

fullPage.js + GSAP Tweenmax动画

1 个答案: