jquery实现全屏页面滚动切换效果代码-html代码-BFW代码库

jquery实现全屏页面滚动切换效果代码

代码语言：html

所属分类：幻灯片

代码描述：jquery实现全屏页面滚动背景效果代码

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

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>

    <style>
        @charset "utf-8";
    *, *:before, *:after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    html, body {
      height: 100%;
      overflow: hidden;
      background: #000;
    }
    @media (max-width: 767px) {
      html, body {
        font-size: 80%;
      }
    }
    @media (max-width: 640px) {
      html, body {
        font-size: 60%;
      }
    }
    @media (max-width: 480px) {
      html, body {
        font-size: 40%;
      }
    }
    
    .inner, .nav-panel ul .nav-btn:after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
    }
    
    .scene {
      width: 100%;
      height: 100%;
    }
    
    .page {
      z-index: 1;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transition: opacity .7s, z-index .7s, -webkit-transform .7s;
      transition: transform .7s, opacity .7s, z-index .7s;
      transition: transform .7s, opacity .7s, z-index .7s, -webkit-transform .7s;
      will-change: transform, opacity;
    }
    .page:nth-child(1) .left {
      background-image: url("//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png");
    }
    .page:nth-child(1) .right {
      background-image: url("//repo.bfw.wiki/bfwrepo/image/5e62ef41353c3.png");
    }
    .page:nth-child(2) .left {
      background-image: url("//repo.bfw.wiki/bfwrepo/image/5e62ef60656fd.png");
    }
    .page:nth-child(2) .right {
      background-image: url("//repo.bfw.wiki/bfwrepo/image/5e62ef82c83ea.png");
    }
    .page:nth-child(3) .left {
      background-image: url("//repo.bfw.wiki/bfwrepo/image/5e62efa9e6df8.png");
    }
    .page:nth-child(3) .right {
      background-image: url("//repo.bfw.wiki/bfwrepo/image/5fc8aa82a7330.png");
    }
    .page:nth-child(4) .left {
      background-image: url("//repo.bfw.wiki/bfwrepo/image/609636b3b27fe.png");
    }
    .page:nth-child(4) .right {
      background-image: url("//repo.bfw.wiki/bfwrepo/image/60ece322d6263.png");
    }
    .page.active {
      z-index: 5;
      transition: opacity .7s, z-.........完整代码请登录后点击上方下载按钮下载查看