gsap实现滚动三维文字动画效果代码
代码语言：html
所属分类：加载滚动
代码描述：gsap实现滚动三维文字动画效果代码，结合了ScrollTrigger。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@import url("https://fonts.googleapis.com/css2?family=Lilita+One&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Gluten:wght@500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Dosis:wght@400;800&display=swap");
html, body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
h1,
h2 {
font-family: "Lilita One", cursive;
font-size: 15vmin;
letter-spacing: 0.2rem;
transform-style: preserve-3d;
}
h1 span,
h2 span {
position: relative;
z-index: 2;
}
.sr-only {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.background {
z-index: 0;
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
}
section {
perspective: 1500px;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
flex-direction: column;
will-change: transform;
overflow: hidden;
}
.word {
--layers: 5;
--depth: 30;
--increment: 0.1vmin;
--color: darkred;
--color-front: red;
--color-back: var(--color);
z-index: 1;
transform-style: preserve-3d;
position: relative;
transform: rotatey(0deg);
margin: 0;
padding: 0;
display: inline-block;
}
.safari .word {
--increment: 0.04vmin;
}
.word .letter {
--layer-space: calc(var(--depth) / var(--layers));
--zStack: calc((var(--layer) * var(--layer-space)) * var(--increment));
--xPositionOffset: 50%;
--yPositionOffset: 50%;
--zPositionOffset: calc(var(--increment) * ((var(--depth) * 0.5) * var(--centerOffset)));
transform-style: preserve-3d;
position: relative;
color: var(--color);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateX(calc((var(--x, 0) + var(--xOffset, 0)) * var(--increment))) translateY(calc(var(--y, 0) * var(--increment))) translateZ(calc(((var(--z, 0) - (var(--depth) * 0.5)) * var(--increment)) + var(--zStack))) rotateZ(calc(var(--rotateZ, 0) * 1deg)) rotateY(calc(var(--rotateY, 0) * 1deg)) rotateX(calc(var(--rotateX, 0) * 1deg));
transform-origin: var(--xPositionOffset) var(--yPositionOffset) var(--zPositionOffset);
}
.word .letter.front {
color: var(--color-front);
display: inline-block;
}
.word .letter.under {
position: absolute;
top: 0;
left: calc(var(--xPos, 0) * 1px);
pointer-events: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: inline-block;
user-select: none;
-webkit-user-select: none;
}
.word .letter.back {
color: var(--color-back);
}
.boing {
text-align: center;
perspective: 500px;
}
.boing .background {
background: #efefef;
}
.boing .background .sunburst {
position: absolute;
background: repeating-conic-gradient(#FFC2ED 0 15deg, #FFD6F3 15deg 30deg);
left: 50%;
top: 50%;
width: 200vmax;
height: 200vmax;
opacity: 0;
-webkit-animation: spin 40s infinite linear;
animation: spin 40s infinite linear;
transform: translate(-50%, -50%) rotate(0deg);
}
.boing .word {
--color: #444;
--color-front: #444;
--depth: 2;
--layers: 4;
display: block;
}
.intro {
font-family: "Dosis", sans-serif;
font-weight: 400;
color: #333;
text-align: center;
}
.intro h1 {
font-weight: 400;
font-size: max(5vmin, 30px);
font-family: "Dosis", sans-serif;
}
.intro .word {
--layers: 8;
--depth: 0;
--rotateAmount: 20deg;
font-weight: 800;
display: block;
font-size: 15vmin;
text-transform: uppercase;
transform: rotateX(calc(var(--mouseX) * var(--rotateAmount))) rotateY(calc(var(--mouseY) * var(--rotateAmount)));
}
.intro p {
font-size: 1.5em;
}
.intro .down-arrow {
margin-top: 3em;
}
.hulk {
overflow: unset;
}
.hulk .background {
width: 150%;
background: url('data:image/svg+xml,%3Csvg width="42" height="44" viewBox="0 0 42 44" xmlns="http://www.w3.org/2000/svg"%3E%3Cg id="Page-1" fill="none" fill-rule="evenodd"%3E%3Cg id="brick-wall" fill="%23893990" fill-opacity="0.4"%3E%3Cpath d="M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E'), #99549F;
background-size: 6em;
background-position: center;
}
.hulk .background .cracks {
width: 100vw;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
}
.hulk .background .cracks path {
display: none;
}
.hulk .background .cracks.smash-1 .crack-1 {
display: block;
}
.hulk .background .cracks.smash-2 .crack-2 {
display: block;
}
.hulk .background .cracks.smash-3 .crack-3 {
display: block;
}
.hulk .background svg {
width: 50em;
padding-bottom: 10vmin;
}
.hulk .word {
--color: #124B28;
--color-front: #2D8950;
--color-back: #45254B;
--depth: 100;
--layers: 6;
text-transform: uppercase;
}
.hulk .word .back {
opacity: 0.5;
}
.slide .word {
--color: #fff;
--color-front: #eee;
--depth: 1;
--layers: 6;
transform: rotatey(-20deg) rotatex(15deg);
text-transform: uppercase;
}
.oreo {
perspective: 2000px;
}
.oreo .background {
background: radial-gradient(#66A3DB, #2E4A9B);
}
.oreo .word {
--depth: 60;
--layers: 7;
--color: #CED3D1;
--color-front: #362E2D;
--color-back: #00000044;
text-transform: uppercase;
font-size: 25vmin;
letter-spacing: 0em;
}
.oreo .word [data-depth="6"] {
--rotateY: 0 !important;
--y: 1 !important;
--z: 1 !important;
}
.oreo .word [data-depth="1"],
.oreo .word [data-depth="4"],
.oreo .word [data-depth="5"] {
--color: var(--color-front);
}
.donut {
perspective: 600px;
}
.donut .background {
background: repeating-linear-gradient(-45deg, #606dbc00, #606dbc00 100px, #46529816 100px, #46529816 200px), radial-gradient(#BBE9F0, #3FACB9);
}
.donut .word {
--layers: 7;
--depth: 70;
--color-front: #FFF4F7;
--color-back: #3FACB9;
--color: #F9AB59;
font-size: 18vmin;
font-family: "Gluten", cursive;
text-transform: uppercase;
font-weight: 900;
transform: rotatex(35deg);
}
.donut .word .back {
opacity: 0.3;
}
.donut .word [data-depth="0"],
.donut .word [data-depth="5"] {
font-weight: 500;
--xOffset: 5;
}
.donut .word [data-depth="1"],
.donut .word [data-depth="4"] {
font-weight: 700;
--xOffset: 2;
}
.donut .word [data-depth="2"],
.donut .word [data-depth="3"] {
font-weight: 900;
}
.donut .word [data-depth="2"],
.donut .word [data-depth="4"] {
--color: #F8C58E;
}
.donut .word [data-depth="3"] {
--color: #FED89A;
}
.donut .word [data-index="0"] {
--rotateZ: 20;
}
.donut .word [data-index="1"] {
--y: 100;
}
.donut .word [data-index="2"] {
--y: 10;
--rotateZ: -15;
--x: -15;
}
.donut .word [data-index="3"] {
--y: 60;
}
.donut .word [data-index="5"] {
--y: 60;
}
.donut .word .front[data-index="0"] {
background: linear-gradient(25deg, transparent 0.2em, red 0.1em, red 0.23em, transparent 0.1em) 0.35em 0.09em/0.1em 0.29em no-repeat, linear-gradient(-25deg, transparent 0.2em, purple 0.1em, purple 0.23em, transparent 0.1em) 0.1em 0.09em/0.07em 0.29em no-repeat, linear-gradient(40deg, transparent 0.2em, orange 0.1em, orange 0.23em, transparent 0.1em) 0.1em 0.4em/0.07em 0.29em no-repeat, linear-gradient(-10deg, transparent 0.2em, red 0.1em, red 0.23em, transparent 0.1em) 0.15em 0.5em/0.06em 0.26em no-repeat, linear-gradient(20deg, transparent 0.2em, purple 0.1em, purple 0.22em, transparent 0.1em) 0.3em 0.5em/0.08em 0.26em no-repeat, linear-gradient(-40deg, transparent 0.2em, orange 0.1em, orange 0.22em, transparent 0.1em) 0.44em 0.45em/0.08em 0.26em no-repeat, linear-gradient(15deg, transparent 0.2em, red 0.1em, red 0.22em, transparent 0.1em) 0.54em 0.3em/0.08em 0.26em no-repeat, white;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.donut .word .front[data-index="0"]::after {
content: "";
position: absolute;
width: 0.12em;
height: 0.13em;
background-color: white;
top: 67%;
left: 30%;
border-radius: 0 0 1em 1em;
transform-origin: top center;
transform: rotatex(-41deg) rotatey(5deg);
}
.donut .word .front[data-index="1"] {
color: hotpink;
}
.donut .word .front[data-index="2"] {
color: chocolate;
}
.donut .word .front[data-index="3"] {
background: linear-gradient(25deg, transparent 0.2em, brown 0.1em, brown 0.23em, transparent 0.1em) 0.1em 0.13em/0.04em 0.29em no-repeat, linear-gradient(-25deg, transparent 0.2em, brown 0.1em, brown 0.23em, transparent 0.1em) 0.1em 0.09em/0.04em 0.26em no-repeat, linear-gradient(40deg, transparent 0.2em, brown 0.1em, brown 0.23em, transparent 0.1em) 0.1em 0.4em/0.04em 0.29em no-repeat, linear-gradient(-10deg, transparent 0.2em, brown 0.1em, brown 0.23em, transparent 0.1em) 0.15em 0.5em/0.04em 0.26em no-repeat, linear-gradient(20deg, transparent 0.2em, brown 0.1em, brown 0.22em, transparent 0.1em) 0.3em 0.5em/0.04em 0.26em no-repeat, linear-gradient(-40deg, transparent 0.2em, brown 0.1em, brown 0.22em, transparent 0.1em) 0.44em 0.45em/0.04em 0.26em no-repeat, linear-gradient(15deg, transparent 0.2em, brown 0.1em, brown 0.22em, transparent 0.1em) 0.54em 0.3em/0.04em 0.26em no-repeat, linear-gradient(-23deg, transparent 0.2em, brown 0.1em, brown 0.22em, transparent 0.1em) 0.54em 0.15em/0.04em 0.26em no-repeat, linear-gradient(-23deg, transparent 0.2em, brown 0.1em, brown 0.22em, transparent 0.1em) 0.54em 0.45em/0.04em 0.26em no-repeat, linear-gradient(-7deg, transparent 0.2em, brown 0.1em, brown 0.22em, transparent 0.1em) 0.42em 0.52em/0.04em 0.26em no-repeat, pink;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.donut .word .front[data-index="4"] {
background: repeating-radial-gradient(white, white 0.1em, chocolate 0.101em, chocolate 0.125em), white;
background-position: 9.45em 2.2em;
background-size: 1.5em 1.5em;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.donut .word [data-index="2"][data-depth="1"], .donut .word [data-index="2"][data-depth="4"] {
--xOffset: 6;
}
.donut .word [data-index="2"].front, .donut .word [data-index="2"][data-depth="5"] {
--xOffset: 10;
}
.donut .word [data-index="3"][data-depth="1"], .donut .word [data-index="3"][data-depth="5"] {
--xOffset: 6;
}
.donut .word [data-index="3"].front, .donut .word [data-index="3"][data-depth="5"] {
--xOffset: 10;
}
.donut .word.bite [data-index="1"] {
-webkit-clip-path: path("M100 0H0v100h42.2a18.865 18.865 0 0 1-.642-4.895c0-8.755 5.972-16.116 14.065-18.23a18.935 18.935 0 0 1-.362-3.694c0-10.406 8.436-18.842 18.842-18.842 3.436 0 6.658.92 9.432 2.528C86.991 52.673 92.225 50 98.083 50c.647 0 1.287.033 1.917.096V0Z");
clip-path: path("M100 0H0v100h42.2a18.865 18.865 0 0 1-.642-4.895c0-8.755 5.972-16.116 14.065-18.23a18.935 18.935 0 0 1-.362-3.694c0-10.406 8.436-18.842 18.842-18.842 3.436 0 6.658.92 9.432 2.528C86.991 52.673 92.225 50 98.083 50c.647 0 1.287.033 1.917.096V0Z");
}
@-webkit-keyframes spin {
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes spin {
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
</style>
</head>
<body>
<section class="intro" data-animate-perspective>
<div class="background"></div>
<h1 aria-label="Experiments with 3D text in HTML">
<span>Experiments with</span>
<span class="word" aria-hidden="true" data-animation="intro">3D Text</span>
<span> in HTML </span>
</h1>
<svg class="down-arrow" title="An arrow pointing down" viewBox="0 0 448 512" width="50">
<path d="M413.1 222.5l22.2 22.2c9.4 9.4 9.4 24.6 0 33.9L241 473c-9.4 9.4-24.6 9.4-33.9 0L12.7 278.6c-9.4-9.4-9.4-24.6 0-33.9l22.2-22.2c9.5-9.5 25-9.3 34.3.4L184 343.4V56c0-13.3 10.7-24 24-24h32c13.3 0 24 10.7 24 24v287.4l114.8-120.5c9.3-9.8 24.8-10 34.3-.4z" />
</svg>
</section>
<section class="boing" >
<div class="background"><div class="sunburst"></div></div>
<h2 class="word" data-animation="boing">Boing!</h2>
<p class="sr-only">Animation description: The heading starts in 2D with the dark grey word on a plain light grey background. As the word passes half way up the screen the letters all spring forward with each letter changing to a different color. The background changes to a rotating pink sunburst.</p>
</section>
<section class="oreo" data-animate-perspective>
<div class="background"></div>
<h2 class="word" data-animation="oreo">Oreos</h2>
<p class="sr-only">Animation description: The letters a colored like an Oreo and start stacked together vertically, as if inside their packaging. As the page scrolls down the letters fall into their positions side by side. </p>
</section>
<section class="slide">
<div class="background"></div>
<h2 class="word" data-animation="slide">Slide out</h2>
<p class="sr-only">Animation description: The heading starts in 2D with the letters all colored light grey. As the word passes half way up the screen the letters all smoothly slide forward to float above the page revealing they are 3D. Each letter changing to a different color.</p>
</section>
<section class="hulk" data-animate-perspective>
<div class="background">
<div class="cracks">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1831 939" width="1831" height="939" fill="none">
<defs>
<g id="smoke">
<circle cx="77.5" cy="141.5" r="77.5" fill="#A48DA955" />
<circle cx="77.5" cy="60.5" r="60.5" fill="#A48DA955" />
<circle cx="137.5" cy="99.5" r="77.5" fill="#A48DA955" />
</g>
</defs>
<path class="crack-1" fill="#45254B" fill-rule="evenodd" d="M591.357 538.091 608.5 529l45 17.5 186.5 36 46-58.5 31.538 6.363L863.5 492 920 379.5v-18l-21.5-37H852l52.5-8.5 24.5 45.5v26L883.5 497l60.753 38.789L1032 556l82.5-27 98.5 27 9-9.5 60-11 21.1 3.388 45.12-8.224L1360 379.5l-47.5-74.5 9.5-80v80l59.5 74.5-20.79 148.886L1494.5 504l154.5 29.5L1803 403l-154 160.5-154.5-49-172.57 27.413 28.57 4.587 39.5 9.5h-52.5l-55.5-9.5-9.58 3.586L1381.5 652.5l57 42 56-11 53.5-43-53.5 54-56 18L1373 666l-122.18-107.833-46.32 17.333-14.36-6.358L1212.5 696l-9.5 120-1-126.5-29.27-128.067L1139 546.5h-33l-74 19-146-30-46 65.5-35.598-6.599L846 712.5 818 766l28 40-36.5-40 17-49-32.292-124.489-139.428-25.847L605.5 694.5l30.5 28-30.5-16H583l39 29 14 80.5-20-70-45.5-33.5-43.5 38-6 65.5 16.5 43.5-22 31.5 11.5-27-18.5-48-49 14.5 49-24.5 7-60 42-44 35-7.5 27.616-135.741L608.5 556 567 575.5l-1.655-.667L354 650l-47.5-9.5H354l193.036-73.041-9.829-3.959H229l-50.5 95-92 26.5 80.5-34.5 43.5-87L142 510l-2-59.5-139.5-15H158V504l38.5 29.5 26 16h84l207.77 4.761L495 546.5h80.5l5.711-3.029L605.5 337.5l-106-157L521 121l23-38.5-33 98 33 50.5 80 106.5-32.643 200.591Z" clip-rule="evenodd"/>
<path class="crack-1" fill="#45254B" fill-rule="evenodd" d="M520.5 122 547 42.5 530.5 0 556 42.5 530.5 122h-10Zm153 210L617 357.5l-3.5 16.5 60.5-29 38.5 16.5-31-19 3.5-41h41l31.5-31.5-10.5-24.5 3 20-24 25.5h-41l4-74-15.5 115ZM478.554 548.387 453.5 556.5 413 568l87.967 38.936L470 676.5 387.5 717l89-37 44.5-76.848L577 585l61 10 49.03 5.91-13.53 40.59L689 745l-4-68.5 27.5 20.5v20l7-27-38-28 3.5-20.5 24.511-37.88L750 608.5l94.5 17 51-69 16.294 4.3-11.294 29.7 10.5 35 35.5 42.5-16.5 97.5 29 2.5-23-8 19.5-98-36.5-43.5-5-33.5 15.146-19.621L1003.5 585l79.5-17 95 17 64.84-10.159L1264.5 609l-16 71 8.5 31.5V675l16.5-71-19.12-30.968L1286.5 568h61l86-11.5 46 28.5 47-17h-47l-46-45.5-108-18.5-52.47 17.409-34.53-79.909-60.5-29-8.5-34 3.5 44.5 59 26 30.46 75.915-43.96 14.585-71-35.5-118.5 52.5-82.307-39.283L982 470l-4-47 51-31 26 7-26-15-58 3.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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