gsap实现网页滚动文字上下滑动效果代码
代码语言:html
所属分类:加载滚动
代码描述:gsap实现网页滚动文字上下滑动效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1.0"
/>
<style>
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');
@import url('//repo.bfw.wiki/bfwrepo/css/normalize.5.0.css') layer(normalize);
@layer normalize, base, demo, stick, effect, srollbar;
@layer scrollbar {
@property --scroller {
initial-value: 0;
syntax: '<number>';
inherits: true;
}
@property --chroma {
initial-value: 0;
syntax: '<number>';
inherits: true;
}
[data-sync-scrollbar='false'] {
scrollbar-color: light-dark(black, white) #0000;
}
[data-sync-scrollbar='true'] {
scrollbar-color: oklch(var(--lightness) var(--chroma) var(--scroller)) #0000;
}
@supports (animation-timeline: scroll()) and (animation-range: 0% 100%) {
[data-sync-scrollbar='true'] {
timeline-scope: --list;
scrollbar-color: oklch(var(--lightness) var(--chroma, 0) var(--scroller))
#0000;
-webkit-animation-name: change, chroma-on, chroma-off;
animation-name: change, chroma-on, chroma-off;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
/* animation-timeline: scroll(root); */
animation-range: entry 50% exit 50%, entry 40% entry 50%,
exit 30% exit 40%;
animation-timeline: --list;
ul {
view-timeline: --list;
}
}
}
@-webkit-keyframes change {
to {
--scroller: var(--end);
}
}
@keyframes change {
to {
--scroller: var(--end);
}
}
@-webkit-keyframes chroma-on {
to {
--chroma: 0.3;
}
}
@keyframes chroma-on {
to {
--chroma: 0.3;
}
}
@-webkit-keyframes chroma-off {
to {
--chroma: 0;
}
}
@keyframes chroma-off {
to {
--chroma: 0;
}
}
}
@layer effect {
:root {
--start: 0;
--end: 360;
--lightness: 65%;
--base-chroma: 0.3;
}
[data-theme='dark'] {
--lightness: 75%;
}
[data-theme='light'] {
--lightness: 65%;
}
@media (prefers-color-scheme: dark) {
--lightness: 75%;
}
ul {
--step: calc((var(--end) - var(--start)) / (var(--count) - 1));
}
li:not(:last-of-type) {
color: oklch(
var(--lightness) var(--base-chroma)
calc(var(--start) + (var(--step) * var(--i)))
);
}
@supports (animation-timeline: scroll()) and (animation-range: 0% 100%) {
li {
opacity: 0.2;
-webkit-animation-name: brighten;
animation-name: brighten;
&:first-of-type {
opacity: 1;
-webkit-animation-name: dim;
animation-name: dim;
}
&:last-of-type {
opacity: 0.2;
-webkit-animation-name: bright;
animation-name: bright;
}
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
animation-range: cover calc(50% - 1lh) calc(50% + 1lh);
animation-timeline: view();
}
@-webkit-keyframes dim {
0%,
50% {
opacity: 1;
}
100% {
opacity: 0.2;
}
}
@keyframes dim {
0%,
50% {
opacity: 1;
}
100% {
opacity: 0.2;
}
}
@-webkit-keyframes bright {
0% {
opacity: 0.2;
}
50%,
100% {
opacity: 1;
}
}
@keyframes bright {
0% {
opacity: 0.2;
}
50%,
100% {
opacity: 1;
}
}
@-webkit-keyframes brighten {
0%,
100% {
opacity: 0.2;
}
50% {
opacity: 1;
filter: brightness(1.2);
}
}
@keyframes brighten {
0%,
100% {
opacity: 0.2;
}
50% {
opacity: 1;
filter: brightness(1.2);
}
}
}
}
@layer stick {
section:first-of-type {
--font-level: 6;
--font-size-min: 20;
display: flex;
line-height: 1.25;
width: 100%;
padding-left: 2rem;
@media(min-width: 768px) {
padding-left: 5rem;
}
}
section:last-of-type {
min-height: 100svh;
display: flex;
place-items: center;
width: 100%;
justify-content: center;
h2 {
--font-level: 6;
--font-size-min: 20;
}
}
main {
width: 100%;
}
section:first-of-type h2 {
position: sti.........完整代码请登录后点击上方下载按钮下载查看
网友评论0