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