choreographer.js 利用css复杂动画的js插件-BFW插件库

choreographer.js 利用css复杂动画的js插件
第一步引入bfwone
第二步执行插件
示例如下
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Inconsolata|Playfair+Display|Rubik">


    <title>Choreographer-js</title>
    <meta name="description" content="A simple library to take care of complex CSS animations." />
    <script id="bfwone"  type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        var choreographer;
        var fin;
        var wrapperNode;
        var scrollDownNode;
        var linkNodes;

        var vh;
        bready(function() {
            use(["choreographer.min"], function() {
                wrapperNode = document.getElementById('wrapper');
                scrollDownNode = document.querySelector('.scroll-down');
                linkNodes = document.querySelector('.links');

                vh = window.innerHeight;

                /* STORE SOME KEY LOCATIONS */

                /* ~ le fin ~
 * The point where you cannot scroll down any further.
 */
                fin = wrapperNode.clientHeight - vh + linkNodes.clientHeight

                // Instantiate choreographer.
                choreographer = new Choreographer({
                    animations: calculateAnimations(),
                    customFunctions: {
                        randomizeColor: function(data) {
                            var chars = '0123456789abcdef'.split('')
                            var hex = '#'

                            while (hex.length < 7) {
                                hex += chars[Math.round(Math.random() * (chars.length - 1))]
                            }

                            data.node.style.color = hex
                        }
                    }
                })

                document.body.addEventListener('scroll', animate)

                animate()

                window.addEventListener('resize', function() {
                    choreographer.updateAnimations(calculateAnimations())
                })

            });
        });

        function calculateAnimations() {
            return [
                /* animate Cs */
                {
                    range: [-1, fin * 0.5], selector: '.c', type: 'scale', style: 'transform:translateY', from: 0, to: 25, unit: 'px'
                },
                {
                    range: [fin * 0.5, fin], selector: '.c', type: 'scale', style: 'transform:translateY', from: 25, to: 0, unit: 'px'
                },
                {
                    range: [fin * 0.4, fin], selector: '.c', type: 'change', style: 'color', to: '#ffb515'
                },

                /* animate Hs */
                {
                    range: [-1, fin * 0.5], selector: '.h', type: 'scale', style: 'transform:scaleX', from: 1, to: 0.5
                },
                {
                    range: [-1, fin * 0.5], selector: '.h', type: 'scale', style: 'transform:scaleY', from: 1, to: 0.5
                },
                {
                    range: [fin * 0.5, fin], selector: '.h', type: 'scale', style: 'transform:scaleX', from: 0.5, to: 1
                },
                {
                    range: [fin * 0.5, fin], selector: '.h', type: 'scale', style: 'transform:scaleY', from: 0.5, to: 1
                },
                {
                    range: [fin * 0.3, fin], selector: '.h', type: 'change', style: 'color', to: '#1fd1ec'
                },

                /* animate Os */
                {
                    range: [fin * 0.1, fin], selector: '.o', type: 'randomizeColor'
                },

                /* animate Rs */
                {
                    range: [-1, fin * 0.5], selector: '.r', type: 'scale', style: 'transform:rotateX', from: 0, to: 90, unit: 'deg'
                },
                {
                    range: [fin * 0.5, fin], selector: '.r', type: 'scale', style: 'transform:rotateX', from: 90, to: 0, unit: 'deg'
                },
                {
                    range: [fin * 0.3, fin], selector: '.r', type: 'change', style: 'color', to: '#8382f9'
                },

                /* animate Es */
                {
                    range: [fin * 0.3, fin], selector: '.e', type: 'change', style: 'color', to: '#ff1b9b'
                },

                /* animate Gs */
                {
                    range: [-1, fin * 0.5], selectors: ['.g', '.j'], type: 'scale', style: 'transform:rotateZ', from: 0, to: 180, unit: 'deg'
                },
                {
                    range: [fin * 0.5, fin], selectors: ['.g', '.j'], type: 'scale', style: 'transform:rotateZ', from: 180, to: 360, unit: 'deg'
                },
                {
                    range: [fin * 0.4, fin], selectors: ['.g', '.j'], type: 'change', style: 'color', to: '#ff8b1c'
                },

                /* animate As */
                {
                    range: [-1, fin * 0.5], selectors: ['.a', '.s'], type: 'scale', style: 'transform:rotateZ', from: 0, to: -180, unit: 'deg'
                },
                {
                    range: [fin * 0.5, fin], selectors: ['.a', '.s'], type: 'scale', style: 'transform:rotateZ', from: -180, to: -360, unit: 'deg'
                },
                {
                    range: [fin * 0.4, fin], selectors: ['.a', '.s'], type: 'change', style: 'color', to: '#c05bdb'
                },

                /* animate Ps */
                {
                    range: [-1, fin * 0.5], selectors: ['.p', '.dash'], type: 'scale', style: 'opacity', from: 1, to: 0.1
                },
                {
                    range: [fin * 0.5, fin], selectors: ['.p', '.dash'], type: 'scale', style: 'opacity', from: 0.1, to: 1
                },
                {
                    range: [fin * 0.4, fin], selectors: ['.p', '.dash'], type: 'change', style: 'color', to: '#ff537c'
                },

                /* animate line */
                {
                    range: [-1, fin], selector: '.line', type: 'scale', style: 'width', from: 0.01, to: 50, unit: '%'
                },
                {
                    range: [-1, fin], selector: '.line', type: 'scale', style: 'opacity', from: 0, to: 1
                },

                /* animate arrow */
                {
                    range: [0.6 * fin, fin], selector: '.scroll-down', type: 'scale', style: 'opacity', from: 1, to: 0
                },
                {
                    range: [fin - 30, fin], selector: '.scroll-down', type: 'change', style: 'display', to: 'none'
                },

                /* animate links */
                {
                    range: [0.8 * fin, fin], selector: '.links', type: 'scale', style: 'opacity', from: 0, to: 1
                }]
        }



        function animate() {
            var scrollPosition = (wrapperNode.getBoundingClientRect().top - wrapperNode.offsetTop) * -1
            choreographer.runAnimationsAt(scrollPosition)
        }
    </script>
    <style>
        html {
            height: 100%;
            overflow: hidden;
            margin: 0 0;
        }

        body {
            height: 100%;
            overflow: auto;
            margin: 0 0;
            font-family: 'Rubik', sans-serif;
            background-color: #f5f5f5;
        }

        ::-webkit-scrollbar {
            display: none;
        }

        p {
            font-size: 13px;
            letter-spacing: 0.05em;
        }

        a {
            text-decoration: none;
        }

        #wrapper {
            height: 400vh;
            display: flex;
            justify-content: center;
        }

        .scroll-overlay {
            width: 100%;
            height: 100%;
            z-index: 99;
            position: relative;
        }

        #letters {
            position: fixed;
            text-align: center;
            top: 280px;
            width: 100%;
        }

        #letters div {
            display: inline-block;
            font-size: 50px;
            font-weight: 900;
            text-transform: uppercase;
            font-family: 'Rubik', sans-serif;
            transition: color 0.1s ease-in-out;
        }

        #letters .o {
            transition: none;
        }

        #letters .line {
            border-bottom-width: 8px;
            border-bottom-style: solid;
            border-color: #ff7474;
            width: 0.01%;

            opacity: 0;
        }

        .links {
            height: calc(100vh - 420px);
            text-align: center;
        }

        .links .quickstart {
            font-family: 'Inconsolata', monospace;
            background-color: #080808;
            color: white;
            padding: 20px;
            display: inline-block;
            margin: 0 auto;
            border-radius: 5px;
        }

        .links button {
            display: block;
            margin: 10px auto;
            padding: 10px;
            font-size: 10px;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            text-decoration: none;
            background-color: #aaa;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .links button:hover {
            background-color: #95cc21;
        }

        .scroll-down {
            width: 100%;
            position: fixed;
            top: 420px;
            text-align: center;
        }

        .scroll-down p {
            font-size: 9px;
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }

        .down-arrow {
            width: 30px;
            height: 30px;

            display: inline-block;
            margin-top: -15px;
            opacity: 0.3;

            transform: rotateZ(45deg);
            border-bottom: 1px solid black;
            border-right: 1px solid black;
        }


@media (max-width:660px) {
            #letters div {
                font-size: 38px;
            }
        }

@media (max-width:500px) {
            #letters {
                top: 180px;
            }

            #letters div {
                font-size: 20px;
            }
            #letters .line {
                display: none;
            }
            #letters .description {
                padding: 20px;
            }

            .links {
                height: calc(100vh - 300px);
            }

            .links .quickstart {
                padding: 10px;
                font-size: 12px;
            }

            .scroll-down {
                top: 300px;
            }
        }
    </style>

</head>
<body>

    <div id="wrapper">
        <div id="letters">
            <div class="c">
                c
            </div>
            <div class="h">
                h
            </div>
            <div class="o">
                o
            </div>
            <div class="r">
                r
            </div>
            <div class="e">
                e
            </div>
            <div class="o">
                o
            </div>
            <div class="g">
                g
            </div>
            <div class="r">
                r
            </div>
            <div class="a">
                a
            </div>
            <div class="p">
                p
            </div>
            <div class="h">
                h
            </div>
            <div class="e">
                e
            </div>
            <div class="r">
                r
            </div>
            <div class="dash">
                -
            </div>
            <div class="j">
                j
            </div>
            <div class="s">
                s
            </div>

            <br />
            <div class="line"></div>

            <p class="description">
                A simple library to take care of complex CSS animations.
            </p>
        </div>
        <div class="scroll-overlay"></div>
    </div>

    <div class="links">
        <div class="quickstart">
            $ npm install --save choreographer-js
        </div>
        <a href="https://github.com/christinecha/choreographer-js">
            <button class="reference">documentation</button>
        </a>
    </div>

    <div class="scroll-down">
        <p>
            scroll down
        </p>
        <div class="down-arrow"></div>
    </div>

</body>
</html>
官网 https://christinecha.github.io/choreographer-js/