fullpage.js 添加滑块淡入效果

问题描述

我从未使用过 fullpage.js.我尝试了很多滑块过渡效果.滚动效果很好.它通过滚动从左到右移动，但不能添加淡入淡出效果.

I never worked with fullpage.js. I tried a lot with the slider transition effect. scrolling is fine with slider effect. its move to left to right with scrolling but can't add the fadeIn and fadeOut effect.

示例网站:http://www.mi.com/shouhuan/#clock我的代码:http://jewel-mahmud.com/demo-site/index.html

var slideIndex  = 1,
    sliding     = false;

$(document).ready(function() {

    $('#fullpage').fullpage({

        sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
        scrollingSpeed:1000,
        css3: true,

        onLeave: function(index, nextIndex, direction) {

            if(index == 2 && !sliding) {

                if(direction == 'down' && slideIndex < 3) {

                    sliding = true;
                    $.fn.fullpage.moveSlideRight();
                    slideIndex++;
                    return false;

                } else if(direction == 'up' && slideIndex > 1) {
                    sliding = true;
                    $.fn.fullpage.moveSlideLeft();
                    slideIndex--;
                    return false;
                }

            } else if(sliding) {

                return false;

            }

        },

        afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) {

            sliding = false;

        }

    });
});

推荐答案

这些页面讨论添加淡入淡出效果:

These pages talk about adding the fade effect:

• 对整页使用淡入效果.js幻灯片
• 如何在使用 fullPage.js 和 CSS 和 jQuery 的网站上淡入页面滚动内容

看来主要是使用fullpage.js的滑动事件来触发jQuery动画.

It appears to be mainly a matter using the fullpage.js slide events to trigger jQuery animations.

这个 jsfiddle 似乎可以满足您的需求(使用部分).

This jsfiddle seems to do what you want (using sections).

看起来有两种方法可以做这种事情，这取决于你想要制作什么动画.fullpage.js 内置了两种视图，.section 和 .slide，幻灯片是 section 的子项，它们有不同的回调.这些示例使用幻灯片，但您使用的是部分，所以我认为这就是混淆的地方.转换为淡入淡出效果需要挂钩到正确的回调并应用正确的动画(这在部分和幻灯片之间是不同的).

It looks like there's two ways to do this kind of thing and it depends on what you're trying to animate. fullpage.js has two kinds of views built into it, .section and .slide, with slides being children of sections, and they have different callbacks. The examples use slides but you're using sections so I think that's where the confusion is coming in. Converting to a fade effect requires hooking into the right callbacks and applying the correct animations (which are different between sections and slides).

这篇关于fullpage.js 添加滑块淡入效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！