Question

我无法在某些部分制作幻灯片，以便在Fullpage.js中进行转换动画制作。我想要的效果是当您移动到另一张幻灯片时，背景颜色会平滑变化，例如this 为了澄清我只想在转换时使用背景颜色进行动画处理，而不是像“渐变效果扩展”那样幻灯片中的所有内容都会在转换时生成动画。

我一直在弄onSlideLeave: function( anchorLink, index, slideIndex, direction) {}，但没有任何工作，因为我不是一名高级编码员。非常感谢帮助。

这是我到目前为止所得到的：

HTML：

<!DOCTYPE html>
<html>
    <head>
        <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.css'>
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" />
    </head>

    <body>
        <div id="fullpage">
            <div class="section" id="section1">
                <div class="slide" data-anchor="slide1"></div>
                <div class="slide" data-anchor="slide2"></div>
                <div class="slide" data-anchor="slide3"></div>
            </div>

            <div class="section" id="section2">
                <div class="slide" data-anchor="slide1"></div>
                <div class="slide" data-anchor="slide2"></div>
            </div>
        </div>

        <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
        <script src="script.js"></script>

    </body>
</html>

的CSS：

    .section, .slide {
    text-align: center; 
    top: 0; 
    left: 0; 
    visibility: visible; 
    overflow: hidden; 
    width: 100%; 
    height: 100%; 
    opacity: 1; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    background-repeat: no-repeat;
    transition: background 1s ease;
}

#section1 {
    background: #7A4EAB; 
}
#section2 {
    background: #4332CF; 
}

JS：

$(document).ready(function() {
    $('#fullpage').fullpage({
        anchors: ['firstPage', 'secondPage'], 
        navigation: false, 
        scrollBar: true, 
        keyboardScrolling: true, 
        easing: 'easeInOutCubic', 
    easingcss3: 'ease', 
        verticalCentered: false, 
        responsiveWidth: 800, 
        slidesNavigation: true, 
        slidesNavPosition: 'bottom', 
        controlArrows: false, 

        afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex) { 
            if(anchorLink == 'firstPage' && slideIndex == 1) { 
                $(this).css('background', '#2F8FED', '#4DCF42');
            }
            if(anchorLink == 'secondPage' && slideIndex == 1) { 
                $(this).css('background', '#FAEB33');
            }
        },

        onSlideLeave: function( anchorLink, index, slideIndex, direction) { 
            }
    });
});

在FullPage.js中幻灯片转换中的背景更改动画

0 个答案: