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

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

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看