单页/全屏滚动插件onepage-scroll-BFW插件库

单页/全屏滚动插件onepage-scroll

单页/全屏滚动插件onepage-scroll，全屏显示单页面，鼠标滚动直接进入下一个全屏页面

第一步引入bfwone

第二步执行插件代码

示例如下

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>BFW DEMO JS PAGE</title>
    <script id="bfwone" data="dep=jquery.17" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script>
        bready(function() {
            use(["jquery.onepage-scroll.min", 'onepage-scroll'], function() {
                $('.main').onepage_scroll({

                    sectionContainer: '.page'

                });
            });
        });
    </script>


    <style>

        .page1 {
            background-color: #1bbc9b;
        }

        .page2 {
            background-color: #FF7F50;
        }

        .page3 {
            background-color: #4BBFC3;
        }

        .page4 {
            background-color: #f90;
        }

        p.title {
            position: relative;
            top: 35%;
            font: 700 40px "Microsoft Yahei";
            color: #fff;
            text-align: center;
        }

    </style>
</head>
<body>
    <div class="main">
        <div class="page page1">
            <p class="title">
                第一屏
            </p>
        </div>
        <div class="page page2">
            <p class="title">
                第二屏
            </p>
        </div>
        <div class="page page3">
            <p class="title">
                第三屏
            </p>
        </div>
        <div class="page page4">
            <p class="title">
                第四屏
            </p>
        </div>
    </div>
</body>
</html>

单页/全屏滚动插件onepage-scroll

网友评论0

html2canvas.js

onepage-scroll.js

jquery.ripples-min.js

jquery.parallax.js

jquery.fullPage.js

opencv.js

Particleground.js

particles.js