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

代码语言:html

所属分类:加载滚动

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

代码标签: 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;
        }
        .hand[data-type=wave] .hand-wave {
          display: block;
        }
        
        .hand-wave {
          transform-origin: 20% 90%;
          -webkit-animation-timing-function: ease-in-out;
                  animation-timing-function: ease-in-out;
          -webkit-animation: wave 0.4s infinite;
                  animation: wave 0.4s infinite;
        }
        
        @-webkit-keyframes wave {
          0%, 100% {
            transform: rotate(-20deg) translatex(-20%);
          }
          50% {
            transform: rotate(15deg) translatex(0%);
          }
        }
        
        @keyframes wave {
          0%, 100% {
            transform: rotate(-20deg) translatex(-20%);
          }
          50% {
            transform: rotate(15deg) translatex(0%);
          }
        }
        @-webkit-keyframes spin {
          100% {
            transform: rotate(360deg);
          }
        }
        @keyframes spin {
          100% {
            transform: rotate(360deg);
          }
        }
    </style>




</head>

<body>
    <svg style="display: none" width="0" height="0" fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>  
    <g id="face-step-1">
      <ellipse class="left-eye" cx="59.5" cy="59.001" rx="26.5" ry="37" fill="#fff"/>
      <ellipse class="right-eye" cx="131.5" cy="59.001" rx="26.5" ry="37" fill="#fff"/>
      <circle class="left-pupil" cx="59.5" cy="43.501" r="13.5" fill="#884578"/>
      <circle class="right-pupil" cx="131.5" cy="43.501" r="13.5" fill="#884578"/>
      <ellipse class="left-lower-lid" cx="62.367" cy="95.453" rx="46.487" ry="19.5" transform="rotate(-20.356 62.367 95.453)" fill="#C794BB"/>
      <ellipse class="left-upper-lid" rx="42.306" ry="14.491" transform="matrix(.96216 -.27248 .43717 .89938 47.04 24.56)" fill="#C794BB"/>
      <ellipse class="right-lower-lid" cx="130.194" cy="94.537" rx="46.487" ry="19.5" transform="rotate(17.442 130.194 94.537)" fill="#C794BB"/>
      <ellipse class="right-upper-lid" rx="42.508" ry="14.387" transform="matrix(.9694 .24552 -.39868 .9171 145.057 26.028)" fill="#C794BB"/>
      <path class="mouth" d="M98 114c-14.5 0-37 3-49 14.5 6.5 5 16.5 13.5 28 6.5s26-6 41.5 0c8.406 3.254 18.5-3 23.5-10-18-11-29.5-11-44-11Z" fill="#884578"/>
      <path class="teeth" d="M57 117a6 6 0 0 1 6-6h66a6 6 0 0 1 6 6v1.463c0 4.65-5.322 7.992-9.781 6.671-6.5-1.926-16.24-3.848-29.219-3.848-12.98 0-22.719 1.922-29.219 3.848-4.46 1.321-9.781-2.021-9.781-6.671V117Z" fill="#fff"/>
    </g>

    <g id="face-step-2">
      <ellipse class="left-eye" cx="59.5" cy="70" rx="26.5" ry="37" fill="#fff"/>
      <ellipse class="right-eye" cx="131.5" cy="70" rx="26.5" ry="37" fill="#fff"/>
      <circle class="left-pupil" cx="60" cy="72" r="15&q.........完整代码请登录后点击上方下载按钮下载查看

网友评论0