-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
106 lines (105 loc) · 4.05 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content='width=device-width, initial-scale=1'>
<title>Parallax Zoomin'</title>
<link rel="stylesheet" href="ywwtf.css">
</head>
<body>
<div id='wrapper'>
<div id='scroller'> <!-- For iScroll functionality -->
<div class='layer' data-params='0,250'> <!-- Each layer of depth defined by class "layer" -->
<h4>A massive earthquake happens in the Pacific Northwest and people begin rebuilding—what will be rebuilt?</h4>
</div>
<div class='layer hide' data-params='250,500'>
<h4>In a disaster, people move fast.</h4>
</div>
<div class='layer hide' data-params='500,750'>
<h4>Money moves faster.</h4>
</div>
<div class='layer hide' data-params='750,1000'>
<h4>Buying and selling at the right moment.</h4>
</div>
<div class='layer hide' data-params='1000,1250'>
<h4>Data.</h4>
</div>
<div class='layer hide' data-params='1250,1500'>
<h4>Trends.</h4>
</div>
<div class='layer hide' data-params='1500,1750'>
<h4>Speculation.</h4>
</div>
<div class='layer hide' data-params='1750,2000'>
<h4>Imagined futures.</h4>
</div>
<div class='layer hide' data-params='2000,2250'>
<h4>Investors place bets on an imagined return.</h4>
</div>
<div class='layer hide' data-params='2250,2500'>
<h4>The future is uncertain, but we know a Cascadia subduction zone earthquake will happen.</h4>
</div>
<div class='layer hide' data-params='2500,2750' data-class="blue">
<h4>We know hedge funds buy land in water-rich regions of the world.</h4>
</div>
<div class='layer hide' data-params='2750,3000'>
<h4>Sometime in the future . . .</h4>
</div>
<div class='layer hide' data-params='3000,3250'>
<h4>after a massive quake . . .</h4>
</div>
<div class='layer hide' data-params='3250,3500'>
<h4> a warmer, drier planet makes this region even more desirable than it already is,</h4>
</div>
<div class='layer hide' data-params='3500,3750'>
<h4>when lifelines and routines are disrupted for many months:</h4>
</div>
<div class='layer hide' data-params='3750,4000' data-class="red">
<h4>people without savings eventually default on their mortgages.</h4>
</div>
<div class='layer hide' data-params='4000,4250' data-class="red">
<h4>Farmers disrupted, vulnerable.</h4>
</div>
<div class='layer hide' data-params='4250,4500' data-class="red">
<h4>Can those properties . . .</h4>
</div>
<div class='layer hide' data-params='4500,4750' data-class="red">
<h4>homes and farms . . .</h4>
</div>
<div class='layer hide' data-params='4750,5000' data-class="green">
<h4>the land . . .</h4>
</div>
<div class='layer hide' data-params='5000,5250' data-class="green">
<h4>be purchased by out-of-state funds?</h4>
</div>
<div class='layer hide' data-params='5250,5500' data-class="green">
<h4>Will global finance be a predatory actor after a massive earthquake?</h4>
</div>
<div class='layer hide' data-params='5600,5850'>
<h4>Now it is only speculation,</h4>
</div>
<div class='layer hide' data-params='5850,6100'>
<h4>a novel about financial technology,</h4>
</div>
<div class='layer hide' data-params='6100,6350'>
<h4>the protagonist is a college drop out and indie game savant—</h4>
</div>
<div class='layer hide' data-params='6350,6600'>
<h4>when his team discovers the founders preparing for a crack up of civilization,</h4>
</div>
<div class='layer hide' data-params='6600,6850'>
<h4>they rebel.</h4>
</div>
</div> <!-- scroller -->
</div> <!-- wrapper -->
<div class='screen-wipe'>
</div>
<div id='book-title' class='layer hide' data-params='7000,7250'>
<h4>You<br> Will<br> Win<br> <span>The</span> Future</h4>
</div>
<!-- <div class='book-title'>
<h1>You<br> Will<br> Win<br> <span>The</span> Future</h1>
</div> -->
</body>
<script src="ywwtf.js" type="text/javascript"></script>
</html>