/
index.html
151 lines (122 loc) · 6.56 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
<head lang="en">
<title>About Rob</title>
<meta name="viewport" content="width=960, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@arscan">
<meta name="twitter:title" content="An interactive 'About Me' page in the style of #GotG using #HTML5">
<meta name="twitter:image:src" content="http://www.robscanlon.com/about/images/screenshot.jpg">
<link rel="icon" type="image/png" href="images/icon.png">
<meta property="og:title" content="Guardians of the Galaxy Lineup Scene in HTML5" />
<meta property="og:url" content="http://www.robscanlon.com/about/" />
<meta property="og:image" content="http://www.robscanlon.com/about/images/screenshot.jpg" />
<!-- cdn vendor code -->
<script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- <script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.js"></script> -->
<!-- vendor code -->
<script src="vendor/three.js"></script>
<script src="vendor/tween.min.js"></script>
<script src="vendor/raphael-min.js"></script>
<script src="vendor/velocity.min.js"></script>
<script src="vendor/hammer.min.js"></script>
<script src="vendor/jquery.mousewheel.min.js"></script>
<script src="vendor/pleaserotate.js"></script>
<!-- Post Processessing -->
<script src="js/post/ShaderPass.js"></script>
<script src="js/post/BrightnessContrastShader.js"></script>
<script src="js/post/HueSaturationShader.js"></script>
<script src="js/post/ProjectorPass.js"></script>
<script src="js/post/AdditiveBlendShader.js"></script>
<script src="js/post/CopyShader.js"></script>
<script src="js/post/HorizontalBlurShader.js"></script>
<script src="js/post/VerticalBlurShader.js"></script>
<script src="js/post/FXAAShader.js"></script>
<script src="js/post/EffectComposer.js"></script>
<script src="js/post/RenderPass.js"></script>
<script src="js/post/MaskPass.js"></script>
<script src="js/post/TexturePass.js"></script>
<!-- Utils -->
<script src="js/utils/OBJLoader.js"></script>
<script src="js/utils/LoadSync.js"></script>
<!-- I killed the flickr stuff in favor of a simpler static image. Keeping here for now -->
<!-- Flickr API (hosted locally, use bin/downloadflickr.js to generate to avoid cors issues -->
<!-- <script src="js/FlickrHandler.js"></script> -->
<!-- <script src="js/FlickrImages.js"></script> -->
<!-- <script src="https://api.flickr.com/services/feeds/photos_public.gne?format=json&id=45001949@N00&jsoncallback=FLICKR.setItems"></script> -->
<!-- //////////////////////// -->
<!-- APP CODE -->
<!-- bottom svg -->
<script src="js/BottomPanel.js"></script>
<!-- background layer -->
<script src="js/BackgroundPanel.js"></script>
<!-- projector layer -->
<script src="js/ProjectorPanel.js"></script>
<!-- panel parent class -->
<script src="js/Panel.js"></script>
<!-- loading panel -->
<script src="js/LoadingPanel.js"></script>
<!-- main panels (put in projection) -->
<script src="js/ScrollPanel.js"></script>
<script src="js/SkeletonPanel.js"></script>
<script src="js/NamePanel.js"></script>
<script src="js/SharePanel.js"></script>
<script src="js/TinyPanel1.js"></script>
<script src="js/TinyPanel2.js"></script>
<script src="js/TinyPanel3.js"></script>
<script src="js/TinyPanel4.js"></script>
<script src="js/TinyPanel5.js"></script>
<!-- carousel panels -->
<script src="js/PhotosPanel.js"></script>
<script src="js/ProjectsPanel.js"></script>
<script src="js/LinksPanel.js"></script>
<script src="js/SubjectPanel.js"></script>
<script src="js/ToolPanel.js"></script>
<!-- finally, the main function -->
<script src="js/main.js"></script>
<!-- END APP CODE -->
<!-- //////////////////////// -->
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body style="background-color: black">
<div id="please-rotate">
<div id="rotate-message">
<div id="rotate-image"></div>
PLEASE ROTATE FOR BEST EXPERIENCE
<br/>
<small>(or click here to continue)</small>
</div>
</div>
<div id="play-button">
<div id="play-image">CLICK HERE TO ENTER</div>
</div>
<div id="bottom-panel"></div>
<div id="about-panel">
<h1>What is this?</h1>
<p>This is an HTML recreation of the <a href="http://www.territorystudio.com/work/motion/?p=GuardiansOfTheGalaxy" target="_blank">lineup scene</a> in the Marvel movie <a target="_blank" href="http://www.imdb.com/title/tt2015381/">Guardians of the Galaxy</a>.
<a href="http://www.robscanlon.com" target="_blank" class="about-me-link">Rob Scanlon</a> built this as a fun way to learn WebGL fragment shaders. It was created using a bunch of open source libraries, most notably
<a target="_blank" href="http://threejs.org">Three.js</a>. Source code for this little project is available on <a target="_blank" href="http://www.github.com/arscan/lineup">Github</a>.
</p>
<p>Be sure to scroll down (or click on your down arrow, or swipe down if you are mobile) to see more widgets. If you don't see me, <a href="?DISABLE_VIDEO">click here</a>.</p>
<p>This is part 3 of a trilogy; check out <a target="_blank" href="http://robscanlon.com/github-wargames">Github Wargames</a> and
<a target="_blank" href="http://robscanlon.com/encom-boardroom">Encom Boardroom</a> if you want to see what else I built while learning HTML5.
</p>
<img id="about-x" src="images/about-x.png">
</div>
<video id="video" loop="true" poster="images/snapshot.png">
</video>
<!-- force load first a couple of things -->
<div style="display:none">
<img src="images/reflection.png">
<img src="images/loading-background.png">
</div>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-4481396-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>