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.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0