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

代码语言：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-index 0s .7s, -webkit-transform .7s;
      transition: transform .7s, opacity .7s, z-index 0s .7s;
      transition: transform .7s, opacity .7s, z-index 0s .7s, -webkit-transform .7s;
    }
    .page.active .half {
      -webkit-transform: translateX(0) !important;
              transform: translateX(0) !important;
      transition: -webkit-transform .7s ease-out;
      transition: transform .7s ease-out;
      transition: transform .7s ease-out, -webkit-transform .7s ease-out;
    }
    .page.previous {
      opacity: 0.4 !important;
      visibility: visible !important;
      transition: opacity .7s, z-index 0s, -webkit-transform .7s;
      transition: transform .7s, opacity .7s, z-index 0s;
      transition: transform .7s, opacity .7s, z-index 0s, -webkit-transform .7s;
    }
    .page.small {
      -webkit-transform: scale(0.8);
              transform: scale(0.8);
      opacity: 0;
    }
    .page.small .half {
      -webkit-transform: translateX(0) !important;
              transform: translateX(0) !important;
    }
    .page:nth-child(2) .left {
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
    }
    .page:nth-child(2) .right {
      -webkit-transform: translateX(100%);
              transform: translateX(100%);
    }
    .page:nth-child(3) .left {
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
    }
    .page:nth-child(3) .right {
      -webkit-transform: translateX(100%);
              transform: translateX(100%);
    }
    .page:nth-child(4) .left {
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
    }
    .page:nth-child(4) .right {
      -webkit-transform: translateX(100%);
              transform: translateX(100%);
    }
    .page:nth-child(5) .left {
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
    }
    .page:nth-child(5) .right {
      -webkit-transform: translateX(100%);
              transform: translateX(100%);
    }
    .page:nth-child(6) .left {
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
    }
    .page:nth-child(6) .right {
      -webkit-transform: translateX(100%);
              transform: translateX(100%);
    }
    .page:nth-child(7) .left {
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
    }
    .page:nth-child(7) .right {
      -webkit-transform: translateX(100%);
              transform: translateX(100%);
    }
    .page:nth-child(8) .left {
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
    }
    .page:nth-child(8) .right {
      -webkit-transform: translateX(100%);
              transform: translateX(100%);
    }
    .page:nth-child(9) .left {
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
    }
    .page:nth-child(9) .right {
      -webkit-transform: translateX(100%);
              transform: translateX(100%);
    }
    .page:nth-child(10) .left {
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
    }
    .page:nth-child(10) .right {
      -webkit-transform: translateX(100%);
              transform: translateX(100%);
    }
    
    .half {
      position: absolute;
      top: 0;
      width: 50%;
      height: 100%;
      background-size: cover;
      transition: -webkit-transform .7s ease-in;
      transition: transform .7s ease-in;
      transition: transform .7s ease-in, -webkit-transform .7s ease-in;
      will-change: transform;
    }
    .half.left {
      left: 0;
    }
    .half.right {
      left: 50%;
    }
    .half.withText:after {
      content: "";
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 10;
    }
    
    .heading {
      position: absolute;
      z-index: 500;
      top: 50%;
      left: 50%;
      -webkit-transform: translateX(-50%) translateY(-50%);
              transform: translateX(-50%) translateY(-50%);
      font-size: 3.5rem;
      color: #fff;
      font-family: Decade;
    }
    
    .nav-panel {
      position: fixed;
      top: 50%;
      right: 2%;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
      z-index: 1000;
      transition: opacity 0.5s, -webkit-transform 0.5s cubic-bezier(0.57, 1.2, 0.68, 2.6);
      transition: opacity 0.5s, transform 0.5s cubic-bezier(0.57, 1.2, 0.68, 2.6);
      transition: opacity 0.5s, transform 0.5s cubic-bezier(0.57, 1.2, 0.68, 2.6), -webkit-transform 0.5s cubic-bezier(0.57, 1.2, 0.68, 2.6);
      will-change: transform, opacity;
    }
    .nav-panel.invisible {
      opacity: 0;
      -webkit-transform: translateY(-50%) scale(0.5);
              transform: translateY(-50%) scale(0.5);
  .........完整代码请登录后点击上方下载按钮下载查看