svg滚动文字变形动画效果-html代码-BFW代码库

svg滚动文字变形动画效果

代码语言：html

所属分类：动画

代码描述：svg滚动文字变形动画效果，结合polymorph、ScrollTrigger、gsap插件实现

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<link rel='stylesheet' href='https://unpkg.com/ress/dist/ress.min.css'>
<style>
body{
    background-color: #000;
}

[data-page-container]{
    background-color: #fff;
    position: relative;
    width: 90vw;
    margin: 0 auto;
    min-height: 100vh;
    overflow-x: hidden;
}
@media screen and (max-width: 760px){
    [data-page-container]{
        width: 92vw;
    }
}
[data-page-background]{
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    mix-blend-mode: screen;
    pointer-events: none;
}
video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
[data-page-section="one"]{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.intro-letters{
    width: 100%;
    max-width: 600px;
}
@media screen and (max-width: 760px){
    .intro-letters{
        padding: 0 6vw;
    }
}
.border-top{
    width: 100%;
    height: 60px;
    background-color: #000;
    transform: scaleX(0);
    transform-origin: 0% 50%;
    margin-bottom: auto;
}
.border-bottom{
    width: 100%;
    height: 60px;
    background-color: #000;
    transform: scaleX(0);
    transform-origin: 100% 50%;
    margin-top: auto;
}
#letters-grid{
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: repeat(4, 100vh);
 justify-items: center;
}
.grid-item{
padding: 10vh 0;
}
.o{
grid-column-start: 2;
align-self: center;
}
.f{
align-self: end;
}
.c{
align-self: center;
}
.r{
align-self: end;
}
.o2{
    grid-column-start: 2;
    grid-row-start: 3;
}
.l{
    grid-column-start: 1;
    align-self.........完整代码请登录后点击上方下载按钮下载查看