gsap+svg实现视觉差异滚动效果代码
代码语言：html
所属分类：视觉差异
代码描述：gsap+svg实现视觉差异滚动效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
:root {
--sunset: #cae5f7;
}
body {
margin: 0;
padding: 0;
background: #fff;
height: 200vh;
}
p {
position: fixed;
bottom: 2rem;
width: 100%;
text-align: center;
font-family: sans-serif;
opacity: 0.8;
}
svg {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80vw;
max-width: 700px;
background: #182f3e;
border: solid 1px #c5cace;
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
border-radius: 4px;
}
</style>
</head>
<body >
<svg id="parallax" preserveAspectRatio="xMidYMax slice" viewBox="0 0 553.54 369.03">
<defs>
<linearGradient id="linear-gradient" x1="276.77" y1="369.03" x2="276.77" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff" />
<stop offset="1" stop-color="var(--sunset)" />
</linearGradient>
<linearGradient id="linear-gradient-2" x1="236.91" y1="253.58" x2="236.91" y2="199.66" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#afaaaf" />
<stop offset="0.27" stop-color="#cfc7cc" />
<stop offset="0.54" stop-color="#e6dce0" />
<stop offset="0.79" stop-color="#f4e9ed" />
<stop offset="1" stop-color="#f9edf1" />
</linearGradient>
<linearGradient id="linear-gradient-3" x1="220.86" y1="253.58" x2="220.86" y2="199.73" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#a1aaaf" />
<stop offset="0.05" stop-color="#b4afb4" />
<stop offset="0.12" stop-color="#cab4b9" />
<stop offset="0.21" stop-color="#dbb8be" />
<stop offset="0.31" stop-color="#e6bbc1" />
<stop offset="0.46" stop-color="#edbdc3" />
<stop offset="0.87" stop-color="#efbdc3" />
</linearGradient>
<linearGradient id="linear-gradient-4" x1="271.14" y1="245.34" x2="271.14" y2="199.67" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#a1aaaf" />
<stop offset="0.11" stop-color="#b4afb4" />
<stop offset="0.29" stop-color="#ceb5bb" />
<stop offset="0.47" stop-color="#e0b9bf" />
<stop offset="0.66" stop-color="#ebbcc2" />
<stop offset="0.87" stop-color="#efbdc3" />
</linearGradient>
<linearGradient id="linear-gradient-5" x1="431.65" y1="261.67" x2="431.65" y2="160.17" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#a1aaaf" />
<stop offset="0.04" stop-color="#acadb2" />
<stop offset="0.14" stop-color="#c4b3b8" />
<stop offset="0.25" stop-color="#d7b7bd" />
<stop offset="0.39" stop-color="#e5bbc0" />
<stop offset="0.55" stop-color="#edbcc2" />
<stop offset="0.87" stop-color="#efbdc3" />
</linearGradient>
<linearGradient id="linear-gradient-6" x1="463.46" y1="251.08" x2="463.46" y2="167.54" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#a1aaaf" />
<stop offset="0.08" stop-color="#b4b0b5" />
<stop offset="0.22" stop-color="#ceb8bd" />
<stop offset="0.36" stop-color="#e0bec3" />
<stop offset="0.51" stop-color="#ebc1c6" />
<stop offset="0.67" stop-color="#efc2c7" />
</linearGradient>
<linearGradient id="linear-gradient-7" x1="136.56" y1="265.76" x2="136.56" y2="164.35" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#a1aaaf" />
<stop offset="0.87" stop-color="#efbdc3" />
</linearGradient>
<linearGradient id="linear-gradient-8" x1="186.99" y1="264.18" x2="186.99" y2="173.72" xlink:href="#linear-gradient-4" />
<linearGradient id="linear-gradient-9" x1="356.59" y1="305.44" x2="356.59" y2="199.57" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#a1aaaf" />
<stop offset="0.22" stop-color="#a9aaaf" />
<stop offset="0.55" stop-color="#beaaaf" />
<stop offset="0.96" stop-color="#e2aaaf" />
<stop offset="1" stop-color="#e5aaaf" />
</linearGradient>
<linearGradient id="linear-gradient-10" x1="298.67" y1="303.58" x2="298.67" y2="204.25" xlink:href="#linear-gradient-9" />
<linearGradient id="linear-gradient-11" x1="464.42" y1="304.19" x2="464.42" y2="199.57" gradientUnits="userSpaceOnUse">
<stop offset="0.37" stop-color="#bdaaaf" />
<stop offset="0.6" stop-color="#c0aaaf" />
<stop offset="0.77" stop-color="#c9aaaf" />
<stop offset="0.92" stop-color="#d9aaaf" />
<stop offset="1" stop-color="#e5aaaf" />
</linearGradient>
<linearGradient id="linear-gradient-12" x1="435.67" y1="305.44" x2="435.67" y2="204.12" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#a1aaaf" />
<stop offset="0.17" stop-color="#b0acb1" />
<stop offset="0.72" stop-color="#dcb4b9" />
<stop offset="1" stop-color="#edb7bc" />
</linearGradient>
<linearGradient id="linear-gradient-13" x1="276.77" y1="308.48" x2="276.77" y2="205.49" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#a1aaaf" />
<stop offset="0.24" stop-color="#a6a9ae" />
<stop offset="0.51" stop-color="#b4a5aa" />
<stop offset="0.8" stop-color="#cba0a4" />
<stop offset="1" stop-color="#df9b9e" />
</linearGradient>
<linearGradient id="linear-gradient-14" y1="271.86" x2="536.44" y2="271.86" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#afaaaf" />
<stop offset="0.03" stop-color="#a9a6ac" />
<stop offset="0.24" stop-color="#808b96" />
<stop offset="0.45" stop-color="#607685" />
<stop offset="0.65" stop-color="#496679" />
<stop offset="0.84" stop-color="#3b5d72" />
<stop offset="1" stop-color="#365a6f" />
</linearGradient>
<linearGradient id="linear-gradient-15" y1="268.32" x2="553.54" y2="268.32" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#25485a" />
<stop offset="0.06" stop-color="#274a5c" />
<stop offset="0.56" stop-color="#32566a" />
<stop offset="1" stop-color="#365a6f" />
</linearGradient>
<linearGradient id="linear-gradient-16" x1="124.56" y1="113.17" x2="124.56" y2="51.17" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#f9f574" />
<stop offset="0.2" stop-color="#f9f578" />
<stop offset="0.39" stop-color="#f8f683" />
<stop offset="0.58" stop-color="#f8f897" />
<stop offset="0.77" stop-color="#f7fbb2" />
<stop offset="0.96" stop-color="#f5fed5" />
<stop offset="1" stop-color="#f5ffde" />
</linearGradient>
</defs>
<rect id="bg" width="553.54" height="369.03" fill="url(#linear-gradient)" />
<g id="layers">
<circle data-depth='-60' cx="124.56" cy="82.17" r="31" opacity="0.21" fill="#fff" />
<g id="six" data-depth='10'>
<path d="M169.77,224.7s42-6.63,57.15-18.74c11.76-10.1,16-5.39,18.07-3.85s7.14,7.59,14.28,7.31,39.5,27,44.54,27.11-74,21.15-90.59,16.34S169.77,224.7,169.77,224.7Z" fill="url(#linear-gradient-2)" />
<path d="M254.77,218.51c-2-1-3-6-4-6-8.79-1-6.14-9.58-12.54-12.78-2.68.32-6.31,1.94-11.31,6.23-15.13,12.11-57.15,18.74-57.15,18.74s26.89,23.36,43.45,28.17c9,2.61,36.36-2.39,58.72-7.53C267,236,263,226.07,254.77,218.51Z" fill="url(#linear-gradient-3)" />
<path d="M303.81,236.53c-5-.1-37.39-27.4-44.54-27.11s-12.18-5.77-14.28-7.31c-1.21-.88-3.12-2.81-6.76-2.38,6.4,3.2,3.75,11.81,12.54,12.78,1,0,2,5,4,6C263,226.07,267,236,271.94,245.34,290.81,241,306.12,236.57,303.81,236.53Z" fill="url(#linear-gradient-4)" />
<path d="M553.54,179.82c-2.8-1.9-5.64-3.78-8.22-5.76-2-1.53-7.56-7.66-9.74-8-5.14-.89-12.64,9.84-15.76,13.43-5.07,5.85-9.64,12-15.4,17.57-4.53,4.37-10,15.35-16.7,16.7-5.22,1-12.63-4.93-17.09-7.7-6.89-4.28-13.13-8.84-19.52-13.72-5.89-4.48-9.3-9.21-14-14.93-2.61-3.18-6.51-7.61-10.6-9-6.44-2.21-3.8.55-8.59,1.81-10,2.62-9.11-9.51-18.15-10-6.8-.37-12.87,10.46-16.35,15.51-5.4,7.85-12.72,14.48-19.63,21.17-5.51,5.33-12.23,9.24-19.08,12.45-10.68,5-23.36,13-34.94,14.87l39.33,36.67c25.37,0,51.84,2.46,77-1.12,23.26-3.31,46.24-7.88,69.38-12.23,19.56-3.69,38.85-7.41,58.1-12.12Z" fill="url(#linear-gradient-5)" />
<path d="M470.63,206c-6.89-4.28-13.13-8.84-19.52-13.72-5.89-4.48-9.3-9.21-14-14.93-2.61-3.18-6.51-7.61-10.6-9-4.43-1.52-4.56-.69-5.77.39,4.94,1.78,7.54,7.54,9,12.75,6,17,16,30,25,45,6,9.73,15.34,16.11,21.76,24.57l18.91-3.58,10.74-2-19.69-31.62C481.39,213.87,474.75,208.59,470.63,206Z" fill="url(#linear-gradient-6)" />
<path d="M162.42,202.14c-12.66-6.87-25.2-16.23-37.35-24.11-6.32-4.09-9.76-5.52-17.14-3.18-10.23,3.24-9.3.63-16.92-6.15-7.16-6.37-11.07-5-19.06-.52a179.13,179.13,0,0,0-20.68,13.69C43.34,188,32.72,190.42,23.78,195,15.1,199.43,8.68,204.62,0,206.65v58.89c35.13.09,70.29.46,105.41,0,24.42-.34,48.86-2.66,73.48-2.66h54.88c5.76,0,36.38,4.07,39.36-2-19.56-12.14-40-20.76-60.36-32.31C196.16,219.05,179.38,211.35,162.42,202.14Z" fill="url(#linear-gradient-7)" />
<path d="M212.77,228.5c-16.61-9.45-33.39-17.15-50.35-26.36-12.66-6.87-25.2-16.23-37.35-24.11-6.32-4.09-9.76-5.52-17.14-3.18-3.31,1.05-5.44,1.48-7.08,1.36.84.24,1.46.69.92,2.3,5,0,10-1,14,1,8,4,5,16,11,22,16.77,19.57,35.28,36.54,45,61.41,2.37,0,4.74-.07,7.12-.07h54.88c5.76,0,36.38,4.07,39.36-2C253.57,248.67,233.1,240.05,212.77,228.5Z" fill="url(#linear-gradient-8)" />
</g>
<g id="five" data-depth='20'>
<path d="M553.54,200.28c-.26.1-.53.2-.79.28-5,1.64-9.53,1.63-14.75,1.62-11.64,0-23.07.22-34.41-1.31-6.52-.89-17.14-2.55-23.14.28-3.63,1.71-5.06,5-9.36,6.39-2.92,1-6.84.92-9.94,1.31a130,130,0,0,1-15.31.66c-6.49,0-8.38,1.61-14,4.65a192.13,192.13,0,0,1-28.88,12.13c-17.75,6-31-5.33-47.27-9.59-13.46-3.52-22.39-13.47-37-12.52-14.22.92-21.45,11.68-33.47,17.84-9.17,4.69-19.94,6.56-29.71,9.53s-19.21,6.9-28.92,10.33c-10.09,3.56-20.13,7.2-30.52,10.47-8,2.52-16.17,4.22-24.29,6.49-3.85.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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