-
Notifications
You must be signed in to change notification settings - Fork 1
/
science-demo.html
315 lines (285 loc) · 15.4 KB
/
science-demo.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
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
<!DOCTYPE html>
<html lang="en" xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Test</title>
<link href="css/bootstrap-fa.css?v=1" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Changa+One" rel="stylesheet" type="text/css" />
<style type="text/css">
header {
position: fixed;
z-index:9999;
top: 4px;
left: 0;
width: 100%;
font-size: 14px;
}
header nav a {
margin-right: 24px;
color: #ccc;
font-weight: 300;
}
header nav a.logo {
font-family: 'Changa One', sans-serif;
font-size: 24px;
color:#d9534f;
padding-left: 44px;
margin-left: 6px;
line-height: 50px;
display: inline-block;
background-image: url('images/fd-cpr-logo-sm.png');
background-repeat: no-repeat;
background-size: 36px 36px;
background-position: left;
}
header + main {
margin-top: 72px;
}
header + section {
margin-top: 72px;
}
h1 {
font-family: 'Changa One', sans-serif;
text-shadow: none;
padding-bottom: 4px;
border-bottom: 1px dashed #444;
}
footer {
text-align: center;
font-size: 12px;
background-color: #888;
}
footer .container {
padding-top: 96px;
padding-bottom: 32px;
}
p.copyright {
}
.from-left {
display: block;
left: -800px;
background: red;
min-height: 300px;
min-width: 400px;
position: relative;
}
.from-right {
display: block;
right: -300px;
background: orange;
min-height: 300px;
min-width: 400px;
position: relative;
}
.from-left-holder, .from-right-holder {
overflow: hidden;
max-height: 315px;
}
.extra-gap {
margin-top: 120px;
margin-bottom: 120px;
}
.heart-attacks-map {
width: 100%;
min-height: 300px;
background-image: url('images/science-heart-attacks-map-dark.png');
background-position: 50% 50%;
margin-top: 60px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<header>
<nav class="container">
<div class="navbar">
<div class="navbar-header">
<a href="#" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-items"><i class="fa fa-bars"></i></a>
<a href="/" class="logo">FD-CPR</a>
</div>
<div class="collapse navbar-collapse" id="nav-items">
<ul class="nav navbar-nav nav-items">
<li><a href="#About">About</a></li>
<li><a href="#Video">Video</a></li>
<li class="active"><a href="#">Science</a></li>
<li><a href="mailto:[email protected]">Contact</a></li>
</ul>
</div>
</div>
</nav>
</header>
<main class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1>Section 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in augue eget libero fringilla molestie. Sed non vulputate nisl. Sed velit augue, bibendum quis eleifend et, placerat non ipsum. Suspendisse erat turpis, posuere nec porttitor sed, scelerisque et urna. Nullam laoreet massa id nisl imperdiet imperdiet. Aliquam rhoncus elit lorem. Donec faucibus sem nec est pulvinar finibus.</p>
<p>Curabitur dui diam, bibendum sit amet gravida eget, fringilla sit amet ligula. Nulla rhoncus hendrerit velit, vel sagittis urna molestie nec. Etiam eu leo enim. Donec congue faucibus nibh a luctus. Etiam ut gravida mauris. Quisque sit amet lectus at orci tempor rutrum a et libero. Cras vel sodales enim. Donec tempus vitae sapien nec lobortis. Donec facilisis elit metus, vitae posuere neque iaculis non. Mauris suscipit elit ut ex dignissim, in suscipit tellus ultrices. Vivamus lobortis velit erat, vel malesuada sem interdum vel. Proin sapien urna, ornare et lectus sed, interdum sagittis libero. Morbi id gravida leo. Phasellus quis finibus odio, sed euismod orci. Integer convallis fermentum facilisis. Aenean ut semper elit, sit amet posuere eros.</p>
<p>Aliquam ullamcorper non eros ac tempus. Donec vehicula quis sem nec finibus. Fusce sit amet lorem sit amet tellus scelerisque facilisis vel quis erat. Phasellus nec nunc at tortor pellentesque cursus. Sed et enim a nibh condimentum imperdiet. Donec convallis tortor massa, sed accumsan elit sollicitudin id. Quisque ligula quam, sollicitudin nec quam vel, finibus tempus ligula. Maecenas quis turpis at nisl venenatis aliquam eu pharetra leo. Nunc euismod metus id vestibulum fermentum. Etiam risus enim, tempus nec eleifend at, tincidunt id ex.</p>
</div>
</div>
</main>
<div class="heart-attacks-map">
</div>
<section class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<blockquote>
<em>Over half of all Line of Duty Deaths for firefighters in the US are attributable to heart attacks or strokes, not traumatic injury.</em>
</blockquote>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean sit amet ligula non dui aliquet tincidunt. Proin molestie neque ac orci venenatis, ut auctor mauris sodales. Fusce ultricies sapien vel quam lacinia, pretium dapibus purus pulvinar. Fusce varius enim eget odio ullamcorper, ut tincidunt orci dapibus. Aliquam venenatis ultricies ante. Morbi eget consequat dui, vitae aliquam mi. Proin ut blandit sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin bibendum, mauris vel ultrices pharetra, leo nunc aliquam augue, vel lobortis ante tellus nec urna. Etiam nec diam consectetur, blandit dolor eu, euismod turpis. Phasellus vulputate sapien eu euismod ultrices. Ut imperdiet sodales fringilla.</p>
<p>Sed placerat molestie felis a consequat. Nunc quis bibendum nibh, nec sagittis nisl. Donec in posuere urna. Etiam elementum, justo efficitur egestas suscipit, lectus dolor vulputate risus, eu dignissim sem odio non neque. Nunc venenatis dapibus lectus, id aliquet est efficitur sed. Maecenas nisl leo, luctus et hendrerit non, eleifend sit amet ex. Integer porta vel lectus ut scelerisque. Donec eget velit ut ipsum vulputate consectetur laoreet ut lorem. Sed commodo euismod fermentum. Integer sit amet semper nunc. Vivamus finibus eros at dolor mollis, sit amet mollis mauris ultricies. Cras sed scelerisque erat. Donec viverra dictum euismod.</p>
<p>Ut blandit massa auctor efficitur feugiat. Cras in pellentesque velit, vitae rhoncus dui. Mauris gravida congue urna, eget molestie arcu tincidunt nec. Vivamus placerat odio lobortis dignissim ultricies. Aliquam erat volutpat. Maecenas et pharetra sem, eu consectetur justo. Suspendisse urna sapien, venenatis sit amet mollis in, sodales non lacus. Pellentesque congue porta convallis.</p>
<p>Mauris id eros purus. Nam elementum lacinia tortor in mollis. Maecenas pretium luctus sollicitudin. Praesent neque ante, fermentum in erat a, vestibulum viverra odio. Quisque sit amet dictum sem, at aliquam arcu. Mauris molestie urna nec aliquet euismod. Aenean sagittis tincidunt egestas. Aliquam ultricies nisl vitae elementum fermentum. In hac habitasse platea dictumst. Etiam et tellus non lacus varius fringilla. Proin fringilla nisi id erat pretium maximus. Quisque risus mauris, eleifend ut felis id, semper facilisis eros. Morbi porta, mauris id condimentum cursus, metus urna venenatis ex, interdum convallis urna velit sed ipsum.</p>
</div>
</div>
</section>
<section class="container">
<div class="row extra-gap">
<div class="col-md-2 col-md-offset-2 text-center">
<i class="fa fa-area-chart fa-4x"></i>
<h3>Step 1</h3>
</div>
<div class="col-md-6 from-right-holder">
<img src="0.png" class="from-right" />
</div>
</div>
<div class="row extra-gap">
<div class="col-md-6 col-md-offset-2 from-left-holder text-right">
<img src="1.png" class="from-left" />
</div>
<div class="col-md-2 text-center">
<i class="fa fa-bar-chart fa-4x"></i>
<h3>Step 2</h3>
</div>
</div>
<div class="row extra-gap">
<div class="col-md-2 col-md-offset-2 text-center">
<i class="fa fa-child fa-4x"></i>
<h3>Step 3</h3>
</div>
<div class="col-md-6 from-right-holder">
<img src="2.png" class="from-right" />
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row text-center">
<a href="https://www.facebook.com/lelandfirerescue/" target="_blank"><img src="images/leland-logo-sm.png" width="72" alt="Leland Volunteer Fire/Rescue Department, Inc." /></a>
<a href="https://www.facebook.com/ancientarborproductions/" target="_blank"><img src="images/aap-logo-sm.png" width="72" alt="Ancient Arbor Productions" /></a>
</div>
<br />
<br />
<div class="row">
<p class="copyright">
© <a href="https://www.lelandfirerescue.com">2014 Leland Volunteer Fire/Rescue Department, Inc.</a>
<br />
<a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons Attribution-ShareAlike 4.0 License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/80x15.png" /></a> <span xmlns:dct="https://purl.org/dc/terms/" property="dct:title">The Firefighter Down: CPR Project</span> by <a xmlns:cc="https://creativecommons.org/ns#" href="//fd-cpr.com" property="cc:attributionName" rel="cc:attributionURL">Michael Herbert and Christopher Watford</a> is licensed under a <a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>.
<br />
<a rel="author" href="humans.txt"><img alt="humans.txt" src="images/humanstxt-transparent-1ink.png" width="88" /></a>
</p>
</div>
</div>
</footer>
<!-- jquery et al -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function ($) {
/**
* Copyright 2012, Digital Fusion
* Licensed under the MIT license.
* https://teamdf.com/jquery-plugins/license/
*
* @author Sam Sehnert
* @desc A small plugin that checks whether elements are within
* the user visible viewport of a web browser.
* only accounts for vertical position, not horizontal.
*/
var $w = $(window);
$.fn.visible = function (partial, hidden, direction) {
if (this.length < 1)
return;
var $t = this.length > 1 ? this.eq(0) : this,
t = $t.get(0),
vpWidth = $w.width(),
vpHeight = $w.height(),
direction = (direction) ? direction : 'both',
clientSize = hidden === true ? t.offsetWidth * t.offsetHeight : true;
if (typeof t.getBoundingClientRect === 'function') {
// Use this native browser method, if available.
var rec = t.getBoundingClientRect(),
tViz = rec.top >= 0 && rec.top < vpHeight,
bViz = rec.bottom > 0 && rec.bottom <= vpHeight,
lViz = rec.left >= 0 && rec.left < vpWidth,
rViz = rec.right > 0 && rec.right <= vpWidth,
vVisible = partial ? tViz || bViz : tViz && bViz,
hVisible = partial ? lViz || rViz : lViz && rViz;
if (direction === 'both')
return clientSize && vVisible && hVisible;
else if (direction === 'vertical')
return clientSize && vVisible;
else if (direction === 'horizontal')
return clientSize && hVisible;
} else {
var viewTop = $w.scrollTop(),
viewBottom = viewTop + vpHeight,
viewLeft = $w.scrollLeft(),
viewRight = viewLeft + vpWidth,
offset = $t.offset(),
_top = offset.top,
_bottom = _top + $t.height(),
_left = offset.left,
_right = _left + $t.width(),
compareTop = partial === true ? _bottom : _top,
compareBottom = partial === true ? _top : _bottom,
compareLeft = partial === true ? _right : _left,
compareRight = partial === true ? _left : _right;
if (direction === 'both')
return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop)) && ((compareRight <= viewRight) && (compareLeft >= viewLeft));
else if (direction === 'vertical')
return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop));
else if (direction === 'horizontal')
return !!clientSize && ((compareRight <= viewRight) && (compareLeft >= viewLeft));
}
};
})(jQuery);
</script>
<script type="text/javascript">
; $(document).ready(function () {
var $left = $(".from-left");
var $right = $(".from-right");
var total = $left.length + $right.length;
$(window).on("scroll.science", function (event) {
$left.each(function (idx, elt) {
var $elt = $(elt);
if ($elt.visible(false, false, 'vertical')
&& !$elt.hasClass("already-visible")) {
total--;
$elt.addClass("already-visible");
$elt.stop().animate({ left: "0px" }, 1000, function () {
});
}
});
$right.each(function (idx, elt) {
var $elt = $(elt);
if ($elt.visible(false, false, 'vertical')
&& !$elt.hasClass("already-visible")) {
total--;
$elt.addClass("already-visible");
$elt.stop().animate({ right: "0px" }, 1000, function () {
});
}
});
if (total === 0) {
$(window).off("scroll.science");
}
});
});
</script>
</body>
</html>