全屏切换幻灯片特效-html代码-BFW代码库

代码语言：html

所属分类：幻灯片

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> - parallaxy slides</title>
    <link href='https://fonts.googleapis.com/css?family=Merriweather+Sans:700' rel='stylesheet' type='text/css'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    <style>
        html, body {
            width: 100%;
            height: 100%;
        }

        body {
            overflow: hidden;
            font-family: "Merriweather Sans", sans-serif;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            -o-user-select: none;
            user-select: none;
        }

        .slide-wrap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: absolute;
            cursor: pointer;
        }

        .slide {
            width: 100%;
            height: 100%;
            position: absolute;
        }
        .slide .image {
            background-size: cover;
            width: 100%;
            height: 100%;
        }

        .text {
            position: absolute;
            font-size: 3rem;
            color: #fff;
            top: 0px;
            left: 0px;
            text-transform: uppercase;
            margin-left: 20px;
        }
        .text p {
            margin: 0;
        }

        .instructions {
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 1000;
            color: #fff;
            font-size: 14px;
        }

    </style>

</head>
<body translate="no">
    <div class="slide-wrap">
        <div class="slide">
            <div class="image" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/53148/unsplash-1.jpg)"></div>
        </div>
        <div class="text">
            <p>
                Sand &amp;
            </p>
            <p>
                Rocks &amp;
            </p>
            <p>
                Water &amp;
            </p>
            <p>
                Sky
            </p>
        </div>
    </div>
    <div class="slide-wrap">
        <div class="slide">
            <div class="image" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/53148/unsplash-2.jpg)"></div>
        </div>
        <div class="text">
            <p>
                River &amp;
            </p>
            <p>
                Rocks &amp;
            </p>
            <p>
                Mountain &amp;
            </p>
            <p>
                Trees
            </p>
        </div>
    </div>
    <div class="slide-wrap">
        <div class="slide">
            <div class="image" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/53148/unsplash-3.jpg)"></div>
        </div>
        <div class="text">
            <p>
                Water &amp;
            </p>
            <p>
                Waves &amp;
            </p>
            <p>
                Clouds &amp;
            </p>
            <p>
                Shore
            </p>
        </div>
    </div>
    <div class="slide-wrap">
        <div class="slide">
            <div class="image" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/53148/unsplash-4.jpg)"></div>
        </div>
        <div class="text">
            <p>
                Castle &amp;
            </p>
            <p>
                Fields &amp;
            </p>
            <p>
                Lakes &amp;
            </p>
            <p>
                Trees
            </p>
        </div>
    </div>
    <div class="slide-wrap">
        <div class="slide">
            <div class="image" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/53148/unsplash-5.jpg)"></div>
        </div>
        <div class="text">
            <p>
                Waterfall &amp;
            </p>
            <p>
                Stream &amp;
            </p>
            <p>
                Woods &amp;
            </p>
            <p>
                Mist
            </p>
        </div>
    </div>
    <div class="instructions">
        Click &amp; drag to swipe (desktop)<br />or touch swipe (mobile)
    </div>

    <script src='http://repo.bfw.wiki/bfwrepo/js/jquery.17.js'></script>
    <script>
        var $images = $(".slide");
        var $slides = $(".slide-wrap");
        var slides = [];
        var windowWidth, windowHeight, windowRatio;
        var imageWidth, imageHeight, imageTop, imageLeft;
        var imageRatio = 1200 / 900;
        var fontSize = 20;
        var parallaxTarget = {
            x: 0, y: 0
        };
        var parallaxPosition = {
            x: 0, y: 0
        };
        var mouseDownPosition = {};
        var moveSlidePosition = {
            x: 0, y: 0
        };
        var currentSlide, slideMoving;
        var easeOutQuad = "cubic-bezier(0.215, 0.61, 0.355, 1)";

        function Slide(elem) {
            this.init(elem);
            this.splitText();
        }

        Slide.prototype = {
            init: function (elem) {
                this.wrap = $(elem);
                this.image = $(this.wrap.find(".slide")[0]);
                this.text = $(this.wrap.find(".text")[0]);
            },
            splitText: function () {
                var lines = this.text.find("p");
                this.lines = [];
                for (var i = 0, l = lines.length; i < l; i++) {
                    var t = lines[i].innerText || lines[i].textContent;
                    var letters = t.split("");
                    var text = letters.map(function (l) {
                        return "<span>" + l + "</span>";
                    });
                    lines[i].innerHTML = text.join("");
                    lines.css({
                        position: "relative"
                    });
                    this.lines.push($(lines[i]).find("span"));
                }
                this.letters = this.text.find("span");
                this.resetText();
            },
            resetText: function () {
                for (var i = 0, l = this.letters.length; i < l; i++) {
                    this.letters[i].style.opacity = 0;
                    this.letters[i].style.transform = "translate3d(0, " + fontSiz.........完整代码请登录后点击上方下载按钮下载查看