gsap+ScrollTrigger+MotionPathPlugin实现页面滚动插画跟随动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:gsap+ScrollTrigger+MotionPathPlugin实现页面滚动插画跟随动画效果代码
代码标签: gsap ScrollTrigger MotionPathPlugin 页面 滚动 插画 跟随 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import url('https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@400;500;600;700;800&display=swap');
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
font-family: "Abhaya Libre", serif;
font-weight: 600;
font-style: normal;
}
main {
display:flex;
justify-content:center;
flex-direction:column;
}
section {
display:flex;
align-items:center;
justify-content:center;
width:100%;
min-height:100vh;
}
#s2 {
background:#1d0042;
}
svg {
position:relative;
margin-top:-9vw;
}
h1 {
font-size:clamp(3vw, 8.5vw, 99px);
text-align:center;
}
#s1 h1 {
font-weight:800;
}
.pink {
color:rgb(239, 208, 255);
display:block;
}
.radial {
-webkit-text-fill-color: transparent;
background-image: radial-gradient(circle at -20% 0, #2b0aff, #e93abf 31%, #f658a8 48%, #febf72);
-webkit-background-clip: text;
background-clip: text;
display: block;
}
.smaller {
font-size:0.35em;
font-weight:500;
}
</style>
</head>
<body translate="no">
<main>
<section id="s1">
<h1>
<span class="radial">A new medium for</span>
<span class="radial">presenting ideas.</span>
<span class="smaller">(scroll further)</span>
</h1>
</section>
<svg xmlns="http://www.w3.org/2000/svg" fill="#1d0042" stroke="#1d0042" stroke-width="1.8" viewBox="10 0 970 200">
<g class="ring3">
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0