gsap实现视觉差异滚动动画页面效果代码
代码语言：html
所属分类：视觉差异
代码描述：gsap实现视觉差异滚动动画页面效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Parallax scroll animation</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body,
html{
margin: 0;
padding: 0;
height: 100%;
}
svg {
display: block;
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
}
.scrollElement {
position: absolute;
height: 6000px;
width: 100px;
top: 0;
z-index: 0;
}
.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:hover {
background: #ffffff;
color: #1B1734;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 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="-35" 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..........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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