-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtimeline.html
executable file
·34 lines (31 loc) · 1.71 KB
/
timeline.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
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="./javascript/timeLine.js"></script>
<script type="text/javascript" src="./javascript/consolePrinter.js"></script>
<script type="text/javascript" src="./javascript/gamebrain.js"></script>
<script type="text/javascript" src="./javascript/math.js"></script>
<script type="text/javascript" src="./javascript/draw.js"></script>
<script type="text/javascript" src="./javascript/utility.js"></script>
<link rel="stylesheet" href="./css/layout.css" type="text/css" media="screen">
</head>
<body onload="init()" onscroll="scroll()">
<div class="info">
<h1>HTML Parallax Scrolling Timeline</h1>
<p>This was a small project to look at parallax scrolling in HTML by using Javascript to 'hijack' the scroll info and update elements uniquely.</p>
<p>Below is a timeline stretching from 1982 to now, on the left are personal events (they don't have a range) and on the right are education/career events positioned and sized correctly to the timeline.</p>
<p>Scattered in front and behind the events are random empty events, these are where the parallax effect is applied, each empty event has its own speed and is updated as the page is scrolled. The console is just for some feedback although it will say the number of empty events (random number between 30 and 100) and of those how many are in the background and how many are in the foreground.</p>
</div>
<div id="console" class='centerBox'>
<p id="consoleText"/>
</div>
<div id="divTimeLineContainer" class='timeLineContainer'>
<div id="divLeftEventContainer" class='eventContainer'>
</div>
<div id="divTimeLine" class='timeLine'>
</div>
<div id="divRightEventContainer" class='eventContainer'>
</div>
</div>
</body>
</html>