three+gsap+gsap及webgl实现无限拖动滚动循环的照片墙效果代码-html代码-BFW代码库

three+gsap+gsap及webgl实现无限拖动滚动循环的照片墙效果代码

代码语言：html

代码描述：three+gsap+gsap及webgl实现无限拖动滚动循环的照片墙效果代码，不管用鼠标拖动还是滚动鼠标，都能无边界无尽头展示照片。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
        html, body {
          height: 100%;
          height: 100%;
          overflow: hidden;
        }
        
        html {
          font-size: 1vw;
        }
        
        body {
          padding: 0;
          margin: 0;
          cursor: -webkit-grab;
          cursor: grab;
          -webkit-user-select: none;
             -moz-user-select: none;
              -ms-user-select: none;
                  user-select: none;
        }
        
        .grid {
          position: fixed;
          top: 0;
          left: 0;
          width: 150%;
          height: 150%;
          display: grid;
          grid-template-columns: repeat(5, 1fr);
        }
        .grid > div {
          position: relative;
        }
        
        canvas {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          pointer-events: none;
        }
        
        figure {
          position: absolute;
          inset: 0.5rem;
          padding: 0;
          margin: 0;
        }
    </style>



</head>

<body >
    <div class="grid js-grid">
        <div>
            <figure class="js-plane" data-src="//repo.bfw.wiki/bfwrepo/image/6257e9f53b418.png"></figure>
        </div>
        <div>
            <figure class="js-plane" data-src="//repo.bfw.wiki/bfwrepo/image/62ad032c92ddd.png"></figure>
        </div>
        <div>
            <figure class="js-plane" data-src="//repo.bfw.wiki/bfwrepo/image/629fe9ae4c888.png"></figure>
        </div>
              <div>
            <figure class="js-plane" data-src="//repo.bfw.wiki/bfwrepo/image/6257e9f53b418.png"></figure>
        </div>
        <div>
            <figure class="js-plane.........完整代码请登录后点击上方下载按钮下载查看