2

继此处发布的解决方案之后：Velocity.js/Blast.js 从 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);
        });
    });
}
4

1 回答 1

2

查看fullPage.js 常见问题解答：

使用 fullPage.js 时，我的其他插件不起作用

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

说明：如果您使用 fullPage.js 的 verticalCentered:true 或 overflowScroll:true 等选项，您的内容将被包裹在其他元素中，从而改变其在站点 DOM 结构中的位置。这样，您的内容将被视为“动态添加的内容”，并且大多数插件需要内容最初位于网站上才能执行其任务。使用 afterRender 回调来初始化您的插件，fullPage.js 确保仅在 fullPage.js 停止更改站点的 DOM 结构时才初始化它们。

onLeave在任何情况下，您都应该使用 fullPage.js 提供的回调来触发您的操作，例如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();
        }
    }
});
于 2015-02-23T23:48:15.253 回答