jquery.tiltedpage-scroll.js jquery 3d翻转滚动进入插件-BFW插件库

jquery.tiltedpage-scroll.js jquery 3d翻转滚动进入插件
第一步引入bfwone 加载依赖项jquery
第二步执行代码
示例如下
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["jquery.tiltedpage-scroll", "tiltedpage-scroll"], function() {
                $(".main").tiltedpage_scroll({
                    angle: 20
                });
            });
        });
    </script>

    <style>
        html {
            height: 100%;
        }
        body {
            background: #F1f1f2;
            padding: 0;
            text-align: center;
            font-family: 'open sans';
            position: relative;
            margin: 0;
            height: 100%;
        }

        .wrapper {
            height: auto !important;
            height: 100%;
            margin: 0 auto;
            overflow: hidden;
        }

        a {
            text-decoration: none;
        }



        h1, h2 {
            width: 100%;
            float: left;
        }
        h1 {
            margin-top: 100px;
            color: #999;
            margin-bottom: 5px;
            font-size: 70px;
            font-weight: 100;
        }
        h2 {
            padding: 00px 20px 30px 20px;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            letter-spacing: 0px;
            color: #888;
            font-size: 20px;
            line-height: 160%;
            font-weight: 100;
            margin-top: 10px;
            margin-bottom: 0;
        }


        .pointer {
            color: #00B0FF;
            font-family: 'Pacifico';
            font-size: 24px;
            margin-top: 15px;
            position: absolute;
            top: 130px;
            right: -40px;
        }
        .pointer2 {
            color: #00B0FF;
            font-family: 'Pacifico';
            font-size: 24px;
            margin-top: 15px;
            position: absolute;
            top: 130px;
            left: -40px;
        }
        pre {
            margin: 80px auto;
        }
        pre code {
            padding: 35px;
            border-radius: 5px;
            font-size: 15px;
            background: rgba(0,0,0,0.1);
            border: rgba(0,0,0,0.05) 5px solid;
            max-width: 500px;
        }


        .main {
            float: left;
            width: 100%;
            margin: 0 auto;
        }


        .main h1 {
            padding: 20px 50px 10px;
            float: left;
            width: 100%;
            font-size: 60px;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            font-weight: 100;
            margin: 0;
            padding-top: 55px;
            font-family: 'Open Sans';
            letter-spacing: -1px;
            text-transform: capitalize;
        }

        .main h1.demo1 {
            background: #1ABC9C;
        }

        .reload.bell {
            font-size: 12px;
            padding: 20px;
            width: 45px;
            text-align: center;
            height: 47px;
            border-radius: 50px;
            -webkit-border-radius: 50px;
            -moz-border-radius: 50px;
        }

        .reload.bell #notification {
            font-size: 25px;
            line-height: 140%;
        }

        .reload, .btn {
            display: inline-block;
            border-radius: 3px;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            display: inline-block;
            line-height: 100%;
            padding: 0.7em;
            text-decoration: none;
            width: 100px;
            line-height: 140%;
            font-size: 17px;
            font-family: Open Sans;
            font-weight: bold;
            -webkit-box-shadow: none;
            box-shadow: none;
            background-color: #4D90FE;
            background-image: -webkit-linear-gradient(top,#4D90FE,#4787ED);
            background-image: -webkit-moz-gradient(top,#4D90FE,#4787ED);
            background-image: linear-gradient(top,#4d90fe,#4787ed);
            border: 1px solid #3079ED;
            color: #FFF;
        }
        .reload:hover {
            background: #317af2;
        }
        .btn {
            width: 200px;
            -webkit-box-shadow: none;
            box-shadow: none;
            background-color: #4D90FE;
            background-image: -webkit-linear-gradient(top,#4D90FE,#4787ED);
            background-image: -moz-linear-gradient(top,#4D90FE,#4787ED);
            background-image: linear-gradient(top,#4d90fe,#4787ed);
            border: 1px solid #3079ED;
            color: #FFF;
        }
        .clear {
            width: auto;
        }
        .btn:hover, .btn:hover {
            background: #317af2;
        }
        .btns {
            float: left;
            width: 100%;
            margin: 50px auto;
        }
        .credit {
            text-align: center;
            color: #888;
            padding: 10px 10px;
            margin: 0 0 0 0;
            background: #f5f5f5;
            float: left;
            width: 100%;
        }
        .credit a {
            text-decoration: none;
            font-weight: bold;
            color: black;
        }

        .back {
            position: absolute;
            top: 0;
            left: 0;
            text-align: center;
            display: block;
            padding: 7px;
            width: 100%;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            background: #f5f5f5;
            font-weight: bold;
            font-size: 13px;
            color: #888;
            -webkit-transition: all 200ms ease-out;
            -moz-transition: all 200ms ease-out;
            -o-transition: all 200ms ease-out;
            transition: all 200ms ease-out;
        }
        .back:hover {
            background: #eee;
        }


        .page-container {
            float: left;
            width: 100%;
            margin: 0 auto 300px;
            position: relative;
        }
        .panorama {
            width: 100%;
            float: left;
            margin-top: -5px;
            height: 700px;
        }

        .panorama .credit {
            background: rgba(0,0,0,0.2);
            color: white;
            font-size: 12px;
            text-align: center;
            position: absolute;
            bottom: 0;
            right: 0;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            float: right;
        }

        .main {
            margin-bottom: 350px;
            overflow: hidden;
        }
        .tps-section {
            width: 100% !important;
            max-width: 1000px;
            margin: 0 auto;
            height: 500px;
        }

        .tps-section .tps-wrapper {
            border-radius: 5px;
        }
        .tps-section .tps-wrapper h1 {
            position: relative;
            height: 100%;
            position: absolute;
        }
        .tps-section .tps-wrapper h1 a {
            color: white;
            position: absolute;
            background: rgba(0,0,0,0.25);
            width: 100%;
            height: 100%;
            top: 0;
            padding-top: 225px;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            left: 0;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 4px;
            font-size: 20px;
            font-size: 14px;
            line-height: 190%;
        }

        .tps-section .tps-wrapper h1 a small {
            text-transform: none;
            font-style: italic;
            font-weight: 400;
            font-family: notoserif;
            letter-spacing: 1px;
            font-size: 14px;
        }

        .tps-section:nth-child(1n+1) .tps-wrapper {
            background: url(tiltedpage_scroll/demo1.jpg) center center;
            background-size: cover;
        }

        .tps-section:nth-child(2n+1) .tps-wrapper {
            background: url(tiltedpage_scroll/demo2.jpg) center center;
            background-size: cover;
        }

        .tps-section:nth-child(3n+1) .tps-wrapper {
            background: url(tiltedpage_scroll/demo3.jpg) center center;
            background-size: cover;
        }

        .tps-section:nth-child(4n+1) .tps-wrapper {
            background: url(tiltedpage_scroll/demo4.jpg) center center;
            background-size: cover;
        }

        .header {
            overflow: hidden;
            clear: both;
        }
        #carbonads {
            --width: 180px;
            --font-size: 14px;
        }

        #carbonads {
            font-family: -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
            display: block;
            overflow: hidden;
            margin-bottom: 20px;
            max-width: var(--width);
            border-radius: 4px;
            text-align: center;
            box-shadow: 0 0 0 1px hsla(0, 0%, 0%, .1);
            background-color: hsl(0, 0%, 98%);
            font-size: var(--font-size);
            line-height: 1.5;
        }

        #carbonads a {
            color: inherit;
            text-decoration: none;
        }

        #carbonads a:hover {
            color: inherit;
        }

        #carbonads span {
            position: relative;
            display: block;
            overflow: hidden;
        }

        .carbon-img {
            display: block;
            margin-bottom: 8px;
            max-width: var(--width);
            line-height: 1;
        }

        .carbon-img img {
            display: block;
            margin: 0 auto;
            max-width: var(--width) !important;
            width: var(--width);
            height: auto;
        }

        .carbon-text {
            display: block;
            padding: 0 1em 8px;
        }

        .carbon-poweredby {
            display: block;
            padding: 10px var(--font-size);
            background: repeating-linear-gradient(-45deg, transparent, transparent 5px, hsla(0, 0%, 0%, .025) 5px, hsla(0, 0%, 0%, .025) 10px) hsla(203, 11%, 95%, .4);
            text-transform: uppercase;
            letter-spacing: .5px;
            font-weight: 600;
            font-size: 9px;
            line-height: 0;
        }

@media only screen and (min-width: 320px) and (max-width: 759px) {
            #carbonads {
                float: none;
                margin: 0 auto;
                max-width: 330px;
            }
            #carbonads span {
                position: relative;
            }
            #carbonads > span {
                max-width: none;
            }
            .carbon-img {
                float: left;
                margin: 0;
            }

            .carbon-img img {
                max-width: 130px !important;
            }
            .carbon-text {
                float: left;
                margin-bottom: 0;
                padding: 8px 20px;
                text-align: left;
                max-width: calc(100% - 130px - 3em);
            }
            .carbon-poweredby {
                left: 130px;
                bottom: 0;
                display: block;
                width: 100%;
            }}
    </style>


</head>
<body>

    <div class="wrapper">
 
        <div class="main">
            <div class="header">
                <h1>jQuery Tilted Page Scroll</h1>
                <h2>Create a 3D Tilted Scroll Effect with jQuery Tilted Page Scroll Plugin</h2>
                <p class="credit">
                    Created by <a href="http://www.thepetedesign.com">Pete R.</a>, Founder of <a href="http://www.travelistly.com" target="_blank">Travelistly</a> and <a href="http://www.bucketlistly.com" target="_blank">BucketListly</a>
                </p>
                <div class="btns">
                    <a class="reload btn" href="https://github.com/peachananr/tiltedpage_scroll">Download on Github</a>
                </div>
            </div>
            <section class="page1">
                <div class="page_container">
                    <h1><a href="http://www.bucketlistly.com/achievements/visit-sydney-australia-95861" target="_blank">Travel to Sydney, Australia<br><small>Completed on 14 Feb 2014</small></a></h1>
                </div>
            </section>
            <section class="page2">
                <div class="page_container">
                    <h1><a href="http://www.bucketlistly.com/achievements/visit-uluru-ayers-rock-96722" target="_blank">Visit Uluru (Ayers Rock), Australia<br><small>Completed on 17 Feb 2014</small></a></h1>
                </div>
            </section>
            <section class="page3">
                <div class="page_container">
                    <h1><a href="http://www.bucketlistly.com/achievements/travel-to-zhangjiajie-avatar-s-mountains-china-85798" target="_blank">Travel to ZhangJiaJie (Avatar's Mountain) in China<br><small>Completed on 20 Jan 2014</small></a></h1>
                </div>
            </section>
            <section class="page4">
                <div class="page_container">
                    <h1><a href="http://www.bucketlistly.com/achievements/ride-a-camel-93541" target="_blank">Ride a Camel in the Australian Outback<br><small>Completed on 17 Feb 2014</small></a></h1>
                </div>
            </section>
            <section class="page5">
                <div class="page_container">
                    <h1><a href="http://www.bucketlistly.com/achievements/visit-sydney-australia-95861" target="_blank">Travel to Sydney, Australia<br><small>Completed on 14 Feb 2014</small></a></h1>
                </div>
            </section>
            <section class="page6">
                <div class="page_container">
                    <h1><a href="http://www.bucketlistly.com/achievements/visit-uluru-ayers-rock-96722" target="_blank">Visit Uluru (Ayers Rock), Australia<br><small>Completed on 17 Feb 2014</small></a></h1>
                </div>
            </section>
            <section class="page7">
                <div class="page_container">
                    <h1><a href="http://www.bucketlistly.com/achievements/travel-to-zhangjiajie-avatar-s-mountains-china-85798" target="_blank">Travel to ZhangJiaJie (Avatar's Mountain) in China<br><small>Completed on 20 Jan 2014</small></a></h1>
                </div>
            </section>
            <section class="page8">
                <div class="page_container">
                    <h1><a href="http://www.bucketlistly.com/achievements/ride-a-camel-93541" target="_blank">Ride a Camel in the Australian Outback<br><small>Completed on 17 Feb 2014</small></a></h1>
                </div>
            </section>
        </div>
        <a class="back" href="http://www.thepetedesign.com/#plugins">Back to The Pete Design</a>
        <a href="https://github.com/peachananr/tiltedpage_scroll"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
    </div>
</body>
</html>
官网：https://github.com/peachananr/tiltedpage_scroll