每当用户使用 fullpage js 滚动到另一个部分时更改颜色和动画

Question

我正在我的网页上使用 fullPage js 插件。我在前两个部分添加了一个动画，当用户滚动到另一个部分时，颜色逐渐过渡到该部分的实际颜色，反之亦然。你可以在这里看到动画：https://rimildeyjsr.github.io/spotify-circle-animation/

动画只正常运行一次，第一次运行不正常。当我离开该部分时，我正在使用 onLeave 调用来触发脚本，并在更改到第 2 部分时第一次使用 onLoad 来触发动画。我需要每次都发生动画和颜色转换我离开网站的时间。

谁能帮帮我？提前致谢。

HTML

<div id="fullpage" style="-webkit-transform: translate3d(0px, 0px, 0px);">

        <div class="section" id="section1">
            <div class="button_container" id="toggle">
                <span class="top"></span>
                <span class="middle"></span>
                <span class="bottom"></span>
            </div>

            <div class="overlay" id="overlay">
                <nav class="overlay-menu">
                    <ul>
                        <li ><a href="#home">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#projects">Projects</a></li>
                        <li><a href="#blog">Blog</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </nav>
            </div>
            <div class="main-heading">
                <span id="main-heading"></span>
            </div>
            <span id="welcome-msg" class="come-in">Welcome to my website</span>
        </div>

        <div class="section" id="section2">
            <h1>I'm Prateek</h1>
            <h3>Independent Android Developer <br> & Design Consultant</h3>
            <p>I have been working on Android since the past<br> 3 years.
                I am a tech enthusiast and I like solving<br> problems which affect people’s lives, using<br>
                my skills. In my free time I blog about my,<br> learnings or design beautiful things.<br>
                Scroll along to check out my work. </p>
        </div>
</div>

CSS:

.colors {
    animation: color-animation 2s linear alternate;
}

@keyframes color-animation {
    0% {
        background: rgb(35,204,223);
    }
    10%{
        background: rgb(35,187,209);
    }
    20%{
        background: rgb(34,170,196);
    }
    30%{
        background: rgb(34,153,182);
    }
    40%{
        background: rgb(33,136,168);
    }
    50%{
        background: rgb(33,118,155);
    }
    60%{
        background: rgb(32,101,141);
    }
    70%{
        background: rgb(32,84,127);
    }
    80%{
        background: rgb(31,67,114);
    }
    100%{
        background: rgb(31,50,100);
    }

}

.colors-reverse {
    animation: colors-reverse-animation 2s linear alternate;
}

@keyframes colors-reverse-animation {
    0% {
        background: rgb(31,50,100);
    }
    10%{
        background: rgb(31,67,114);
    }
    20%{
        background: rgb(32,84,127);
    }
    30%{
        background: rgb(32,101,141);
    }
    40%{
        background: rgb(33,118,155);
    }
    50%{
        background: rgb(33,136,168);
    }
    60%{
        background: rgb(34,153,182);
    }
    70%{
        background: rgb(34,170,196);
    }
    80%{
        background: rgb(35,187,209);
    }
    100%{
        background: rgb(35,204,223);
    }
}

JQuery:

(document).ready(function(){
            $('#fullpage').fullpage({
                anchors: ['home','about','projects','blog','contact'],
                fixedElements: '#toggle,#overlay',
                afterLoad : function(anchorLink,index) {
                    if(index == 1 || anchorLink == 'home'){

                    }
                     else if(index == 2 || anchorLink == 'about'){
                        $('#section2').addClass('colors').one(animationEnd,function () {
                            $('#section2').css('background','#1f3264');
                        });
                        $('#section2 h1').addClass('come-in').one(animationEnd,function(){
                            $('#section2 h3').addClass('come-in').one(animationEnd,function(){
                                $('#section2 p').addClass('come-in');
                            });
                        });
                    }
                    else if (index == 5 || anchorLink == 'contact') {
                         $('.left').addClass('animateRightSlide');
                         $('.right-large').addClass('animateLeftSlide');
                    }
                },
                onLeave: function(index, nextIndex, direction) {
                    if (index == 1 && direction == 'down') {
                        $('#section2').addClass('colors').one(animationEnd,function () {
                            $('#section2').css('background','#1f3264');
                        });
                    }
                    else if (index == 2 && direction == 'up') {
                        $('#section1').addClass('colors-reverse').one(animationEnd,function () {
                            $('#section1').css('background','#24ccdf');
                        });
                    }
                }
            });
});

Answer 1

我在很长一段时间后发现了问题 - 我没有删除 class。于是在动画完成后加上removeClass()，问题就解决了

jQuery

var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

        $(document).ready(function(){
            $('#fullpage').fullpage({
                anchors: ['home','about','projects','blog','contact'],
                fixedElements: '#toggle,#overlay',
                afterLoad : function(anchorLink,index) {
                    if(index == 1 || anchorLink == 'home'){

                    }
                     else if(index == 2 || anchorLink == 'about'){
                        $('#section2').addClass('colors').one(animationEnd,function () {
                            $('#section2').removeClass('colors');
                            $('#section2').css('background','#1f3264');
                        });
                        $('#section2 h1').addClass('come-in').one(animationEnd,function(){
                            $('#section2 h3').addClass('come-in').one(animationEnd,function(){
                                $('#section2 p').addClass('come-in');
                            });
                        });
                    }
                    else if (index == 5 || anchorLink == 'contact') {
                         $('.left').addClass('animateRightSlide');
                         $('.right-large').addClass('animateLeftSlide');
                    }
                },
                onLeave: function(index, nextIndex, direction) {
                    if (index == 1 && direction == 'down') {
                        $('#section2').addClass('colors').one(animationEnd,function () {
                            $('#section2').removeClass('colors');
                            $('#section2').css('background','#1f3264');
                        });
                    }
                    else if (index == 2 && direction == 'up') {
                        $('#section1').addClass('colors-reverse').one(animationEnd,function () {
                            $('#section1').removeClass('colors-reverse');
                            $('#section1').css('background','#24ccdf');
                        });
                    }
                    else if (index == 3 && direction == 'up') {
                        $('#section2').addClass('colors').one(animationEnd,function () {
                            $('#section2').removeClass('colors');
                            $('#section2').css('background','#1f3264');
                        });
                    }
                }
            });
});

每当用户使用 fullpage js 滚动到另一个部分时更改颜色和动画

Change colors and animate whenever user scrolls to another section using fullpage js

html

css

jquery

fullpage.js