ScrollMagic实现滚动颜色变换-html代码-BFW代码库

ScrollMagic实现滚动颜色变换

代码语言：html

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title> Color changing on scroll | GSAP + ScrollMagic</title>
 
    <style>
        body {
            font-family: sans-serif;
        }

        .o-section {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

    </style>

</head>
<body translate="no">
    <div class="o-section-wrapper js-init-color" data-init-color="#fffff">
        <section class="o-section js-change-color" data-change-color="#00ffff">
            <h1>#00ffff</h1>
        </section>
        <section class="o-section js-change-color" data-change-color="#ff00ff">
            <h1>#ff00ff</h1>
        </section>
        <section class="o-section js-change-color" data-change-color="#ffff00">
            <h1>#ffff00</h1>
        </section>

    <script src='http://repo.bfw.wiki/bfwrepo/js/jquery.17.js'></script>
    <script src='http://repo.bfw.wiki/bfwrepo/js/TweenMax.min.js'></script>
    <script src='http://repo.bfw.wiki/bfwrepo/js/ScrollMagic.min.js'></script>
    <script src='http://repo.bfw.wiki/bfwrepo/js/animation.gsap.js'></script>
    <script>
        class ChangeColor {
            /**
            *
            */
            constructor() {
                this.colorChangeControllers = {};
                this.colorChangeScenes = {};
                this.defaults = {
                    initialColorEl: ".js-init-color",
                    colorEl: ".js-change-color"
                };


                this.init();
            }

            // region Init

            init() {
                console.log("ChangeColor init()");
                this.setInitialColor();
                this.initChangeColor();

                this.changeColorT.........完整代码请登录后点击上方下载按钮下载查看