-
Notifications
You must be signed in to change notification settings - Fork 61
/
index3.html
49 lines (49 loc) · 3.31 KB
/
index3.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
49
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Morphing Page Transition | Demo 3</title>
<meta name="description" content="A page transition where one SVG path is morphed into another" />
<meta name="keywords" content="page transition, svg, morph, path, javascript, web design, web dev" />
<link href="https://fonts.googleapis.com/css?family=Nunito:400,700|Chewy" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="pater/pater.css" />
<script>document.documentElement.className = 'js';</script>
</head>
<body class="demo-3 loading">
<main>
<div class="content content--intro">
<div class="frame">
<nav class="demos">
<a class="demo" href="index.html"><span>Demo 1</span></a>
<a class="demo" href="index2.html"><span>Demo 2</span></a>
<a class="demo demo--current" href="index3.html"><span>Demo 3</span></a>
<a class="demo" href="index4.html"><span>Demo 4</span></a>
</nav>
</div>
<div class="content__inner">
<h2 class="content__title">The Pink Balloon</h2>
<h3 class="content__subtitle">Candy Artisans</h3>
<a href="#" class="enter">enter</a>
</div>
<div class="shape-wrap">
<svg class="shape" width="100%" height="100vh" preserveAspectRatio="none" viewBox="0 0 1440 800" xmlns:pathdata="http://www.codrops.com/">
<path d="M 73.3,178.6 C 101.7,363.8 76.38,735 118.7,813.8 161,892.7 327.3,946.7 381.1,853.3 434.9,759.9 427.2,488.9 436.8,341.5 443.3,241.3 447.3,33.05 516.1,36.19 574.9,38.88 611.6,214.9 622.3,429.7 633,644.6 614.7,796.1 688.1,849 761.6,901.8 860.7,873.7 897.6,850 982.3,795.5 951.2,639.3 961.1,506.1 970.9,372.9 958.5,43.53 1023,43.47 1063,43.43 1085,173.6 1095,370.7 1105,567.8 1082,804.3 1165,842.6 1197,857.5 1304,901 1342,833 1380,765 1354,413.7 1379,156.2 1407,-137.5 1719,-12.96 1719,-12.96 L -53.5,-44.66 C -53.5,-44.66 44.91,-6.65 73.3,178.6 Z" pathdata:id="M 105.3,190.6 C 159.7,353.8 143.2,774.2 149.1,779.5 155,784.8 159.4,782 164.8,778.2 170.2,774.4 168.9,242.8 240.3,125 311.7,7.205 430.7,2.307 564.2,13.56 707.9,25.67 806,166.3 800.5,376 804.7,587.3 801.2,773.9 807.1,782.7 813,791.4 816.8,792.7 821.4,786 826.4,778.8 819.4,566.3 820.3,498.1 821.2,429.9 781.4,95.51 992.5,74.58 1108,63.14 1235,166.4 1250,359.4 1265,552.4 1248,763.7 1271,781.4 1277,786 1281,786.2 1286,779.7 1292,773.2 1260,251.3 1355,103.9 1441,-30.35 1610,-117.6 1610,-117.6 L -110.1,-132.3 C -110.1,-132.3 50.91,27.35 105.3,190.6 Z"></path>
</svg>
</div>
</div><!-- /content -->
<div class="content content--fixed">
<div class="content__inner">
<p class="content__text">Since 1968 The Pink Balloon manufactures artisan candy in a traditional way with only natural, locally sourced ingredients. <a href="#">Visit the candy shop →</a></p>
<a class="next-demo" href="index4.html">Next demo <svg class="icon icon--arrow-right"><use xlink:href="#icon-arrow"></use></svg></a>
</div>
</div>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/charming.min.js"></script>
<script src="js/anime.min.js"></script>
<script src="js/demo3.js"></script>
</main>
</body>
</html>