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