-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
48 lines (43 loc) · 2.45 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - ScrollTrigger: SVG Text Mask</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<!-- This is a recreation of Unfold's (https://dribbble.com/unfold) parallax scene: https://cdn.dribbble.com/users/14268/screenshots/3275340/northface.gif -->
<div class="scrollDist"></div>
<div class="main">
<svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg">
<mask id="m">
<g class="cloud1">
<rect fill="#fff" width="100%" height="801" y="799" />
<image xlink:href="https://assets.codepen.io/721952/cloud1Mask.jpg" width="1200" height="800" />
</g>
</mask>
<image class="sky" xlink:href="https://assets.codepen.io/721952/sky.jpg" width="1200" height="590" />
<image class="mountBg" xlink:href="https://assets.codepen.io/721952/mountBg.png" width="1200" height="800" />
<image class="mountMg" xlink:href="https://assets.codepen.io/721952/mountMg.png" width="1200" height="800" />
<image class="cloud2" xlink:href="https://assets.codepen.io/721952/cloud2.png" width="1200" height="800" />
<image class="mountFg" xlink:href="https://assets.codepen.io/721952/mountFg.png" width="1200" height="800" />
<image class="cloud1" xlink:href="https://assets.codepen.io/721952/cloud1.png" width="1200" height="800" />
<image class="cloud3" xlink:href="https://assets.codepen.io/721952/cloud3.png" width="1200" height="800" />
<text fill="#fff" x="350" y="200">EXPLORE</text>
<polyline class="arrow" fill="#fff" points="599,250 599,289 590,279 590,282 600,292 610,282 610,279 601,289 601,250" />
<g mask="url(#m)">
<rect fill="#fff" width="100%" height="100%" />
<text x="350" y="200" fill="#162a43">FURTHER</text>
</g>
<rect id="arrowBtn" width="100" height="100" opacity="0" x="550" y="220" style="cursor:pointer" />
</svg>
</div>
<!-- partial -->
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollTrigger.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollToPlugin3.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js'></script><script src="./script.js"></script>
</body>
</html>