ScrollMagic是一款制作各种HTML元素滚动动画效果的js库插件-BFW插件库

ScrollMagic是一款制作各种HTML元素滚动动画效果的js库插件

ScrollMagic是一款制作各种HTML元素滚动动画效果的js库插件。

ScrollMagic优势

基于滚动位置执行动画-无论是触发一个动画或同步到滚动条的滚动。
可以在指定的滚动位置开始一个元素的动画-无论是无限或有限的循环次数。
基于滚动位置切换元素的CLASS样式。
可以轻松的添加网页视觉差效果。
可以创建无限滚动的瀑布流效果（通过AJAX调用添加新元素）。
可以在指定的滚动位置或滚动到指定的区域时执行回调函数。
ScrollMagic动画库可以和其它js框架集成，插件中建议与Greensock Animation Platform (GSAP)，GSAP的特点是性能稳定，功能丰富。也可以和轻量级的VelocityJS框架集成。

ScrollMagic特点

优化性能
轻量级（压缩后只有6KB）
灵活可扩展
兼容移动手机设备
强大的事件管理
支持响应式网页设计
面向对象的编程方式和链式编程方式
代码可读性强
支持两个方向的滚动（even different on one page）
支持在div容器中滚动（一个页面可以支持多个div）
完善的调试和日志记录功能

具体步骤：

第一步引入bfwone，加载依赖项jquery，TweenMax，ScrollMagic，debug.addIndicators

第二步执行插件

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ScrollMagic pin elements on top of page</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
        }
        h1 {
            padding: 20% 0 0 0;
            margin: 0;
            text-align: center;
            font-size: 20px;
        }
        p {
            text-align: center;
            color: transparentize(#FFFFFF, 0.5);
        }
        strong {
            color: #fff;
        }
        section {
            height: 100%;
            color: #FFFFFF;
            position: relative;
            text-align: center;
        }
        .inner {
            margin: 0 auto;
            max-width: 85%;
        }

        section#one {
            background-color: #AA44CC;
        }
        section#two {
            background-color: #33CCDD;
        }
        section#three {
            background-color: #CC66EE;
        }
        section#four {
            background-color: #DDEEFF;
        }

        .doc10 {
            width: 200px;
            margin: 50px;
        }

        .doc11 {
            width: 200px;
            margin: 50px;
        }
    </style>
</head>
<body>
    <section id="one">
        <div class=“inner”>
            <h1>ScrollMagic </h1>
            <p>
                elementen pinnen aan de top van de pagina
            </p>
        </div>
    </section>
    <section id="two">
        <div class=“inner”>
            <h1>Deel twee</h1>
            <p>
                Dit komt over deel één heen
            </p>
        </div>
    </section>
    <section id="three">
        <div class=“inner”>
            <h1>Deel drie</h1>
            <p>
                Dit is deel drie en hieroverheen komt deel vier
            </p>
            <img class="doc10" src="https://i1279.photobucket.com/albums/y533/Senna2604/KnT/10thdoctor_zpsy2a8gbu8.png">
        </div>
    </section>
    <section id="four">
        <div class=“inner”>
            <h1>Dit is deel vier</h1>
            <p>
                plaatje
            </p>
            <img class="doc11" src="https://i1279.photobucket.com/albums/y533/Senna2604/KnT/11thdoctor_zpsbmjtepcc.png">
        </div>
    </section>
    <script id="bfwone" data="dep=jquery.17|TweenMax.min|ScrollMagic.min|debug.addIndicators.min&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            var ctrl = new ScrollMagic.Controller({
                globalSceneOptions: {
                    triggerHook: 'onLeave'
                }
            });



            $("section").each(function () {

                // var name = $(this).attr('id');

                new ScrollMagic.Scene({
                    triggerElement: this
                }).

                setPin(this).
                addIndicators().
                loglevel(3).
                addTo(ctrl);

            });

            var wh = window.innerHeight;
        });
    </script>

</body>
</html>