jquery+css实现全屏图文视觉差异滚动拖动轮换效果代码-html代码-BFW代码库

代码语言：html

代码描述：jquery+css实现全屏图文视觉差异滚动拖动轮换效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>
    <meta name="viewport" content="width=device-width, initial-scale=1">



    <style>
        .cont {
          position: relative;
          height: 100vh;
          overflow: hidden;
        }
        
        .slider {
          position: relative;
          height: 100%;
          transform: translate3d(0, 0, 0);
          will-change: transform;
          cursor: all-scroll;
          -webkit-user-select: none;
             -moz-user-select: none;
              -ms-user-select: none;
                  user-select: none;
        }
        .slider.animation {
          transition: transform 750ms ease-in-out;
        }
        .slider.animation .slide__darkbg {
          transition: transform 750ms ease-in-out;
        }
        .slider.animation .slide__text {
          transition: transform 750ms ease-in-out;
        }
        .slider.animation .slide__letter {
          transition: transform 750ms ease-in-out;
        }
        
        .slide {
          position: absolute;
          top: 0;
          width: 100%;
          height: 100%;
          overflow: hidden;
        }
        .slide--1 {
          left: 0%;
        }
        .slide--2 {
          left: 100%;
        }
        .slide--3 {
          left: 200%;
        }
        .slide--4 {
          left: 300%;
        }
        .slide--5 {
          left: 400%;
        }
        .slide__darkbg {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          transform: translate3d(0, 0, 0);
          will-change: transform;
          z-index: 10;
        }
        .slide__text-wrapper {
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 100%;
          z-index: 15;
        }
        .slide__letter {
          position: absolute;
          display: flex;
          align-items: center;
          justify-content: center;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          transform: translate3d(0, 0, 0);
          -webkit-text-fill-color: transparent !important;
          -webkit-background-clip: text !important;
          font-size: 50vw;
          font-weight: 800;
          color: #000;
          z-index: 2;
          will-change: transform;
          -webkit-user-select: none;
             -moz-user-select: none;
              -ms-user-select: none;
                  user-select: none;
        }
        .slide__text {
          font-size: 8vw;
          font-weight: 800;
          text-transform: uppercase;
          transform: translate3d(0, 0, 0);
          letter-spacing: 12px;
          color: #fff;
          will-change: transform;
          -webkit-user-select: none;
             -moz-user-select: none;
              -ms-user-select: none;
                  user-select: none;
        }
        .slide__text:nth-child(odd) {
          z-index: 2;
        }
        .slide__text:nth-child(even) {
          z-index: 1;
        }
        .slide--1__darkbg {
          left: 0%;
          background: url("//repo.bfw.wiki/bfwrepo/image/61cc6f12e4ddb.png") center center no-repeat;
          background-size: cover;
          background-position: 0px center, 0px center;
          transform: translate3d(0, 0, 0);
          will-change: transform;
        }
        .slide--1__darkbg:after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(11, 15, 39, 0.83);
        }
        .slide--1__letter {
          background: url("//repo.bfw.wiki/bfwrepo/image/61cc6f12e4ddb.png") center center no-repeat;
          background-position: 0px center, 0px center;
          background-size: cover;
        }
        .slide--2__darkbg {
          left: -50%;
          background: url("//repo.bfw.wiki/bfwrepo/image/61cc6f3dae369.png") center center no-repeat;
          background-size: cover;
          background-position: 0px center, 0px center;
          transform: translate3d(0, 0, 0);
          will-change: transform;
        }
        .slide--2__darkbg:after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(11, 15, 39, 0.83);
        }
        .slide--2__letter {
          background: url("//repo.bfw.wiki/bfwrepo/image/61cc6f3dae369.png") center center no-repeat;
          background-position: 0px center, 0px center;
          background-size: cover;
        }
        .slide--3__darkbg {
          left: -100%;
          background: url("//repo.bfw.wiki/bfwrepo/image/61cc6f75794cf.png") center center no-repeat;
          background-size: cover;
          background-position: 0px center, 0px center;
          transform: translate3d(0, 0, 0);
          will-change: transform;
        }
        .slide--3__darkbg:after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(11, 15, 39, 0.83);
        }
        .slide--3__letter {
          background: url("//repo.bfw.wiki/bfwrepo/image/61cc6f75794cf.png") center center no-repeat;
          background-position: 0px center, 0px center;
          background-size: cover;
        }
        .slide--4__darkbg {
          left: -150%;
          background: url("//repo.bfw.wiki/bfwrepo/image/61cc6f94ea9ed.png") center center no-repeat;
          background-size: cover;
          background-position: 0px center, 0px center;
          transform: translate3d(0, 0, 0);
          will-change: transform;
        }
        .slide--4__darkbg:after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(11, 15, 39, 0.83);
        }
        .slide--4__letter {
          background: url("//repo.bfw.wiki/bfwrepo/image/61cc6f94ea9ed.png") center center no-repeat;
          background-position: 0px center, 0px center;
          background-size: cover;
        }
        .slide--5__darkbg {
          left: -200%;
          background: url("//repo.bfw.wiki/bfwrepo/image/61cc6fc26b620.png") center center no-repeat;
          background-size: cover;
          background-position: 0px center, 0px center;
          transform: translate3d(0, 0, 0);
          will-change: transform;
        }
        .slide--5__darkbg:after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(11, 15, 39, 0.83);
        }
        .slide--5__letter {
          background: url("//repo.bfw.wiki/bfwrepo/image/61cc6fc26b620.png") center center no-repeat;
          background-position: 0px center, 0px center;
          background-size: cover;
        }
        
        .nav {
          position: absolute;
          bottom: 25px;
          left: 50%;
          transform: translateX(-50%);
          list-style-type: none;
          z-index: 10;
        }
        .nav__slide {
          position: relative;
          display: inline-block;
          width: 28px;
          height: 28px;
          border-radius: 50%;
          border: 2px solid #fff;
          margin-left: 10px;
          cursor: pointer;
        }
        @media screen and (max-width: 400px) {
          .nav__slide {
            width: 22px;
            height: 22px;
          }
        }
        .nav__slide:hover:after {
          transform: translate(-50%, -50%) scale(1, 1);
          opacity: 1;
        }
        .nav__slide:after {
          content: "";
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%) scale(0, 0);
          width: 75%;
          height: 75%;
          border-radius: 50%;
          background-color: #fff;
          opacity: 0;
          transition: 300ms;
        }
        .nav__slide--1 {
          margin-left: 0;
        }
        
        .nav-active:after {
          transform: translate(-50%, -50%) scale(1, 1);
          opacity: 1;
        }
        
        .side-nav {
          position: absolute;
          width: 10%;
          height: 100%;
          top: 0;
          z-index: 20;
          cursor: pointer;
          opacity.........完整代码请登录后点击上方下载按钮下载查看