gsap+ScrollTrigger实现滚动底部自动加载更多效果代码-html代码-BFW代码库

代码语言：html

代码描述：gsap+ScrollTrigger实现滚动底部自动加载更多效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <style>
        :root {
          --color-background: #F5CAC3;
          --color-background-fade: #F5CAC300;
          --color-browser: #84A59D;
          --color-browser-alt: #C4D4D0;
          --color-page: #F7EDE2;
          --color-element: #C6CDD2;
          --color-footer: #C794BB;
          --page-margin: 20px;
          --page-padding: 10px;
          --top-bar-height: 30px;
          --scroll-bar-width: 0px;
          --content-gap: 20px;
          --list-padding: 2rem;
          --browser-border-radius: 30px;
          --browser-top-bar-width: min(50%, 200px);
          --browser-top-bar-radius: 20px;
          --points-display: none;
          --footer-face-width: clamp(60px, 20vh, 194px);
          --footer-face-position: flex-start;
          --footer-hand-position: 60%;
          --shadow-color: 9deg 32% 60%;
          --shadow-elevation-high:
            0.3px 0.5px 0.6px hsl(var(--shadow-color) / 0.36),
            0.9px 1.9px 2.1px -0.5px hsl(var(--shadow-color) / 0.33),
            1.8px 3.5px 4px -0.9px hsl(var(--shadow-color) / 0.31),
            3.1px 6.1px 6.9px -1.4px hsl(var(--shadow-color) / 0.29),
            5.2px 10.5px 11.8px -1.9px hsl(var(--shadow-color) / 0.27),
            8.6px 17.2px 19.3px -2.4px hsl(var(--shadow-color) / 0.25),
            13.5px 26.9px 30.2px -2.8px hsl(var(--shadow-color) / 0.23),
            20.3px 40.5px 45.5px -3.3px hsl(var(--shadow-color) / 0.2);
        }
        
        @media (min-width: 550px) {
          :root {
            --list-padding: 5rem;
            --browser-border-radius: 10px;
            --browser-top-bar-width: 100%;
            --browser-top-bar-radius: 0px;
            --scroll-bar-width: 0px;
            --footer-face-position: center;
            --points-display: flex;
            --footer-hand-position: 70%;
          }
        }
        html, body {
          margin: 0;
          padding: 0;
          width: 100%;
          height: 100%;
          background-color: var(--color-background);
        }
        
        .browser {
          --right: calc(var(--scroll-bar-width) + var(--page-margin));
          --left: var(--page-margin);
          --width: min(90vmin, 1000px);
          --margin-top: 5vmin;
          width: calc(var(--width) - (var(--left) + var(--right)));
          padding: calc(var(--top-bar-height) + var(--page-margin)) var(--right) 40vh var(--left);
          position: relative;
          display: block;
          margin: var(--margin-top) auto 0 auto;
          border: solid 5px transparent;
        }
        .browser::before, .browser::after,
        .browser .browser-elements {
          content: "";
          display: flex;
          position: fixed;
          width: var(--width);
          left: 50%;
          height: calc(50vh - 5vmin);
          transform: translatex(-50%);
          top: var(--margin-top);
          border-radius: var(--browser-border-radius);
          pointer-events: none;
          border: solid 5px transparent;
        }
        .browser::before {
          background-color: var(--color-browser-alt);
          z-index: 1;
        }
        .browser::after {
          box-shadow: var(--shadow-elevation-high);
          border-color: var(--color-browser);
          z-index: 4;
        }
        .browser .browser-elements {
          z-index: 3;
        }
        .browser .browser-elements::before {
          content: "";
          position: absolute;
          inset: 0;
          background-color: var(--color-background);
          transform: translatey(-100%);
        }
        .browser .browser-elements::after {
          content: "";
          position: absolute;
          inset: 0;
          background-color: var(--color-background-fade);
          transform: translatey(100%);
        }
        
        .top-bar {
          width: var(--browser-top-bar-width);
          height: var(--top-bar-height);
          background-color: var(--color-browser);
          position: absolute;
          top: 0;
          left: 50%;
          transform: translatex(-50%);
          border-bottom-right-radius: var(--browser-top-bar-radius);
          border-bottom-left-radius: var(--browser-top-bar-radius);
          display: flex;
          align-items: center;
        }
        .top-bar .points {
          display: var(--points-display);
          gap: 5px;
          margin: 0 5px 3px 5px;
          align-items: center;
        }
        .top-bar .points .point {
          display: block;
          width: 10px;
          height: 10px;
          border-radius: 10px;
          background-color: var(--color-browser-alt);
        }
        
        .content-spacing {
          display: flex;
          flex-direction: column;
          gap: var(--content-gap);
        }
        
        .page {
          z-index: 2;
          border-radius: 8px;
          position: relative;
          overflow: hidden;
          padding: var(--page-padding);
        }
        .page > * {
          z-index: 2;
          border-radius: 8px;
        }
        
        .page-background {
          position: absolute;
          inset: 0;
          background-color: var(--color-page);
          z-index: 1;
        }
        
        header {
          background-color: var(--color-element);
          min-height: 100px;
          width: 100%;
        }
        
        .items {
          list-style: none;
          padding: 0 var(--list-padding);
          margin: 0;
        }
        .items li {
          background-color: var(--color-element);
          padding: 3vh;
          border-radius: 6px;
        }
        .items li.flipping {
          display: none;
        }
        
        footer {
          width: 100%;
          height: var(--footer-face-width);
          background-color: currentcolor;
          color: white;
          display: flex;
          align-items: center;
          justify-content: var(--footer-face-position);
          color: var(--color-footer);
          padding-bottom: 20px;
          position: relative;
        }
        
        .face {
          width: var(--footer-face-width);
          height: var(--footer-face-width);
        }
        
        .loading {
          width: 100%;
          height: 40px;
          padding: 20px 0;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .loading .spinner {
          display: block;
          width: 40px;
          height: 40px;
          border: 6px solid var(--color-element);
          border-left-color: transparent;
          border-radius: 100vmax;
          -webkit-animation: spin 0.7s linear infinite;
                  animation: spin 0.7s linear infinite;
        }
        
        .hand {
          position: absolute;
          left: var(--footer-hand-position);
          top: 0%;
        }
        .hand .hand-type {
          display: none;
        }
        .hand[data-type=cookie] .hand-cookie {
          display: block;
.........完整代码请登录后点击上方下载按钮下载查看