-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsxsw_demo.html
114 lines (94 loc) · 7.45 KB
/
sxsw_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
<!DOCTYPE HTML>
<html>
<head>
<title>Emma's SXSW story</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta charset="utf-8" />
<link rel="stylesheet" href="sxsw.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link href='http://fonts.googleapis.com/css?family=Maiden+Orange' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<ul id="banner">
<li> <a href="#landing">1</a> </li>
<li> <a href="#page_1">2</a> </li>
<li> <a href="#page_2">3</a> </li>
<li> <a href="#page_3">4</a> </li>
<li> <a href="#page_4">5</a> </li>
<li> <a href="#page_5">6</a> </li>
<li> <a href="#page_6">7</a> </li>
<li> <a href="#page_7">8</a> </li>
<li> <a href="#page_8">9</a> </li>
<li> <a href="#page_9">10</a> </li>
<li> <a href="#page_10">11</a> </li>
<li> <a href="#page_11">12</a> </li>
</ul>
</header>
<div id="landing" class="panel">
<h1>Things noticed alone</h1>
<h2>Tales from SXSW 2013 told through pictures.</h2>
<h3 class="side_text">Nobody notices what they don’t notice. But I notice how much more I notice when I'm alone.</h3>
<a class="next_page" href="#page_1"><img src="images/arrow.png" /></a>
</div>
<div id="page_1" class="panel">
<h3>It's less about who I want to be to that person I'm with. And more about the things around me.</h3>
<a class="next_page" href="#page_2"><img src="images/arrow.png" /></a>
</div>
<div id="page_2" class="panel">
<h3>I see the energy pulse through a crowd as a woman embarrases herself on stage.</h3>
<a class="next_page" href="#page_3"><img src="images/arrow.png" /></a>
</div>
<div id="page_3" class="panel">
<h3>The beauty in the cracked, soggy pavement.</h3>
<a class="next_page" href="#page_4"><img src="images/arrow.png" /></a>
</div>
<div id="page_4" class="panel">
<h3>I notice how uncomfortable people are at the thought of going without technology for a few hours.</h3>
<a class="next_page" href="#page_5"><img src="images/arrow.png" /></a>
</div>
<div id="page_5" class="panel">
<h3>The carefree feeling of being on a crowded street of bars becomes a part of me.</h3>
<a class="next_page" href="#page_6"><img src="images/arrow.png" /></a>
</div>
<div id="page_6" class="panel">
<h3>Watching someone else be alone makes me feel as if I have something in common with that other silent observer.</h3>
<a class="next_page" href="#page_7"><img src="images/arrow.png" /></a>
</div>
<div id="page_7" class="panel">
<h3>It's not the crazy hair of a rockstar, but instead the wonder of 'who is he?'.</h3>
<a class="next_page" href="#page_8"><img src="images/arrow.png" /></a>
</div>
<div id="page_8" class="panel">
<h3>Time can be spent watching the tiny strokes being etched onto a wall of Graffiti, and then the mural as a whole.</h3>
<a class="next_page" href="#page_9"><img src="images/arrow.png" /></a>
</div>
<div id="page_9" class="panel">
<h3>I can feel the knowing look of the poet, writing on the side of a road.</h3>
<a class="next_page" href="#page_10"><img src="images/arrow.png" /></a>
</div>
<div id="page_10" class="panel">
<h3>The mustard yellow of a plastic bush erupting from the hand of a beautiful woman.</h3>
<a class="next_page" href="#page_11"><img src="images/arrow.png" /></a>
</div>
<div id="page_11" class="panel">
<h3>The surreal feeling of living through a cloudy, dream-like existence never subsides. And I noticed it all.</h3>
<h3>The end.</h3>
</div>
<script>
$(document).ready(function() { $("#banner a").bind("click",function(event){ event.preventDefault(); var target = $(this).attr("href"); $("html, body").stop().animate({ scrollLeft: $(target).offset().left, scrollTop: $(target).offset().top }, 1200); }); });
$(document).ready(function() { $("#landing a").bind("click",function(event){ event.preventDefault(); var target = $(this).attr("href"); $("html, body").stop().animate({ scrollLeft: $(target).offset().left, scrollTop: $(target).offset().top }, 1200); }); });
$(document).ready(function() { $("#page_1 a").bind("click",function(event){ event.preventDefault(); var target = $(this).attr("href"); $("html, body").stop().animate({ scrollLeft: $(target).offset().left, scrollTop: $(target).offset().top }, 1200); }); });
$(document).ready(function() { $("#page_2 a").bind("click",function(event){ event.preventDefault(); var target = $(this).attr("href"); $("html, body").stop().animate({ scrollLeft: $(target).offset().left, scrollTop: $(target).offset().top }, 1200); }); });
$(document).ready(function() { $("#page_3 a").bind("click",function(event){ event.preventDefault(); var target = $(this).attr("href"); $("html, body").stop().animate({ scrollLeft: $(target).offset().left, scrollTop: $(target).offset().top }, 1200); }); });
$(document).ready(function() { $("#page_4 a").bind("click",function(event){ event.preventDefault(); var target = $(this).attr("href"); $("html, body").stop().animate({ scrollLeft: $(target).offset().left, scrollTop: $(target).offset().top }, 1200); }); });
$(document).ready(function() { $("#page_5 a").bind("click",function(event){ event.preventDefault(); var target = $(this).attr("href"); $("html, body").stop().animate({ scrollLeft: $(target).offset().left, scrollTop: $(target).offset().top }, 1200); }); });
$(document).ready(function() { $("#page_6 a").bind("click",function(event){ event.preventDefault(); var target = $(this).attr("href"); $("html, body").stop().animate({ scrollLeft: $(target).offset().left, scrollTop: $(target).offset().top }, 1200); }); });
$(document).ready(function() { $("#page_7 a").bind("click",function(event){ event.preventDefault(); var target = $(this).attr("href"); $("html, body").stop().animate({ scrollLeft: $(target).offset().left, scrollTop: $(target).offset().top }, 1200); }); });
$(document).ready(function() { $("#page_8 a").bind("click",function(event){ event.preventDefault(); var target = $(this).attr("href"); $("html, body").stop().animate({ scrollLeft: $(target).offset().left, scrollTop: $(target).offset().top }, 1200); }); });
$(document).ready(function() { $("#page_9 a").bind("click",function(event){ event.preventDefault(); var target = $(this).attr("href"); $("html, body").stop().animate({ scrollLeft: $(target).offset().left, scrollTop: $(target).offset().top }, 1200); }); });
$(document).ready(function() { $("#page_10 a").bind("click",function(event){ event.preventDefault(); var target = $(this).attr("href"); $("html, body").stop().animate({ scrollLeft: $(target).offset().left, scrollTop: $(target).offset().top }, 1200); }); });
$(document).ready(function() { $("#page_11 a").bind("click",function(event){ event.preventDefault(); var target = $(this).attr("href"); $("html, body").stop().animate({ scrollLeft: $(target).offset().left, scrollTop: $(target).offset().top }, 1200); }); });
</script>
</body>
</html>