-
Notifications
You must be signed in to change notification settings - Fork 14
/
index.html
executable file
·80 lines (77 loc) · 8.47 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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<html>
<head>
<meta charset="utf-8">
<title>Scrollytelling</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="graphic">
<div id="sections">
<section class="step" style="margin-bottom:150px">
<h1>Scrollytelling Demo</h1>
<p><a href="https://github.com/stitchfix/hello-scrollytelling">source repo on github</a></p>
</section>
<section class="step">
<i>Section 1 text</i>: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis tincidunt risus, a ornare lorem. Etiam lacinia venenatis mollis. Maecenas dignissim sed eros in iaculis. Nulla efficitur imperdiet risus, sed ultrices sem posuere sit amet. Donec nunc turpis, porttitor at rhoncus sed, placerat nec lectus. Nulla vehicula vulputate nisi, vel vehicula augue vulputate nec. Sed vel felis sed urna convallis tristique sit amet sed turpis. Donec mattis et augue aliquam.
</section>
<section class="step">
<i>Section 2 text</i>: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non condimentum arcu. Donec pellentesque enim sit amet faucibus sagittis. Sed euismod vel risus ac bibendum. Aenean venenatis arcu sed semper dignissim. Nam consequat arcu velit, vitae malesuada nisl vestibulum ut. Suspendisse id leo magna. Morbi eu nunc nec turpis convallis.
</section>
<section class="step">
<i>Section 3 text</i>: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id tempus magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin quis nibh a leo.
</section>
</div>
<div id="vis">
<!--
Note: Copied from hello-world.svg, with display attributes and inline styles
added to groups to turn them off by default. Also note that in the math text,
the spaces must be replaced with
-->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 660 500" enable-background="new 0 0 660 500" xml:space="preserve">
<g display="none" style="opacity:0" id="sun">
<circle fill="none" stroke="#000000" stroke-miterlimit="10" cx="238.4" cy="129.4" r="26.4"/>
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M214.8,105.2C214,103,214,100,212,98c-4-3-5-8-9-12c-1-1-3-2-4.9-1.8"/>
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M231.4,96.9c-2.1-4.2-2.5-7.2-2.6-11.9c0-2-1.8-11.4-3.4-11.5"/>
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M247.5,97.4c1.5-4.1,2.9-10.9,5.9-14.1c2.9-3.1,7.8-2.1,8.3-7.6"/>
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M260.2,105.3C264,99,269,96,276,95c2,0,4-2,5-3.8"/>
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M268.4,118.3c3.7-1.5,7.7-1.7,11.6-0.9c4.8,1.1,8.8,0.2,13.5-1.4"/>
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M271.4,133.6c4.6,0.9,8.4,3.9,12.8,5.3c3.9,1.2,9.2,0,12.1,3.5"/>
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M264.9,149c0.1,6,5.1,9,9.1,13c4,3,8,6,11.8,10.2"/>
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M252,157.1c1.9,4.7,1,9.7,2.5,14.5c0.5,1.4,4.4,12.1,2.6,12"/>
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M236.2,161.4c0.8,7.6-1.2,15.6-4.5,23.4"/>
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M221,156.5c-3.1,3-4.5,7.4-7.6,10.4c-3.1,3-7.8,3.1-11,6.3"/>
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M211.6,147.5c-4.3,0.2-6.8,3.3-10.3,5.4c-3.6,2.2-6.5,3.2-9.3,6.7"/>
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M207.2,135.4c-3.2-0.1-6.4-0.2-9.6-0.3c-1,0-2-0.1-2.9,0.3c-1.1,0.4-2,1.3-3.1,1.9c-2.4,1.4-5.5,1.3-7.8-0.2"/>
<path fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M206.6,121.1c-3.3-0.3-6.5-1.2-9.6-2.1c-4.8-1.4-9.5-2.7-14.2-4.5c-0.7-0.3-1.5-0.6-2.2-0.9"/>
</g>
<g display="none" style="opacity:0" id="landscape">
<path fill="#FFFFFF" d="M0,500.2l0-180.5c38.9-2.6,70.6-4.8,108.7,0.8c13.4,2,26.4,4.9,39.9,6.9c14.1,2,28.6,2.9,43.1,2.8c13.5,0,27-0.7,40-2.8c27.8-4.4,53.9-15,82.4-14.1c13.1,0.4,25.8,3.2,38.4,5.5c39.8,7.2,81.3,9.4,122.6,10.7c61.6,1.9,123.3,1.9,184.9,0l0,170.7H0z"/>
<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M660,329.5c-61.6,1.9-123.3,2-184.9,0c-41.3-1.3-82.8-3.5-122.6-10.7c-12.7-2.3-25.3-5.1-38.4-5.5c-28.6-0.9-54.7,9.7-82.4,14.1c-13.1,2.1-26.6,2.8-40,2.8c-14.5,0-29-0.8-43.1-2.8c-13.4-1.9-26.5-4.9-39.9-6.9c-38.1-5.6-69.8-3.3-108.7-0.8"/>
<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M449.5,254c-2,1.7-3.1,4.4-2.8,7c-3,0.2-6.1,1.7-7.7,4.2c-1.7,2.6-1.7,6.2,0.2,8.6c-1.7,2.9-3.1,6.2-2.6,9.5c0.5,3.3,3.4,6.4,6.7,6.1c-0.6,2.2,0.6,4.5,2.5,5.8c1.8,1.3,4.2,1.7,6.4,1.9c1.7,0.2,3.7,0.1,4.5-1.4c2.3,1.9,4.7,3.9,7.6,4.7s6.4,0,7.9-2.6c2.6,1.3,5.7,1.6,8.5,0.6c2.8-1,5.1-3.1,6.3-5.8c3.2-0.1,6.5-1.3,8.7-3.6c2.2-2.4,3.1-6,1.9-8.9c-0.1-0.3-0.3-0.6-0.3-0.9c0-0.4,0.2-0.7,0.4-1c1.1-2,1.9-4.3,1.8-6.6c-0.1-2.3-1.2-4.7-3.2-5.8c0.2-2.5,0.2-5.6-2.1-6.7c-0.7-0.3-1.5-0.4-2.3-0.5c-1.4-0.1-2.8-0.2-4.2-0.4c0.2-1.1,0.4-2.3,0.6-3.4c0-0.3,0.1-0.6-0.1-0.9c-0.2-0.3-0.5-0.4-0.9-0.5c-2.5-0.6-5.2-0.5-7.7,0.2c-1.1-2.6-3.1-4.9-5.9-5.4c-2.7-0.5-5.9,1.4-6,4.2c-1.1-1-2.2-1.9-3.5-2.5c-1.3-0.6-3-0.6-4.2,0.2c-1.9,1.3-2,2.5-4.4,2.3C453.4,252.2,451.3,252.5,449.5,254z"/>
<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M450.5,297.1c2.5,3.8,7.2,8.4,11.3,10.4c1.2,0.6,2.5,1.1,3.1,2.3c0.7,1.3,0.4,2.8,0.3,4.2c-0.1,1.5,0.2,3,0.2,4.5c-0.1,3-1.5,5.9-3.8,7.8c-1.5,0.7-2.8,1.8-3.9,3.1"/>
<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M454.2,297c2.9,2.4,6,6.3,9.1,6.7c0.1,0,0.3,0,0.4-0.1c0.1-0.1,0.1-0.3,0.1-0.4c0-0.9-0.2-1.7-0.5-2.5"/>
<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M472.6,299.8c-1.5,3.1-0.8,7.9-0.5,11c0.2,2.2,0.5,4.4,0.7,6.7c0.1,1.4,0.3,2.7,0.6,4c0.5,2,1.4,3.8,2.4,5.6c-0.2,0.8,0.2,1.7,1,2.1"/>
</g>
<g display="none" style="opacity:0" id="hello-world-math">
<text transform="matrix(1 0 0 1 337.001 138.4053)"><tspan x="0" y="0" font-family="'CMUSerif-Italic'" font-size="30px">h</tspan><tspan x="15.3" y="0" font-family="'CMUSerif-Italic'" font-size="10px"> </tspan><tspan x="18.9" y="0" font-family="'CMUSerif-Roman'" font-size="30px">=</tspan><tspan x="42.2" y="0" font-family="'CMUSerif-Roman'" font-size="10px"> </tspan><tspan x="45.6" y="0" font-family="'CMUSerif-Roman'" font-size="30px">110 </tspan><tspan x="100.6" y="0" font-family="'CMUSerif-Italic'" font-size="30px">w π</tspan><tspan x="169.8" y="0" font-family="'CMUSerif-Italic'" font-size="10px"> </tspan><tspan x="173.4" y="0" font-family="'CMUSerif-Roman'" font-size="30px">|</tspan><tspan x="181.7" y="0" font-family="'CMUSerif-Italic'" font-size="30px">d</tspan><tspan x="197" y="0" font-family="'CMUSerif-Italic'" font-size="10px"> </tspan><tspan x="200.6" y="0" font-family="'CMUSerif-Roman'" font-size="30px">|</tspan></text>
<g>
<path d="M476.2,123.2c4.3,0.8,8.1,4.5,8.1,9.2c0,4.5-3.8,8.3-8.1,9.1v6c0,3.3-0.8,8.3-5.4,8.3c-2,0-2.8-1.3-2.8-2.6 c0-1.1,0.9-1.7,1.7-1.7c0.7,0,1.5,0.4,1.5,1.4c0,0.8-0.4,0.7-0.4,1.2c0,0.3,0.2,0.5,0.5,0.5c1.9,0,3-2.6,3-6.8v-6.2 c-4.7-0.6-8.7-4.4-8.7-9.1c0-4.7,4.2-8.5,8.7-9.2v-5.6c0-3.3,0.2-9,5.1-9c2,0,2.8,1.3,2.8,2.6c0,1.1-0.9,1.7-1.7,1.7 c-0.7,0-1.5-0.4-1.5-1.4c0-0.8,0.4-0.7,0.4-1.2c0-0.3-0.2-0.5-0.5-0.5c-2.1,0-2.8,3-2.8,7.3V123.2z M474.4,124.8 c-3.6,0.7-7.1,3.8-7.1,7.6s3.5,6.9,7.1,7.5V124.8z M476.2,139.9c3.5-0.7,6.5-3.9,6.5-7.5c0-3.8-3.1-6.8-6.5-7.6V139.9z"/>
</g>
</g>
<g display="none" style="opacity:0" id="hello-world-text">
<text transform="matrix(1 0 0 1 337.001 138.4053)" font-family="'Courier New'" font-size="30px">hello world!</text>
</g>
</svg>
</div>
</div>
</body>
<!-- general libraries -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<!-- Jim Vallandingham's scroller scripts and some add-ons for our config -->
<script src="js/scrolling-lib/scroller.js"></script>
<script src="js/scrolling-lib/scrollerDisplay.js"></script>
<script src="js/scrolling-lib/scrollerAddOns.js"></script>
<!-- coordinates overall animation -->
<script src="js/conductor.js"></script>
</html>