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="57.65" y1="508.01" x2="448.08" y2="508.01" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-4" x1="193.48" y1="508.3" x2="761.05" y2="508.3" xlink:href="#linear-gradient" />
</defs>
<rect id="bg" width="750" height="500" opacity="0.8" fill="url(#bg_grad)" />
<g id="clouds" fill="#fefefe">
<path id="cloud4" transform='translate(600 0)'
d="M402.34,341.68c9.9-10.24,23.76-7.43,36.05-5.48C448,332,458.88,329,468.9,334c-.95-7.91,8.65-14.92,15.9-11.61-3.34-11.77,13-13.9,20.53-8.34A13.53,13.53,0,0,1,522,310.16c2.64-18.11,27.85-24.13,38.38-9.17,3.54-5.51,12.12-6.88,17.2-2.74,6.59-43.22,70.78-27.93,65.83,12.62,14.7-4.43,32,6.72,34.08,21.93,5.76-2.23,29.28,1,21.76,9.26" />
<path id="cloud3" transform='translate(600 0)'
d="M382.94,363.16c-7-10.5-18.72-9.06-28.19-4.53-12.19-6.71-26.73-11.74-39.62-3.13,1-15.45-18-25.51-28-12.41-14.59-29.67-56.68-34.41-72-3.09-1.41,4-4.73,6.07-8.1,2.88-23.13-25.66-57.12-30.25-67.73,8.21-13.05-1.88-33.42-9.15-37.47,10.07a38.08,38.08,0,0,0-36.36,2.11" />
<path id="cloud2" transform='translate(-600 0)'
d="M506.86,233.56c9.62-3.21,23.27-4,33.88-2.17,0-5.7,10.4-6.68,14-3.58,10.32-12.45,29.93-5.12,40.08,0,10.06-6.52,27.67-9.72,33.93,2.42,5.53-.13,15.88-3.23,18.8,2.94a31.53,31.53,0,0,1,18.21.64" />
<path id="cloud1" transform='translate(-600 0)'
d="M402.18,271.3c-7.57-7.46-18.46-7.52-28.05-5.3-6.75-8.79-20.54-13.18-27.24-1.45-10.4-11.06-30.66-24.2-37.74-2.24a13.1,13.1,0,0,0-17.76,1.47c-11.23-25.69-58.46-41.29-64.24-4.06-9-8.26-20.15-2.62-27.47,4.4-11-2.87-22.18-7.58-31.72,2.7-8.44-.75-18.1-2.8-24.71,4.57" />
</g>
<!-- SCENE 2 -->
<g id="scene2">
<g id="bats" style="opacity: 0;">
<path
d="M486.65,187a9.22,9.22,0,0,1-4.29,6.38l-.06-.06c-.05-1.13-.06-2.62-.94-3.52a3.34,3.34,0,0,1,.15,1.63,1.9,1.9,0,0,0-1.66-.09,3.31,3.31,0,0,1,.33-1.61c-1,.81-1.05,2.22-1.37,3.38-3.9-5.13-5.67-10.29-13.64-9.74,5.67,3.29,5.9,10.62,12.85,11.87.09,6.46,4.06,6.69,4.88.28l-.2.1.18-.35c0,.08,0,.16,0,.25,7-.48,8.08-7.73,14.09-10.38A22.64,22.64,0,0,0,486.65,187Z"
fill="#112129" />
<path
d="M390.93,226.87c2.22,2.08,2,4.89.48,7.24,1.83-1.75,8.12,2.24,7,4.89,2.51-4.08,4.36.31,5.85,2.31,1.26-2.7,3.68-6,5.7-2.13-.93-2.73,5.66-6.2,7.34-4.32-3.67-5.08,3.49-10.18,7.21-7.31-.39-.7-4.61-4.33-12.39-3.17,3.63,5.77-3.22,9.07-5.56,9.51a2.88,2.88,0,0,0-.64-2.28c-.36.36-.32,1.06-.52,1.48a7.6,7.6,0,0,0-2.13-.14c0-.42-.15-1.09-.5-1.32a4,4,0,0,0-.68,2.32c-2.39-.72-8.67-4.51-4.66-9.87-7.67-1.78-12.17,1.51-12.61,2.17C385.25,225.74,389.24,225.21,390.93,226.87Z"
fill="#112129" />
<path
d="M430.89,152.88c-4.51,1.05,1.45-4.11-8.29-4.45-.47-4.18-5.81-4.39-8.89-5.1,2.82-2.94,8.14-3.47,12.12-3.3,2.3.49,6.16.37,7.5,2.31-1,3,4.29,12,5.26,5.94,2.05,3.21,5,.12,4.19,2-.45.53-1,2.54.08,2.34,4.46-.88,5.75-6.35,8.69-8.63,4.73-.13,12,1,13.29,6.25-5.84-2.77-7.67-2.4-10.21,2.8-2.93-.77-5.74.92-7.26,3.33-3.3-2.2-7.59.35-11,2.2.05-1.76-.79-4.15-2.71-4.6C433.18,152.94,431.88,152.9,430.89,152.88Z"
fill="#112129" fill-rule="evenodd" />
<path
d="M538.33,214.5s-2.52,6.57,2.07,7.47c-1.53.45-4.23,3.88-2.25,6.85-2.2-1.83-10.48,6.4-8.65,8.74-1.4-2.25-4.54-1.85-4.77,1-1.07-3.42-2.36-1.61-2.34.63-1.16-3.75-4.22-1.39-4.6.9-.4-5.23-9.49-5.18-11.89-3.51,1.45-2.79-2-6.28-4.59-5.95,0,0,1.62-5.85-3.43-7.48,6.16-3.41,16.13,10,22.07,8.92a8.47,8.47,0,0,1-.9-4.23l1.53,1.71,1.27-.09,1-2.7C525.28,238.88,530.76,216.88,538.33,214.5Z"
fill="#112129" />
<path
d="M458.17,279.73c3.54.59,5.51,4.7,2.22,7.27,2.87-.72,4,4.71,2.47,5.94,4.88-1.34,9.07,5.6,8.25,9.17,3-1.07,4.18,4.15,3.52,5.52.89-1.82,3.82-5.49,5.73-1.71,2.43-5,7.84-6,12.35-3.64-1.94-4.42,4-5.2,6.22-3.91-1.29-3.74,1.35-5.73,4.78-4.66-7.88-8.5-15.53-.91-22.4,2.76a30.2,30.2,0,0,0,1-3.23l-4.33,3-1.56-5-.89,2.8C471.29,286,471.52,277,458.17,279.73Z"
fill="#112129" />
</g>
<g id="hills2">
<path id="h2-6" d="M524.28,418.82c6.36,0,80.19-14.81,103.12-36.53S655.28,345.8,679,359.64s33.69,18.54,46.63,18.82a158.62,158.62,0,0,1,23.88,2.4V447L632,458.92Z" fill="url(#lg4)" />
<path id="h2-5" d="M294.06,498.2l49.09-66.93s-64-6.48-93.59-31.29-63.47-49.78-87.15-41.46-81.7,4.44-98.73,15S.1,387.08.1,387.08l.37,60.18L209.75,498.2Z" fill="url(#lg5)" />
<path id="h2-4" d="M264.94,449.2s61-16.39,94.07-37.28,61.37-37.2,73.53-36.12,69.9-40,80.18-42.62,13.55-.37,29,1.85,22-5.27,34.52,6.39,43.29,34.86,75.51,48.52c25.88,11,91.48,28.88,91.48,28.88l-31.58,67.73-326.93,9.27Z" fill="url(#lg6)" />
<path id="h2-3" d="M.47,469.58V420s113.73-2.74,171.72-26.68,101.69-72.29,134.53-52,31.37-18.48,61.9,13.28S446.68,393.48,478,406.86s113.08,26.06,113.08,26.06l-59.28,53.4L272.55,485Z" fill="url(#lg7)" />
<path id="h2-2" d="M749.55,500V398.27l-38.48-6.67s-29.86,12.13-63,11.53-39.61-7.26-70.33-13.41-72.58,21.4-105.61,21.4-75.5-17.78-110.64-17.78c-24.85,0-90.08,20.12-110.82,18.48s-51.11-20.42-82-6.26S.47,409.26.47,409.26V500Z"
fill="url(#lg8)" />
<path id="h2-1" style="opacity: 0;"
d="M746.51,371.43c-.18-1,1.74,1.28,2.2.27s2,1.37,2.14.37c.81-3.64.32-8.56-3.75-10.12-2.88-2.18,1.15-.54,2.06-.18,1.1,1.1-.4-4.74,1.86-1.95,2.17-10.09-3.87-8.35-11-11.08-6.32-4.83-1.32-3.94,1.19-.09,1.46,1.73,1.64-.55.82-1.91s1.92-.46,3.1,1.09c2,1.29,2.67-3.2,5.88,1.26-.68-1.81,1.09-6-.76-7,1.21-2.4.59-2.67-3.16-1.1-7.28.94-11.31-9.61-1.41-3-3.86-9,7.46,5.89,5.33-7.74-2.64,1.73-1.42.9-.67-1.37-1.62-.72-15,7.23-12.15-1.46.64-1.28,1,0,2,.73,1.69-5.55,4.78,5.68,3.45-2.56,12-4-1.25-3,7.36-5.61-1.11-2.6-3.43-2.45-.21-5.78-2.64.43-9.82,5.81-12.61,7.75.24-1.15.51-4,3-4.1.6-7.23.24-7-3.46-.64-.74-4.79,3.91-8.88,8.68-7.83-5.28-1.79-2.56-2.09-1-7-6.52,6.54-3.66-4.45-6.7,7,.48-3.06-1.28-4,1.22-7.47,4.44-10.76-3.3,8.72-3.29-7.83-1,.43-.73,6.12-.79,7.07-3-.8-1.7-.34-.69,1.7-1.43,1.17-.74,1.27.8,2.49.74,4.27-2,1.08-3.36-.88-4.35-6.05-.4,2.13-2.72.12-1.24-1.36-4-3.95-3.43-2.14,4.91,4.75.6,3.52,1.19,5.61,1.41.16,4.51-1.36,3.39-.25-5.76,.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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