TweenLite实现鼠标滚动全屏图文切换过渡幻灯片效果代码-html代码-BFW代码库

代码语言：html

所属分类：幻灯片

代码描述：TweenLite实现鼠标滚动全屏图文切换过渡幻灯片效果代码

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        *, *:before, *:after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            overflow: hidden;
            background: #000;
        }

        .ws-pages {
            overflow: hidden;
            position: relative;
            height: 100vh;
        }
        .ws-bgs {
            position: relative;
            height: 100%;
        }
        .ws-bg {
            display: flex;
            height: 100%;
            background-size: cover;
            background-position: center center;
        }
        .ws-pages.s--ready .ws-bg {
            background: none;
        }
        .ws-bg__part {
            overflow: hidden;
            position: relative;
            height: 100%;
            cursor: -webkit-grab;
            cursor: grab;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .ws-bg__part-inner {
            position: absolute;
            top: 0;
            width: 100vw;
            height: 100%;
            background-size: cover;
            background-position: center center;
        }
        .ws-bg:nth-child(1) {
            background-image: url(//repo.bfw.wiki/bfwrepo/image/5f24e1feda734.png);
        }
        .ws-bg:nth-child(1) .ws-bg__part-inner {
            background-image: url(//repo.bfw.wiki/bfwrepo/image/5f24e1feda734.png);
        }
        .ws-bg:nth-child(2) {
            background-image: url(//repo.bfw.wiki/bfwrepo/image/600d657ecf5ce.png);
        }
        .ws-bg:nth-child(2) .ws-bg__part-inner {
            background-image: url(//repo.bfw.wiki/bfwrepo/image/600d657ecf5ce.png);
        }
        .ws-bg:nth-child(3) {
            background-image: url(//repo.bfw.wiki/bfwrepo/image/5d65eaff5a217.png);
        }
        .ws-bg:nth-child(3) .ws-bg__part-inner {
            background-image: url(//repo.bfw.wiki/bfwrepo/image/5d65eaff5a217.png);
        }
    
        .ws-text {
            overflow: hidden;
            position: absolute;
            left: 15%;
            top: 50%;
            width: 70%;
            height: 50px;
            margin-top: -25px;
            pointer-events: none;
        }
        .ws-text__heading {
            display: flex;
            justify-content: space-between;
            height: 100%;
            font-size: 30px;
            line-height: 50px;
            color: #fff;
        }
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
   <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenLite.js"></script>
   <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/CSSPlugin.js"></script>
   <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/EasePack.3.51.js"></script>
</head>
<body>

    <div class="ws-pages">
        <div class="ws-bgs">
            <div class="ws-bg"></div>
            <div class="ws-bg"></div>
            <div class="ws-bg"></div>
         
        </div>
        <div class="ws-text">
            <h2 class="ws-text__heading">
                <span>Page 1</span>
                <span>拖动图像或鼠标滚轮向下滚动</span>
            </h2>
            <h2 class="ws-text__heading">
                <span>Page 2</span>
            </h2>
            <h2 class="ws-text__heading">
                <span>Page 3</span>
                <span>Still nothing</span>
            </h2>
         
        </div>
    </div>
    <script>
        window.requestAnimFrame = (function() {
            return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            function(callback) {
                window.setTimeout(callback, 1000 / 60);
            };
        })();

        function rafThrottle(fn) {
            var busy = false;
            return function() {
                if (busy) return;
                busy = true;
                fn.apply(this, arguments);
                requestAnimFrame(function() {
                    busy = false;
                });
            };
        };

        $(document).ready(function() {

            var $wsPages = $(".ws-pages");
            var $headings = $(".ws-text__heading");
            var bgParts = 24;
            var staggerVal = 65;
            var staggerStep = 4;
            var textH = $(".ws-text").height();
            var winW = $(window).width();
            var winH = $(window).height();
            var curPage = 1;
            var numOfPages = $(".ws-bg").length;
            var changeAT = 0.5;
            var waveStartDelay = 0.2;
            var waveStagger = 0.013;
            var waveBlocked = false;
            var index = 1;
            var startY = 0;
            var deltaY = 0;
            var headingsY = 0;
            var $parts;

            function initBgs() {
                var arr = [];
                var partW = 100 / bgParts;

                for (var i = 1; i <= bgParts; i++) {
                    var $part = $('<div class="ws-bg__part">');
                    var $inner = $('<div class="ws-bg__part-inner">');
                    var innerLeft = 100 / bgParts * (1 - i);

                    $inner.css("left", innerLeft + "vw");
                    $part.append($inner);
                    $part.addClass("ws-bg__part-" + i).width(partW + "%");
                    arr.push($part);
                }

                $(".ws-bg").append(arr);
                $wsPages.addClass("s--ready");
                $parts = $(".ws-bg__part");
            };

            initBgs();

            function changePages() {
                var y = (curPage - 1) * winH * -1;
                var textY = textH * (curPage - 1) * -1;
                var leftMax = index - 1;
                var rightMin = index + 1;

     .........完整代码请登录后点击上方下载按钮下载查看