codepens/gsap-believecollage-animation/dist/index.html

73 lines
2.9 KiB
HTML
Raw Normal View History

2023-10-06 23:12:53 +02:00
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - GSAP Believe - Collage Animation -</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="loader"></div>
<div class="loader"></div>
<div class="loader"></div>
<div class="loader"></div>
<div class="collage-container">
<div id="collage">
<div id="hoverme">Hover me</div>
<!-- top -->
<img id="top-branch-f1" src="https://i.postimg.cc/y8F2yG3P/top-branch-f1.png" alt="">
<div id="top-branch" class='top-branch-container'>
<img id="top-branch-branch" src="https://i.postimg.cc/xTNwc80B/top-branch-branch.png" alt="">
<div id="top-branch-cover"></div>
</div>
<img id="top-branch-f2" src="https://i.postimg.cc/K8XdLbjj/top-branch-f2.png" alt="">
<img id="top-branch-f3" src="https://i.postimg.cc/MG54hjDf/top-branch-f3.png" alt="">
<!-- feather -->
<img id="feather_2" src="https://i.postimg.cc/T1svBWTJ/feather-2.png" alt="">
<img id="feather_3" src="https://i.postimg.cc/qqqdmGH7/feather-3.png" alt="">
<img id="feather_4" src="https://i.postimg.cc/4dBgbSMM/feather-4.png" alt="">
<img id="feather_5" src="https://i.postimg.cc/sDBr7KJ6/feather-5.png" alt="">
<img id="feather_1" src="https://i.postimg.cc/3rfhkz20/feather-1.png" alt="">
<!-- bird -->
<img id="bird" src="https://i.postimg.cc/brsK0N1D/bird.png" alt="">
<!-- left side -->
<img id="left-branch" src="https://i.postimg.cc/QxRrb54X/left-branch.png" alt="">
<img id="left-pine" src="https://i.postimg.cc/W4VcRVcC/left-pine.png" alt="">
<!-- middle -->
<img id="red_mi" src="https://i.postimg.cc/C1v3ffnp/red-mi.png" alt="">
<!-- middle leaves -->
<img id="leaf_1" src="https://i.postimg.cc/zv64xZkd/leaf-1.png" alt="">
<img id="leaf_2" src="https://i.postimg.cc/jjh0t1s5/leaf-2.png" alt="">
<img id="leaf_3" src="https://i.postimg.cc/440CfVTz/leaf-3.png" alt="">
<img id="leaf_4" src="https://i.postimg.cc/rmpbcFnn/leaf-4.png" alt="">
<!-- middle branch -->
<img id="center-branch" src="https://i.postimg.cc/G2h02j2j/center-branch.png" alt="">
<img id="center-branch-big" src="https://i.postimg.cc/GpdV7jk1/center-branch-big.png" alt="">
<!-- right side -->
<img id="right-pine-big" src="https://i.postimg.cc/vBSKmFCQ/right-pine-big.png" alt="">
<img id="right-pine-small" src="https://i.postimg.cc/0yD1HQF7/right-pine-small.png" alt="">
<!-- letter (you can change the text but short one)-->
<div id="letter-container">
<div id="letter">Believe</div>
</div>
<div id="hoverBox"></div>
</div>
</div>
<!-- partial -->
<script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>
<script src='https://assets.codepen.io/16327/SplitText3.min.js'></script>
<script src='https://assets.codepen.io/16327/GSDevTools3.min.js'></script><script src="./script.js"></script>
</body>
</html>