73 lines
2.9 KiB
HTML
73 lines
2.9 KiB
HTML
<!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>
|