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

代码语言：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: center;
    grid-row-start: 3;
}
.i{
grid-column-start: 2;
grid-row-start: 3;
align-self: end;

}
.n{
    grid-row-start: 4;
    grid-column-start: 3;
}
.g{
 grid-row-start: 4;
 grid-column-start: 2;
 align-self: center;
}

header{
    border-top: 10px solid #000;
    border-bottom: 10px solid #000;
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 3rem;
}
.logo{
    width: 64px;
    height: 64px;
    background-color: #000;
}
nav{
    display: flex;
    align-items: center;
}
nav a{
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: #000;
    border-radius: 50%;
    margin-right: 1.2rem;
    pointer-events: none;
}
nav a:last-of-type{
    margin-right: 0;
}
@media screen and (max-width: 760px){
    header{
        padding: 0 1rem;
    }
    .logo{
        width: 48px;
        height: 48px; 
    }
    nav a{
        width: 32px;
        height: 32px;
        margin-right: 0.8rem;
    }
}
</style>

</head>
<body translate="no">
<div data-page-container>
<header>
<div class="logo"></div>
<nav>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</nav>
</header>
<section data-page-section="one" id="intro">
<div class="border-top"></div>
<div class="intro-letters">
<svg xmlns="http://www.w3.org/2000/svg" width="auto" height="auto" viewBox="0 0 398 426">
<path id="letters" d="M57 426l47.4-134.4h189L340.8 426h57L248.4 0h-99L0 426h57zm218.4-186h-153l66-188.4h21l66 188.4z" fill="#000" fill-rule="nonzero" /></svg>
</div>
<div class="border-bottom"></div>
</section>
<section data-page-section="two" id="outro">
<div id="letters-grid">
<div class="grid-item o">
<div class="letter-wrap">
<svg xmlns="http://www.w3.org/2000/svg" width="139" height="148" fill="none" viewBox="0 0 139 148">
<path id="outro1" fill="#000" d="M138.74 0H.5v147.456h138.24V0zm-25.92 80.064h-86.4V67.392h86.4v12.672z" />
</svg>
</div>
</div>
<div class="grid-item f">
<div class="letter-wrap f">
<svg xmlns="http://www.w3.org/2000/svg" width="107" height="205" fill="none" viewBox="0 0 107 205">
<path id="outro2" fill="#000" d="M106.168 62.152V.52h-84.96v66.24H.76V205h88.128V66.76h-41.76v-4.608h59.04z" />
</svg>
</div>
</div>
<div class="grid-item s">
<div class="letter-wrap">
<svg xmlns="http://www.w3.org/2000/svg" width="132" height="148" fill="none" viewBox="0 0 132 148">
<path id="outro3" fill="#000" d="M120.648 57.752H41V41.048h79.648C114.312 13.112 89.544.152 60.744.152 22.728.152.84 43.064.84 43.064L52 79l32.5 21.5 1.144-.832-50.972-32.84L.84 43.064s61.632 104.543 61.344 104.544c-.58-.412 58.464-62.208 58.464-89.856z" />
</svg>
</div>
</div>
<div class="grid-item c">
<div class="letter-wrap">
<svg xmlns="http://www.w3.org/2000/svg" width="131" height="148" fill="none" viewBox="0 0 131 148">
<path id="outro4" fill="#000" d="M.52 84.824l59.328 62.784h44.064V67.544H68V126L26.44 80.216V67.544H103.912V.152H.52v84.672z" />
</svg>
</div>
</div>
<div class="grid-item r">
<div class="letter-wrap">
<svg xmlns="http://www.w3.org/2000/svg" width="93" height="139" fill="none" viewBox="0 0 93 139">
<path id="outro5" fill="#000" d="M72.904.76H.04V139h25.92V74.2H92.488V.76H72.904z" />
</svg>
</div>
</div>
<div class="grid-item o2">
<div class="letter-wrap">
<svg xmlns="http://www.w3.org/2000/svg" width="139" height="148" fill="none" viewBox="0 0 139 148">
<path id="outro6" fill="#000" d="M138.74 0H.5v147.456h138.24V0zm-25.92 80.064h-86.4V67.392h86.4v12.672z" />
</svg>
</div>
</div>
<div class="grid-item l">
<div class="letter-wrap">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="210" fill="none" viewBox="0 0 26 210">
<path id="outro7" fill="#000" d="M.04.5V92h25.92V.5H.04z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="210" fill="none" viewBox="0 0 26 210">
<path id="outro8" fill="#000" d="M.04.912V26.5h25.92V.912H.04z" />
</svg>
</div>
</div>
<div class="grid-item i">
<div class="letter-wrap">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="210" fill="none" viewBox="0 0 36 210">
<path id="outro9" fill="#000" d="M18.272 35.472l17.28-16.992L18.272.912.992 18.48l17.28 16.992zM5.312 210h25.92v-31H5.312v31z" />
</svg>
</div>
</div>
<div class="grid-item n">
 <div class="letter-wrap">
<svg xmlns="http://www.w3.org/2000/svg" width="126" height="143" fill="none" viewBox="0 0 126 143">
<path id="outro10" fill="#000" d="M72.5.76H.04V139h25.92V66.712h73.152V139h25.92V.76H72.5z" />
</svg>
</div>
</div>
<div class="grid-item g">
<div class="letter-wrap">
<svg xmlns="http://www.w3.org/2000/svg" width="135" height="203" fill="none" viewBox="0 0 135 203">
<path id="outro11" fill="#000" d="M108.672.76H.96v197.568h133.632V.76h-25.92zM70.08 114.232c-32.832 0-43.2-17.28-43.2-43.2v-7.488c0-25.92 10.368-42.624 43.2-42.624 14.4 0 38.592 10.368 38.592 45.792v4.32c0 35.424-24.192 43.2-38.592 43.2z" />
</svg>
</div>
</div>
</div>
<div class="border-bottom"></div>
</section>
</div>
<section data-page-background>
<video src="http://repo.bfw.wiki/bfwrepo/video/5d8449e2482ad.mp4" playsinline muted autoplay loop></video>
</section>

<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/gsap.3.3.1.js"></script>
<script src='http://repo.bfw.wiki/bfwrepo/js/ScrollTrigger.min.js'></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/polymorph.min.js"></script>
<script>
// Intro Animation
const letterA = document.querySelector('#letters');
const letterR = "M54 426V269.4h136.2l90 156.6H342l-95.4-163.2C294 249 331.2 213 331.2 135c0-99.6-67.8-135-135.6-135H0v426h54zm130.2-208.2H5.........完整代码请登录后点击上方下载按钮下载查看