javascript - Velocity.js/Blast.js 使用 fullpage.js 触发

Question

从此处发布的解决方案开始:Velocity.js/Blast.js starting opacity at 0

我正在使用 Velocity.js 和 Blast.js 在每个单词中创建一个简单的加载作为动画……基本设置之一。我也将它与 Cycle2 一起使用。我也在使用fullpage.js，所以有时文本幻灯片可能是第一张幻灯片，那么是否可以在向下滑动时做同样的事情？

1. 如果带有动画的文本幻灯片也是第一张幻灯片，则从 opacity:0 触发动画，就像导航上一页/下一页时一样。

我已经设置了一个 JSFiddle，添加了 fullpage.js，所以如果你向下滚动，我已经让第二部分以文本开头，但它没有动画或显示。如果有帮助，我还添加了 onLeave 和 afterLoad 回调供您使用？ jsfiddle.net/h3vo8LL1/4/

//
if ($('.home-section-container').length > 0) {
    $('.home-section-container').fullpage({
        sectionSelector: '.each-section',
        scrollingSpeed: 1000,
        resize: false,
        onLeave: function () {
            //
        },
        afterLoad: function () {
            //
        }
    });
}

//
function featuredProjectTextAnimation(incomingSlideEl) {
    var $animated = $(incomingSlideEl).find('.text-container.animated');
    $animated.blast({
        delimiter: 'word'
    })
        .velocity('transition.fadeIn', {
        display: null,
        duration: 0,
        stagger: 100,
        delay: 400,
        begin: function () {
            $animated.css('opacity', 1);
        },
        complete: function () {
            //
        }
    });
}

//
if ($('.home-slider-container').length > 0) {
    $('.home-slider-container .home-slider').each(function () {
        var $this = $(this);
        var slideCount = $this.find('.each-slide').length;
        if (slideCount <= 1) {
            $this.next('.home-slider-pager').remove();
            $this.prev('.home-slider-navigation').remove();
        }
        $this.cycle({
            fx: 'fade',
            slides: '> .each-slide',
            caption: $this.next('.home-slider-pager'),
            captionTemplate: '{{slideNum}}/{{slideCount}}',
            sync: true,
            timeout: 0,
            random: false,
            pagerActiveClass: 'active',
            next: $this.prev('.home-slider-navigation').find('.next'),
            prev: $this.prev('.home-slider-navigation').find('.prev'),
            loader: true,
            autoHeight: 'container',
            swipe: true
        });
        $this.on('cycle-before', function () {

        });
        $this.on('cycle-after', function (event, optionHash, outgoingSlideEl, incomingSlideEl) {
            featuredProjectTextAnimation(incomingSlideEl);
            $(outgoingSlideEl).find('.text-container.animated').css('opacity', 0);
        });
    });
}

Answer 1

看看the fullPage.js FAQs :

My other plugins don't work when using fullPage.js

Short answer: initialize them in the afterRender callback of fullPage.js.

Explanation: if you are using options such as verticalCentered:true or overflowScroll:true of fullPage.js, yourcontent will be wrapped inside other elements changing its position inthe DOM structure of the site. This way, your content would beconsider as "dynamically added content" and most plugins need thecontent to be originally on the site to perform their tasks. Using theafterRender callback to initialize your plugins, fullPage.js makessure to initialize them only when fullPage.js has stopped changing theDOM structure of the site.

在任何情况下，您都应该使用 fullPage.js 提供的回调来触发您的操作，例如 onLeave、afterLoad 或 afterSlideLoad。你这样做的方式似乎不是实现它的方式......

你应该做这样的事情:

$('#fullpage').fullpage({
    afterLoad: function (anchorLink, index) {
        var loadedSection = $(this);

        //after section 2 has loaded
        if (index == 2) {
            fireAnimation();
        }
    },
    afterSlideLoad: function (anchorLink, index, slideAnchor, slideIndex) {
        //second slide of the second section
        if (index == 2 && slideIndex == 2) {
            fireAnimation2();
        }
    }
});