-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
18 lines (17 loc) · 3.75 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<script src="https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js"></script>
<link rel="stylesheet" href="./css/styles.css">
<body>
<div id="container">
<div class="big-spacer"></div>
<div id="subject"></div>
<svg id="visual" viewBox="0 0 1920 1080" style="transform:scaleY(-1); top:0; z-index: 1000; position:relative" width="100%" height="30vh" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="none">
<path style="--direction: 2.0" class="move-down" d="M0 388L26.7 347.8C53.3 307.7 106.7 227.3 160 199.8C213.3 172.3 266.7 197.7 320 203.3C373.3 209 426.7 195 480 184.5C533.3 174 586.7 167 640 184C693.3 201 746.7 242 800 275.5C853.3 309 906.7 335 960 343.7C1013.3 352.3 1066.7 343.7 1120 306.2C1173.3 268.7 1226.7 202.3 1280 178.5C1333.3 154.7 1386.7 173.3 1440 177.8C1493.3 182.3 1546.7 172.7 1600 190C1653.3 207.3 1706.7 251.7 1760 284.2C1813.3 316.7 1866.7 337.3 1893.3 347.7L1920 358L1920 0L1893.3 0C1866.7 0 1813.3 0 1760 0C1706.7 0 1653.3 0 1600 0C1546.7 0 1493.3 0 1440 0C1386.7 0 1333.3 0 1280 0C1226.7 0 1173.3 0 1120 0C1066.7 0 1013.3 0 960 0C906.7 0 853.3 0 800 0C746.7 0 693.3 0 640 0C586.7 0 533.3 0 480 0C426.7 0 373.3 0 320 0C266.7 0 213.3 0 160 0C106.7 0 53.3 0 26.7 0L0 0Z" fill="#1a736d"></path>
<path style="--direction: 1.8" class="move-down" d="M0 113L26.7 108.3C53.3 103.7 106.7 94.3 160 125.3C213.3 156.3 266.7 227.7 320 229.3C373.3 231 426.7 163 480 151.7C533.3 140.3 586.7 185.7 640 217C693.3 248.3 746.7 265.7 800 254.5C853.3 243.3 906.7 203.7 960 197.3C1013.3 191 1066.7 218 1120 218.2C1173.3 218.3 1226.7 191.7 1280 184.8C1333.3 178 1386.7 191 1440 204.5C1493.3 218 1546.7 232 1600 246.5C1653.3 261 1706.7 276 1760 254.3C1813.3 232.7 1866.7 174.3 1893.3 145.2L1920 116L1920 0L1893.3 0C1866.7 0 1813.3 0 1760 0C1706.7 0 1653.3 0 1600 0C1546.7 0 1493.3 0 1440 0C1386.7 0 1333.3 0 1280 0C1226.7 0 1173.3 0 1120 0C1066.7 0 1013.3 0 960 0C906.7 0 853.3 0 800 0C746.7 0 693.3 0 640 0C586.7 0 533.3 0 480 0C426.7 0 373.3 0 320 0C266.7 0 213.3 0 160 0C106.7 0 53.3 0 26.7 0L0 0Z" fill="#006084"></path>
<path style="--direction: 2" class="move-down" d="M0 156L26.7 165.2C53.3 174.3 106.7 192.7 160 190.8C213.3 189 266.7 167 320 151.5C373.3 136 426.7 127 480 134.5C533.3 142 586.7 166 640 180.2C693.3 194.3 746.7 198.7 800 204.5C853.3 210.3 906.7 217.7 960 219.3C1013.3 221 1066.7 217 1120 213.3C1173.3 209.7 1226.7 206.3 1280 203.2C1333.3 200 1386.7 197 1440 189.7C1493.3 182.3 1546.7 170.7 1600 162.7C1653.3 154.7 1706.7 150.3 1760 146.8C1813.3 143.3 1866.7 140.7 1893.3 139.3L1920 138L1920 0L1893.3 0C1866.7 0 1813.3 0 1760 0C1706.7 0 1653.3 0 1600 0C1546.7 0 1493.3 0 1440 0C1386.7 0 1333.3 0 1280 0C1226.7 0 1173.3 0 1120 0C1066.7 0 1013.3 0 960 0C906.7 0 853.3 0 800 0C746.7 0 693.3 0 640 0C586.7 0 533.3 0 480 0C426.7 0 373.3 0 320 0C266.7 0 213.3 0 160 0C106.7 0 53.3 0 26.7 0L0 0Z" fill="#004384"></path>
<path style="--direction: 1.8" class="move-down" d="M0 133L26.7 118.2C53.3 103.3 106.7 73.7 160 64.8C213.3 56 266.7 68 320 65.2C373.3 62.3 426.7 44.7 480 39.7C533.3 34.7 586.7 42.3 640 44.8C693.3 47.3 746.7 44.7 800 39.3C853.3 34 906.7 26 960 34.3C1013.3 42.7 1066.7 67.3 1120 89.5C1173.3 111.7 1226.7 131.3 1280 130.2C1333.3 129 1386.7 107 1440 96C1493.3 85 1546.7 85 1600 86C1653.3 87 1706.7 89 1760 94.7C1813.3 100.3 1866.7 109.7 1893.3 114.3L1920 119L1920 0L1893.3 0C1866.7 0 1813.3 0 1760 0C1706.7 0 1653.3 0 1600 0C1546.7 0 1493.3 0 1440 0C1386.7 0 1333.3 0 1280 0C1226.7 0 1173.3 0 1120 0C1066.7 0 1013.3 0 960 0C906.7 0 853.3 0 800 0C746.7 0 693.3 0 640 0C586.7 0 533.3 0 480 0C426.7 0 373.3 0 320 0C266.7 0 213.3 0 160 0C106.7 0 53.3 0 26.7 0L0 0Z" fill="#2d1a73"></path>
</svg>
<div class="big-spacer"></div>
<div id="box"></div>
</div>
</body>