gsap+svg实现网页视觉差异滚动动画效果代码
代码语言：html
所属分类：视觉差异
代码描述：gsap+svg实现网页视觉差异滚动动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
padding: 0;
font-family: "Canva Sans", Arial, Helvetica, sans-serif;
}
.wrapper {
position: relative;
}
svg {
display: block;
width: 100%;
height: 100vh;
position: fixed;
z-index: 3;
top: 0;
left: 0;
}
.scrollElement {
position: absolute;
height: 6000px;
width: 100%;
top: 0;
z-index: 4;
}
.btn {
position: fixed;
bottom: 5%;
right: 0px;
transform: translateX(-50%);
border: 1px solid #fff;
border-radius: 5px;
font-size: 0.9rem;
padding: 0.5rem 0.7em;
background-color: transparent;
color: #ffffff;
font-family: Verdana, Geneva, Tahoma, sans-serif;
-webkit-font-smoothing: antialiased;
cursor: pointer;
transition: all .3s;
z-index: 11;
}
.btn_works {
left: 100px;
right: unset;
text-decoration: none;
}
.btn:hover {
background: #ffffff;
color: #1B1734;
}
/* MARK: ---0-490 Mobile */
@media (max-width: 490px) {
#text,
#arrow {
transform-origin: 50% 50%;
transform: translateY(-120px) scale(0.8);
}
#info2 {
transform-origin: 50% 50%;
transform: translateY(-120px) scale(0.8);
}
}
</style>
</head>
<body translate="no">
<svg class="parallax" viewBox="0 0 750 500" preserveAspectRatio="xMidYMax slice">
<defs>
<!-- Scene 1 Gradient -->
<linearGradient id="grad1" x1="-154.32" y1="263.27" x2="-154.32" y2="374.3" gradientTransform="matrix(-1, 0, 0, 1.36, 231.36, -100.14)" gradientUnits="userSpaceOnUse">
<stop offset="0.07" stop-color="#9c536b" />
<stop offset="0.98" stop-color="#d98981" />
</linearGradient>
<radialGradient id="bg_grad" cx="375" cy="-30" r="318.69" gradientUnits="userSpaceOnUse">
<stop offset="0.1" stop-color="#F5C54E" id="sun" />
<stop offset="0.1" stop-color="#FFDBA6" />
<stop offset="0.0" stop-color="#F7BB93" />
<stop offset="0.0" stop-color="#F2995E" />
<stop offset="0.0" stop-color="#f07560" />
<stop offset="0.8" stop-color="#FFAB93" />
</radialGradient>
<linearGradient id="grad2" x1="242.5" y1="356.25" x2="750" y2="356.25" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fbbd93" />
<stop offset="0.98" stop-color="#c46976" />
</linearGradient>
<linearGradient id="grad3" x1="467.26" y1="500" x2="467.26" y2="225.47" gradientUnits="userSpaceOnUse">
<stop offset="0.01" stop-color="#ffb8bd" />
<stop offset="1" stop-color="#914d64" />
</linearGradient>
<linearGradient id="grad4" x1="216.56" y1="227.64" x2="191.14" y2="600.82" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#70375a" />
<stop offset="0.96" stop-color="#8a6e95" />
</linearGradient>
<linearGradient id="grad5" x1="1" y1="413.12" x2="340.58" y2="413.12" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#433d6c" />
<stop offset="1" stop-color="#392e54" />
</linearGradient>
<linearGradient id="grad6" x1="454.13" y1="295.96" x2="454.13" y2="498.93" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#2b2850" />
<stop offset="0.99" stop-color="#563a6a" />
</linearGradient>
<linearGradient id="grad7" x1="434.38" y1="391.96" x2="474.27" y2="516.33" gradientUnits="userSpaceOnUse">
<stop offset="0.3" stop-color="#1c1b38" />
<stop offset="0.38" stop-color="#201e3e" />
<stop offset="0.9" stop-color="#383263" />
</linearGradient>
<linearGradient id="grad8" x1="259.18" y1="335.54" x2="213.65" y2="500.39" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#0e0a1a" />
<stop offset="0.3" stop-color="#100d1f" />
<stop offset="0.64" stop-color="#17142c" />
<stop offset="0.95" stop-color="#201f3f" />
</linearGradient>
<linearGradient id="grad9" x1="508.16" y1="321.39" x2="726.97" y2="623.69" gradientUnits="userSpaceOnUse">
<stop offset="0.01" stop-color="#120e22" />
<stop offset="1" stop-color="#221d42" />
</linearGradient>
<!-- Scene2 Gradient -->
<linearGradient id="lg4" x1="641.98" y1="274.9" x2="638.02" y2="334.36" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#2c2c50" />
<stop offset="1" stop-color="#434375" />
</linearGradient>
<linearGradient id="lg5" x1="172.37" y1="286.02" x2="171.33" y2="343.08" xlink:href="#lg4" />
<linearGradient id="lg6" x1="505.71" y1="261.55" x2="504.61" y2="322.08" xlink:href="#lg4" />
<linearGradient id="lg7" x1="301.32" y1="260.99" x2="295.66" y2="345.9" xlink:href="#lg4" />
<linearGradient id="lg8" x1="375.59" y1="381.01" x2="373.3" y2="507.08" xlink:href="#lg4" />
<!-- Scene3 Gradient -->
<radialGradient id="bg2-grad" cx="365.22" cy="500" r="631.74" gradientTransform="translate(750 552.6) rotate(180) scale(1 1.11)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="hsla(349, 94%, 75%, 1)" />
<stop offset="0.12" stop-color="hsla(342, 49%, 62%, 1)" />
<stop offset="0.18" stop-color="hsla(328, 37%, 56%, 1)" />
<stop offset="0.33" stop-color="hsla(281, 33%, 48%, 1)" />
<stop offset="0.41" stop-color="hsla(268, 38%, 48%, 1)" />
<stop offset="0.45" stop-color="hsla(266, 38%, 43%, 1)" />
<stop offset="0.55" stop-color="hsla(261, 37%, 32%, 1)" />
<stop offset="0.64" stop-color="hsla(253, 36%, 24%, 1)" />
<stop offset="0.72" stop-color="hsla(244, 33%, 19%, 1)" />
<stop offset="0.78" stop-color="hsla(240, 33%, 17%, 1)" />
</radialGradient>
<radialGradient id="fstar-grad" cx="1362.39" cy="-53.7" r="39.39" gradientTransform="matrix(0.89, -0.45, -0.45, -0.89, -473.7, 640.57)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff" />
<stop offset="0.06" stop-color="#fff" stop-opacity="0.8" />
<stop offset="0.12" stop-color="#fff" stop-opacity="0.62" />
<stop offset="0.19" stop-color="#fff" stop-opacity="0.45" />
<stop offset="0.26" stop-color="#fff" stop-opacity="0.31" />
<stop offset="0.33" stop-color="#fff" stop-opacity="0.2" />
<stop offset="0.41" stop-color="#fff" stop-opacity="0.11" />
<stop offset="0.49" stop-color="#fff" stop-opacity="0.05" />
<stop offset="0.59" stop-color="#fff" stop-opacity="0.01" />
<stop offset="0.72" stop-color="#fff" stop-opacity="0" />
</radialGradient>
<linearGradient id="linear-gradient" x1="472" y1="461.56" x2="872.58" y2="461.56" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fd75a8" />
<stop offset="1" stop-color="#5a2d81" />
</linearGradient>
<linearGradient id="linear-gradient-2" x1="214.61" y1="508.49" x2="166.09" y2="361.12" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-3" x1=&.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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