gsap滚动图片触发摆动动画效果代码
代码语言：html
所属分类：加载滚动
代码描述：gsap滚动图片触发摆动动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
}
.bg {
background: #cad6ca;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: -1;
}
image {
mix-blend-mode: luminosity;
}
section {
display: grid;
align-items: flex-start;
grid-template-columns: 1fr 1fr;
min-height: 60vh;
padding: 0 8%;
overflow: hidden;
padding: 60vh 8% 105vh 8%;
}
svg:not(.bg) {
filter: drop-shadow(0 10px 5px rgba(0, 0, 0, 0.2));
will-change: transform;
}
.one {
width: 30vw;
max-width: 400px;
}
.two {
width: 30vw;
max-width: 400px;
margin-top: 40vh;
margin-left: auto;
}
.three {
width: 30vw;
max-width: 500px;
}
.four {
width: 30vw;
margin-left: auto;
margin-top: 40vw;
}
/* MOBILE */
@media (max-width: 600px) {
section {
grid-template-columns: 1fr;
}
.one, .two, .three, .four {
width: 80%;
max-width: none;
margin-top: 20vh;
}
}
</style>
</head>
<body translate="no" >
<!-- Background from https://www.freepik.com/vectors/background -->
<!-- Cards from https://fr.freepik.com/vecteurs/cadre -->
<!-- Stock photos from Unsplash.com -->
<!--<div class="bg"></div>-->
<section>
<svg class="one" viewBox="0 0 313 313">
<linearGradient id="gradient1" x1="-16.8134" y1="55.9375" x2="329.8133" y2="256.0625">
<stop offset="0" style="stop-color:#5D5147" />
<stop offset="1" style="stop-color:#1E1E1E" />
</linearGradient>
<clipPath id="clip1">
<rect x="10.6" y="8.5" width="291.9" height="295" />
</clipPath>
<rect x="0.5" y="0.5" fill="#F7F7ED" stroke="#ffffff" width="312" height="312" />
<rect x="10.6" y="8.5" fill="url(#gradient1)" width="291.9" height="295" />
<image clip-path="url(#clip1)" href="//repo.bfw.wiki/bfwrepo/image/5d653bd0990d0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_400,/quality,q_90" width="300" />
</svg>
<svg class="two" viewBox="0 0 268.8 343.7">
<clipPath id="clip2">
<rect fill="url(#gradient2)" x="19.6" y="20.3" width="229" height="304" />
</clipPath>
<path fill="#f7f7f0" d="M265.2 340.6c-6.6 8.5-12.4-3.2-23.2-3.2-10.8 0-10.8 4-21.6 4s-10.8-4-21.6-4-10.8 4-21.6 4-10.8-4-21.6-4-10.8 4-21.6 4-10.8-4-21.6-4-10.8 4-21.6 4-10.8-4-21.6-4-10.8 4-21.6 4-10.8-4-21.6-4-16.3 11.7-23 3.2c-8.5-11 3.6-15.2 3.6-29.1 0-14-4-14-4-27.9 0-14 4-14 4-27.9 0-14-4-14-4-27.9 0-14 4-14 4-27.9 0-14-4-14-4-27.9 0-14 4-14 4-27.9 0-14-4-14-4-27.9 0-14 4-14 4-27.9 0-14-4-14-4-27.9 0-14 4-14 4-27.9 0-14-12.1-18.1-3.6-29.1 6.6-8.5 12.4 3.2 23.2 3.2 10.8 0 10.8-4 21.6-4s10.8 4 21.6 4 10.8-4 21.6-4 10.8 4 21.6 4 10.8-4 21.6-4 10.8 4 21.6 4 10.8-4 21.6-4 10.8 4 21.6 4 10.8-4 21.6-4 10.8 4 21.6 4 16.6-11.8 23.2-3.2c8.5 11-3.6 15.2-3.6 29.1 0 14 4 14 4 27.9 0 14-4 14-4 27.9 0 14 4 14 4 27.9 0 14-4 14-4 27.9 0 14 4 14 4 27.9 0 14-4 14-4 27.9 0 14 4 14 4 27.9 0 14-4 14-4 27.9 0 14 4 14 4 27.9 0 14-7 14.7-4 28.4 3.2 14.8 11.9 17.5 3.4 28.6z" />
<linearGradient id="gradient2" x1="-17.6" y1="84.8" x2="285.8" y2="259.9">
<stop offset="0" stop-color="#5d5147" />
<stop offset="1" stop-color="#1e1e1e" />
</linearGradient>
<rect fill="url(#gradient3)" x="19.6" y="20.3" width="229" height="304" />
<image clip-path="url(#clip2)" href="//repo.bfw.wiki/bfwrepo/image/5d653bd0990d0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_400,/quality,q_90" width="230" x="19" />
</svg>
<svg class="three" viewBox="0 0 247.1 247.1">
<clipPath id="clip3">
<path fill="url(#gradient3)" d="M233.5 218.5a15 15 0 01-15 15H28.7a15 15 0 01-15-15V28.7a15 15 0 0115-15h189.8a15 15 0 0115 15v189.8z" />
</clipPath>
<path fill="#e0d1ab" d="M247.1 228.1a19 19 0 01-19 19H19a19 19 0 01-19-19V19C0 8.6 8.6 0 19 0h209.1c10.4 0 19 8.6 19 19v209.1z" />
<linearGradient id="gradient3" x1="-1.7" y1="51.3" x2="248.8" y2="195.9">
<stop offset="0" stop-color="#5d5147" />
<stop offset="1" stop-color="#1e1e1e" />
</linearGradient>
<path fill="url(#gradient2)" d="M233.5 218.5a15 15 0 01-15 15H28.7a15 15 0 01-15-15V28.7a15 15 0 0115-15h189.8a15 15 0 0115 15v189.8z" />
<image clip-path="url(#clip3)" href="//repo.bfw.wiki/bfwrepo/image/5d653bd0990d0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_400,/quality,q_90" width="240" y="-20" />
</svg>
<svg class="four" viewBox="0 0 251.8 251.7">
<clipPath id="clip4">
<rect x="15.8" y="16.3" fill="url(#gradient4)" width="219" height="219" />
</clipPath>
<path fill="#e0d1ab" d="M250.8 250.8c-3.1 3.1-5.8-3.4-10.2-3.4-4.4 0-4.4 4-8.8 4s-4.4-4-8.8-4-4.4 4-8.8 4-4.4-4-8.8-4-4.4 4-8.8 4-4.4-4-8.8-4-4.4 4-8.8 4-4.4-4-8.8-4-4.4 4-8.8 4-4.4-4-8.8-4-4.4 4-8.8 4-4.4-4-8.8-4-4.4 4-8.8 4-4.4-4-8.8-4-4.4 4-8.8 4-4.4-4-8.8-4-4.4 4-8.8 4-4.4-4-8.8-4-4.4 4-8.8 4-4.4-4-8.8-4-4.4 4-8.8 4-4.4-4-8.8-4-4.4 4-8.8 4-4.4-4-8.8-4-4.4 4-8.8 4-4.4-4-8.8-4-7.1 6.5-10.2 3.4C-1.5 247.7 5 245 5 240.6c0-4.4-4-4.4-4-8.8s4-4.4 4-8.8-4-4.4-4-8.8 4-4.4 4-8.8-4-4.4-4-8.8 4-4.4 4-8.8-4-4.4-4-8.8 4-4.4 4-8.8-4-4.4-4-8.8 4-4.4 4-8.8-4-4.4-4-8.8 4-4.4 4-8.8-4-4.4-4-8.8 4-4.4 4-8.8-4-4.4-4-8.8 4-4.4 4-8.8-4-4.4-4-8.8 4-4.4 4-8.8-4-4.4-4-8.8 4-4.4 4-8.8-4-4.4-4-8.8 4-4.4 4-8.8-4-4.4-4-8.8 4-4.4 4-8.8-4-4.4-4-8.8 4-4.4 4-8.8C4.3 6.7-2.3 4 .8.8 4-2.3 6.7 4.3 11.1 4.3s4.4-4 8.8-4 4.4 4 8.8 4 4.4-4 8.8-4 4.4 4 8.8 4 4.4-4 8.8-4 4.4 4 8.8 4 4.4-4 8.8-4 4.4 4 8.8 4 4.4-4 8.8-4 4.4 4 8.8 4 4.4-4 8.8-4 4.4 4 8.8 4 4.4-4 8.8-4 4.4 4 8.8 4 4.4-4 8.8-4 4.4 4 8.8 4 4.4-4 8.8-4 4.4 4 8.8 4 4.4-4 8.8-4 4.4 4 8.8 4 4.4-4 8.8-4 4.4 4 8.8 4 4.4-4 8.8-4 4.4 4 8.8 4 4.4-4 8.8-4 4.4 4 8.8 4S247-2.2 250.1.9c3.1 3.1-3.4 5.8-3.4 10.2 0 4.4 4 4.4 4 8.8s-4 4.4-4 8.8 4 4.4 4 8.8-4 4.4-4 8.8 4 4.4 4 8.8-4 4.4-4 8.8 4 4.4 4 8.8-4 4.4-4 8.8 4 4.4 4 8.8-4 4.4-4 8.8 4 4.4 4 8.8-4 4.4-4 8.8 4 4.4 4 8.8-4 4.4-4 8.8 4 4.4 4 8.8-4 4.4-4 8.8 4 4.4 4 8.8-4 4.4-4 8.8 4 4.4 4 8.8-4 4.4-4 8.8 4 4.4 4 8.8-4 4.4-4 8.8 4 4.4 4 8.8-4 4.4-4 8.8 4 4.4 4 8.8-5.1 5.1-3.9 9.4c2.2 5.9 7.1 7.2 4 10.3z" />
<linearGradient id="gradient4" x1="-4.2" y1="51" x2="254.9" y2="200.5">
<stop offset="0" stop-color="#5d5147" />
<stop offset="1" stop-color="#1e1e1e" />
</linearGradient>
<rect x="15.8" y="16.3" fill="url(#gradient4)" width="219" height="219" />
<image clip-path="url(#clip4)" href="//repo.bfw.wiki/bfwrepo/image/5d653bd0990d0.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_400,/quality,q_90" width="350" y="9" x="-37" />
</svg>
</section>
<!-- SVG -->
<!-- SVG -->
<!-- SVG -->
<svg xmlns="http://www.w3.org/2000/svg" class="bg" viewBox="0 0 750 500" preserveAspectRatio="xMinYMin slice">
<style> .st0{fill:none}.st1{fill:#6e805a}.st2{fill:#89a06a}.st3{fill:#226264}.st4{fill:#2d7c7c}.st5{fill:#2f7f7f}.st6{fill:#1b4c4c}.st7{fill:#fff}.st8{fill:#cad6ca}.st9{fill:#3fa5a2}.st10{fill:#236365}.st11{fill:#308282}.st12{fill:#d89f5b}.st13{fill:#afbfaf}.st14{fill:url(#New_Pattern_Swatch_2)}
</style>
<defs>
<pattern x="77.4" y="-170.9" width="263.8" height="266.6" patternUnits="userSpaceOnUse" id="New_Pattern_Swatch_2" viewBox="0.1 -266.6 263.8 266.6" overflow="visible">
<g>
<rect x=".1" y="-266.6" class="st0" width="263.8" height="266.6"/>
<g>
<path class="st1" d="M56-249.1c.2-.1.2-.3.3-.5.2-1.2.1-2.5-.3-3.7-.8-2.6-2.3-5-4.4-6.8 2.4.6 4.7 1.3 7.1 2.1v2.2a11 11 0 003.8 8.3c.4.3 1.9 1.5 2.4 1.2.2-.1.2-.3.3-.5.2-1.2.1-2.5-.3-3.7a14 14 0 00-4.8-7.1c2.7 1 5.3 2.2 7.8 3.7l.7 1.9c.6 1.4 1.6 2.7 2.8 3.8.8.8 1.8 1.5 2.7 2 1.1.6 4.5 2.4 4.9.1.2-1.5-.8-2.9-1.8-3.9a11.6 11.6 0 00-3.9-3c-1.6-.7-3.2-1.3-4.9-1.6a50.4 50.4 0 00-7-3.4c2.5.4 5.1.2 7.4-.7a7.2 7.2 0 003.1-2c.1-.1.3-.3.2-.5 0-.6-1.9-1.1-2.4-1.2-2-.5-4.2-.1-6.1.5-.9.3-2 1-2.8 1.5l-1.9 1.4c-2.2-.8-4.5-1.4-6.8-2 2.7.1 5.3-.7 7.6-2.1 1.1-.7 2-1.5 2.7-2.5.1-.2.2-.3.1-.5-.2-.6-2.1-.7-2.6-.7a11.1 11.1 0 00-8.4 3.6l-1.6 1.7-5.6-1.3c-.5-.1-.8.7-.3.8l5.8 1.3v1.9a11 11 0 003.8 8.3c.4.5 1.9 1.7 2.4 1.4z"/>
</g>
<g>
<path class="st1" d="M101.3-257.9c.2 6.8-2.9 14.1-9.2 17.4-1.5-4.4-3.4-8.3-3.4-13 0-3.9 1.1-8.1 4.2-10.8.8-.7 1.8-1.3 2.9-1.3 1.8-.1 3.4 1.1 4.3 2.6.8 1.3 1.2 3.2 1.2 5.1z"/>
<path class="st1" d="M115.5-241.2l-4.4.6-2.7.1c-.8 0-1.4-.3-2.2-.3-1.5-.1-3.1-.2-4.5-1a34 34 0 013.8-3.8l1.5-.9 1.8-1.2a14 14 0 016.9-2.2c2.6 0 6.3 1.2 5.4 4.5a5 5 0 01-2.2 2.8c-1 .7-2.2 1.1-3.4 1.4z"/>
<path class="st2" d="M99.5-248.7l-5.7 2.8 1-7.2.1-.2 6.4-2.6v-.6l-6.4 2.6.6-6.1 4.9-2.7-.2-.4-.1-.1a107 107 0 01-4.6 2.6l.3-5.1-.5.1-.3 4.6-2.2-3.2-.4.4 2.5 3.7-.6 6.2-4.7-5.4-.2.6 4.8 5.5-.9 6.9c-1.4-1.5-2.9-2.8-4.4-4.2l.2.9 4.1 4-.8 4.9.6-.4.7-4.2 5.4-2.7.4-.7z"/>
<path class="st2" d="M114.8-245.7l2.1-4.1-.6-.1-2.2 4.3v.1l-6.3 2c.8-1.7 1.6-3.4 2.6-5.1l-.9.4-2.4 4.9-5.3 1.3-.2.2.6.3a82 82 0 005.3-1.3l3 2.3h.9c-1.1-.8-2.2-1.5-3.2-2.4l6.2-2 .1.1 4 2.6.4-.3.1-.1-4-2.6 6-2.4-.3-.5a73 73 0 01-5.9 2.4z"/>
</g>
<g>
<path class="st1" d="M252.1-193.6c-4.1 5.5-10.9 9.3-17.9 8.1 1.5-4.4 2.4-8.7 5.4-12.4a14 14 0 0110-5.9c1.1-.1 2.2.1 3.1.7 1.5 1 2 3 1.8 4.7-.4 1.6-1.3 3.3-2.4 4.8z"/>
<path class="st1" d="M253-171.7c-1.4-.6-2.7-1.5-3.9-2.3l-2.2-1.6-1.5-1.6c-1.1-1-2.4-2.1-2.9-3.5 1.8-.3 3.5-.6 5.3-.7l1.8.2c.7.2 1.5.1 2.2.1 2.4.3 4.8 1.1 6.8 2.6 2.1 1.6 4.3 4.8 1.5 6.9-1 .7-2.3 1-3.5.9-1.3-.1-2.5-.5-3.6-1z"/>
<path class="st2" d="M245-187.5l-6.2-1.3 5.2-5.1.2-.1 6.6 1.9.4-.4-6.6-1.9 4.2-4.4 5.6.8.1-.4v-.1l-5.2-.8 3.4-3.8-.5-.3-3 3.5.3-3.9h-.6l-.3 4.5-4.2 4.5-.4-7.1-.5.4.4 7.3-5 4.9-.9-6-.4.8c.3 1.9.7 3.8.8 5.7l-3.7 3.4.7.1 3.1-2.9 5.9 1.2.6-.5z"/>
<path class="st2" d="M255.3-175.7l4.1-2-.4-.4-4.3 2-.1.1-6.2-2.3 5.2-2.5-1-.2c-1.6.7-3.3 1.5-4.9 2.4l-5-2.2h-.2l.3.6 5 2.2 1 3.6.4.3.3.2-1.1-3.9c2 .8 4 1.6 6.1 2.2v.1l1.5 4.5.5.1h.1l-1.6-4.5c2 .7 4.1 1.2 6.2 1.8l.1-.5c-2.1-.4-4.1-.9-6-1.6z"/>
</g>
<g>
<path class="st1" d="M175.3-90.6c-6.4 2.5-14.2 2.2-19.5-2.6 3.6-3 6.6-6.1 11.1-7.7 3.7-1.4 8-1.8 11.6.2 1 .5 1.8 1.3 2.3 2.3.7 1.6.2 3.6-1 4.9a13 13 0 01-4.5 2.9z"/>
<path class="st1" d="M164.5-71.5c-.8-1.3-1.5-2.7-2.1-4l-1.1-2.5c-.3-.7-.2-1.4-.5-2.1-.4-1.5-.9-3-.6-4.5a43 43 0 014.9 2.2c.6.3.9.7 1.4 1.1.5.5 1.2.8 1.8 1.3 1.9 1.5 3.5 3.5 4.4 5.7.9 2.4 1.1 6.3-2.4 6.6-1.2.1-2.4-.4-3.4-1.1-.9-.7-1.7-1.7-2.4-2.7z"/>
<path class="st2" d="M166-89.1l-4.6-4.3 7.1-1.6h.2l4.6 5.1.6-.2-4.6-5.1 5.9-1.6c1.4 1.2 2.8 2.5 4.3 3.6l.3-.3.1-.1-4-3.4 4.9-1.5-.3-.5-4.4 1.3 2.3-3.2-.5-.2-2.6 3.6-6 1.6 3.4-6.2h-.6l-3.5 6.4c-2.3.6-4.5 1.1-6.8 1.5.9-1.8 1.6-3.7 2.4-5.5l-.8.4c-.7 1.8-1.4 3.6-2.3 5.2l-4.9.9.5.4 4.1-.8 4.4 4.1c.2.3.5.4.8.4z"/>
<path class="st2" d="M168.6-73.7l4.5.5-.2-.6-4.8-.5h-.1l-4.1-5.2 5.7.6-.7-.7-5.4-.5-3-4.5-.2-.1-.1.6c1 1.5 2 3.1 3.1 4.5l-1.1 3.6.2.4.2.4 1.1-3.9c1.3 1.8 2.6 3.5 4 5.1v.1l-1.1 4.6.4.3.1.1 1-4.6 4.3 4.8.3-.4-4.1-4.6z"/>
</g>
<g>
<g>
<path class="st1" d="M7.7-254.9c5 2 9.4 6.5 9.8 12.1-3.7-.2-7.1-.1-10.6-1.6-2.9-1.2-5.6-3.3-6.5-6.4-.3-.8-.4-1.7-.1-2.5a3.9 3.9 0 013.3-2.3c1.2-.2 2.7.1 4.1.7z"/>
</g>
<g>
<path class="st1" d="M24.3-260.1c-.2 1.2-.6 2.4-.9 3.4a12 12 0 01-.8 2c-.2.6-.6.9-.9 1.5-.6 1.1-1.1 2.2-2.1 2.9-.6-1.3-1.2-2.6-1.6-4-.2-.5-.1-.9-.2-1.4 0-.6-.3-1.1-.3-1.7-.3-1.9-.2-3.9.6-5.7.8-1.9 2.8-4.2 5-2.5a4 4 0 011.4 2.5l-.2 3z"/>
</g>
<path class="st2" d="M13.8-250.7l.3 5-5-3-.1-.1.1-5.5-.4-.2-.1 5.5-4.2-2.3a59 59 0 00-.5-4.4h-.3-.1l.5 4.2-3.6-1.8-.1.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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