This repository has been archived by the owner on Apr 3, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 12
/
index.html
184 lines (154 loc) · 6.65 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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>TwoStep</title>
<meta name="title" content="TwoStep" />
<meta property="og:title" content="TwoStep" />
<meta name="twitter:title" content="TwoStep" />
<meta name="description" content="JS library for scrollytelling, from The Wall Street Journal.">
<meta property="og:description" content="JS library for scrollytelling, from The Wall Street Journal." />
<meta name="twitter:description" content="JS library for scrollytelling, from The Wall Street Journal.">
<link rel="canonical" href="http://wsj.github.io/two-step/">
<meta property="og:url" content="http://wsj.github.io/two-step/">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
/* Needed for TwoStep to work */
.parent {
display: flex;
margin: 50px auto 20px;
}
.narrative {
width: 33.3%;
}
.narrative-item {
min-height: 300px;
color: #ccc;
transition: color 200ms;
padding-right: 10px;
font-size: 20px;
}
.narrative-item.active {
color: black;
}
.rightcol {
width: 66.6%;
}
.chart {
width: 100%;
height: 400px;
background: rgb(228, 228, 228);
padding: 100px;
box-sizing: border-box;
text-align: center;
font-size: 30px;
}
@media screen and (max-width: 600px) {
.narrative, .rightcol {
width: 50%;
}
.chart {
height: 200px;
font-size: 16px;
padding: 8px;
}
}
/* Page styling */
h2 {
font-size: 20px;
margin-top: 0;
}
.subhead {
font-size: 130%;
font-weight: 500;
color: #777;
}
.main-body {
background: rgb(240, 247, 247);
padding: 24px 26px 22px 26px;
max-width: 600px;
font-size: 16px;
margin: 30px auto;
}
footer {
padding: 20px 0;
}
.github-link {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>TwoStep</h1>
<p class="subhead">A JavaScript library for scrollytelling, by <em>The Wall Street Journal</em>.</p>
</header>
<div class="main-body">
<p><a href="http://github.com/wsj/two-step/"><strong>TwoStep</strong></a> is a JavaScript library for “scrollytelling”, which is dynamically changing charts (or triggering whatever) as text scrolls into view.</p>
<p>It implements best practices for scrollytelling, which means built-in keyboard shortcuts, no scrolljacking and reliable “sticky” behaviour.</p>
<p>As seen on WSJ.com in <a href="https://www.wsj.com/graphics/american-workplace-then-and-now/">Then and Now:
The Big Shift at Work</a> and <a href="https://www.wsj.com/articles/look-inside-the-devos-family-office-1510157138">Look Inside the DeVos Family Office</a>. Or scroll down for a live example.</p>
<p><a class="github-link btn btn-default" role="button" href="http://github.com/wsj/two-step/">View on GitHub</a></p>
</div>
<!-- MARKUP FOR TWOSTEP INSTANCE -->
<div class="parent">
<div class="narrative">
<div class="narrative-item">
Here we go! If you're reading this, that means...
</div>
<div class="narrative-item">
Isn't scrollytelling fun?
</div>
<div class="narrative-item">
This simple example isn't really optimised for mobile...
</div>
</div>
<div class="rightcol">
<div class="chart">
Scroll down to activate me!
</div>
</div>
</div><!-- .parent -->
<div class="main-body">
<h2>More examples</h2>
<ul>
<li><a href="./examples/one-column/">One-column layout, with text scrolling over the top</a></li>
<li><a href="./examples/mobile-scroll/">Two-column layout, with simple scroll view on mobile</a></li>
<li><a href="./examples/mobile-swipe/">Two-column layout, with swipe view on mobile</a></li>
</ul>
</div>
<footer>
<p>All code released under the <a href="https://github.com/WSJ/two-step/blob/master/LICENSE">ISC license</a>. Pull requests welcomed.</p>
<p>Developed at <em>The Wall Street Journal</em> by Elliot Bentley.</p>
</footer>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/noframework.waypoints.min.js"></script>
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fixto/0.5.0/fixto.min.js"></script>
<script src="./dist/two-step.js" type="text/javascript" charset="utf-8"></script>
<script>
var ts = new TwoStep({
elements: document.querySelectorAll('.narrative-item'),
onChange: function(event) {
console.log('Slide '+event.index);
},
offset:{'down':"50%",'up':"0"},
stick: document.querySelector('.rightcol'),
narrative: [
function(event) {
$('.chart').text('TwoStep has kicked in');
},
function(event) {
$('.chart').text('Yes. Yes it is');
},
function(event) {
$('.chart').text('... but see below for examples that are!');
}
]
});
// ts.goTo(0);
</script>
</body>
</html>