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" preserveAspectRati.........完整代码请登录后点击上方下载按钮下载查看
相似代码
热门代码搜索
其他语言代码库
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