gsap实现横向拖拽图片相册效果代码-html代码-BFW代码库

gsap实现横向拖拽图片相册效果代码

代码语言：html

所属分类：拖放

代码描述：gsap实现横向拖拽图片相册效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        * {
      box-sizing: border-box;
    }
    
    body {
      height: 100vh;
      overflow: hidden;
      background: #000;
      color: #fff;
      font-family: "Playfair Display", cursive;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .menu {
      overflow: hidden;
      cursor: -webkit-grab;
      cursor: grab;
      width: 100%;
      position: relative;
      z-index: 1;
      height: 40vh;
    }
    .menu.is-dragging {
      cursor: -webkit-grabbing;
      cursor: grabbing;
    }
    .menu--wrapper {
      counter-reset: count;
      display: flex;
      position: absolute;
      z-index: 1;
      height: 100%;
      top: 0;
      left: 0;
      width: 100%;
    }
    .menu--item {
      counter-increment: count;
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      width: 30vw;
      height: 100%;
      padding: 0 1.5vw;
      overflow: hidden;
    }
    @media (max-width: 767px) {
      .menu--item {
        width: 40vw;
        height: 40vw;
      }
    }
    .menu--item:nth-child(n+10):before {
      content: counter(count);
    }
    .menu--item figure {
      position: absolute;
      z-index: 1;
      display: block;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
      -webkit-appearance: none;
      padding: 0;
      border: none;
      outline: none;
      box-shadow: none;
      cursor: pointer;
      width: 100%;
      height: 100%;
      overflow: hidden;
      pointer-events: none;
      transform-origin: center;
    }
    .menu--item figure img {
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
      vertical-align: middle;
      transform-origin: center;
    }
    .menu--item figure:before {
      position: absolute;
      z-index: 2;
      bottom: 1vw;
      left: 1vw;
      display: inline-block;
      content: "0" counter(count);
      color: #ffffff;
      font-size: 3vw;
    }
    
    .version {
      display: inline-block;
      position: fixed;
      text-align: center;
      z-index: 1;
      text-decoration: none;
      background: #333;
      font-family: sans-serif;
      color: #fff;
      text-transform: uppercase;
      font-size: 12px;
      border-radius: 10px;
      box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2);
      top: -30px;
      right: -50px;
      bottom: auto;
      transform: rotate(45deg);
      transform-origin: 0% 100%;
      border-radius: 0;
      padding: 8px 30px;
      font-size: 11px;
    }
    .version:before {
      content: "";
      position: absolute;
      z-index: -1;
      width: 100%;
      height: 100px;
      bottom: 0;
      right: 0%;
      background: transparent;
    }
    @media (max-width: 767px) {
      .version {
        transform: scale(0.6) rotate(45deg);
        right: -100px;
      }
    }
    </style>

</head>

<body>


    <div class="menu">
        <div class="menu--wrapper">
            <div class="menu--item">
                <figure><img src="//repo.bfw.wiki/bfwrepo/image/64250f76c7994.png" alt="" /></figure>
            </div>

            <div class="menu--item">
                <figure><img src="//repo.bfw.wiki/bfwrepo/image/640679a9b3bd3.png" alt="" /></figure>
            </div>

            <div class="menu--item">
                <figure><img src="//repo.bfw.wiki/bfwrepo/image/640ad4046e10f.png".........完整代码请登录后点击上方下载按钮下载查看