Question

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

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

如果包含动画的文本幻灯片也是第一张幻灯片，则从不透明度触发动画：0就像导航prev / next时一样。

我已经设置了一个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：

使用fullPage.js时我的其他插件无法正常工作

简答：在fullPage.js的afterRender回调中初始化它们。

说明：如果您使用的选项如verticalCentered：true或overflowScroll：true of fullPage.js，则   内容将被包含在其他元素中，从而改变其位置   网站的DOM结构。这样，你的内容就是   考虑为＆＃34;动态添加内容＆＃34;而且大多数插件都需要   最初在网站上执行任务的内容。使用   afterRender回调初始化你的插件，fullPage.js使   确保仅在fullPage.js停止更改时才初始化它们   网站的DOM结构。

在任何情况下，您都应该使用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();
        }
    }
});

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

1 个答案: