Velocity.js / Blast.js使用fullpage.js触发 [英] Velocity.js/Blast.js triggering using fullpage.js

问题描述

根据此处发布的解决方案： Velocity.js / Blast.js开始不透明度为0

Following on from a solution posted here: Velocity.js/Blast.js starting opacity at 0

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

I am using Velocity.js and Blast.js to create a simple load in each word as an animation... one of the basic setups. I am also using this alongside Cycle2. I am also using fullpage.js, so sometimes a text slide might be the first slide, so is it possible to do the same thing on sliding down?

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

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

I have set up a JSFiddle, adding the fullpage.js, so if you scroll down I've made the second section start with text but it doesn't animate or show. I've also added in onLeave and afterLoad callbacks for you to use if that helps? 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);
        });
    });
}

推荐答案

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

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

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

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

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

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

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

In any case, you should be using the callbacks provided by fullPage.js to fire your actions, such as onLeave, afterLoad or afterSlideLoad. The way you are doing it seems not to be the way to go for it...

你应该做这样的事情：

$('#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触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！