forked from j-js/flockingbirds
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
284 lines (221 loc) · 13.8 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
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
<!DOCTYPE html>
<html>
<head>
<title>Flocking Birds</title>
<meta charset="utf-8">
<!-- <meta name="viewport" content="width=device-width,initial-scale=1"> -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,700i" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" href="css/baguetteBox.min.css">
<link rel="icon" type="image/gif" href="images/favicon.gif" sizes="32x32">
</head>
<body>
<h3 id="where"></h3>
<div id="progress" data-0="width:0%;" data-end="width:100%;"></div>
<div id="bg1" data-0="background-position:0px 0px;" data-end="background-position:-500px -20000px;"></div>
<div id="bg2" data-0="background-position:0px 0px;" data-end="background-position:-500px -10000px;"></div>
<div id="bg3" data-0="background-position:0px 0px;" data-end="background-position:-500px -8000px;"></div>
<div id="scroll">
<p>SCROLL DOWN</p>
<img src="images/scroll.png">
</div>
<div id="wrapper">
<section id="intro" class="section">
<div id="infoWrap">
<h1 class="pink">FLOCKING BIRDS</h1>
<!-- <hr> -->
<h1 class="blue">O1B</h1>
<p class="info">
This site was made to help you with the O1 visa and built by two artists who went through the process in 2015. Here we provide information based on stories and experiences of international artists living in the United States who found ways to navigate what is an often opaque and confusing legal system. Below you can listen to excerpts from audio interviews we did with artists and designers, find examples of the kinds of material you need to prepare for an application. You can also see where your country falls in numbers of O1 approvals from 1997 to 2015.</br></br>As part of this project we also host immigration parties to build a community of international artists living in New York to come together and share strategies, information and hacks to survive in the U.S, all the while sipping on a drink and swaying to some good music. Stayed tuned for the next party!
</p>
</div>
</section>
<!-- data-0="background-color:rgb(0,0,255);" data-100p="background-color:rgb(255,0,0);" -->
<section id="interview" class="section" >
<!-- <div id="title" data-anchor-target="#interview" data-bottom-top="top:100%;" data--10-top="top:0px;" data-8100="top: 0px; display:block;opacity:1" data-8800="top:-250%; display:none;">
<h1>AUDIO BYTES</h1>
</div> -->
<!-- VISA IMAGE ANIMATION -->
<!-- MOVE UP: 2000PX STAY: 1000PX DISSAPEAR: 1200PX | NEXT COMMING UP +800PX FROM END OF STAY-->
<div class="bird_visa" data-0="top[quadratic]:150%;" data-2000="top:50%;" data-3000="display:block;opacity:1;z-index:1;" data-4200="top:-25%; opacity[swing]:-1; z-index:-1;" data-4201="display:none;">
<div class="float shadow">
<img src="images/bird-visa-01.gif" >
</div>
<div class="float">
<h2>"Can you re-enact your conversation with border guards when you drive to the U.S from Canada?"</h2>
<audio id="0" src="audios/Border_Officer.mp3" preload controls></audio>
</div>
</div>
<div class="bird_visa" data-anchor-target="#interview" data-1800="top[cubic]:150%;" data-3800="top:50%;" data-4800="display:block;opacity:1; z-index:1;" data-5900="top:-25%; opacity[swing]:-1; z-index:-1;" data-5901="display:none;">
<div class="float shadow">
<img src="images/bird-visa-02.gif" >
</div>
<div class="float">
<h2>"How did you end up with an O1 visa after going through all the other visas?"</h2>
<audio id="1" src="audios/o1_was_my_salvation.mp3" preload controls ></audio>
</div>
</div>
<div class="bird_visa" data-anchor-target="#interview" data-3300="top[cubic]:150%;" data-5600="top:50%;" data-6300="display:block;opacity:1; z-index:1;" data-7500="top:-25%; opacity[swing]:-1; z-index:-1;" data-7501="display:none;">
<div class="float shadow">
<img src="images/bird-visa-03.gif" >
</div>
<div class="float">
<h2>"How long did the process take you from beginning to submitting?"</h2>
<audio id="2" src="audios/took_8_months.mp3" preload controls ></audio>
</div>
</div>
<div class="bird_visa" data-anchor-target="#interview" data-5100="top[cubic]:150%;" data-7100="top:50%;" data-8100="display:block;opacity:1; z-index:1;" data-9200="top:-25%; opacity[swing]:-1; z-index:-1;" data-9201="display:none;">
<div class="float shadow">
<img src="images/bird-visa-04.gif" >
</div>
<div class="float">
<h2>"Did your freak out when your lawyer said you need press?"</h2>
<audio id="3" src="audios/of course I freaked out.mp3" preload controls ></audio>
</div>
</div>
</section>
<section id="resources" class="section" >
<div id="title" data-anchor-target="#resources" data-bottom-top="top:100%;display:block;" data--300-top="top:0px;" data-13500=="top: 0px; display:block; opacity:1" data-14000="top:-70px; display:none;">
<h1>RESOURCES</h1>
</div>
<!-- RESOURCES IMAGE ANIMATION : SLIDE-->
<!-- MOVE UP: 2000PX STAY: 1000PX DISSAPEAR: 1200PX | NEXT COMMING UP +800PX FROM END OF STAY-->
<!-- Recommandation -->
<div class="bird_resource" data-anchor-target="#resources" data-bottom-top="top:150%;" data--300-top="top:50%;" data-9500="left:50%; display:block;opacity:1; z-index:1;" data-10500="left:-25%; opacity[swing]:-1; z-index:-1;" data-10501="display:none;">
<div class="floatL">
<img src="images/advisory_opinion.png" >
</div>
<div class="text">
<div class="floatR">
<!-- <h2 class="resources_heading">Recommandation letters</h2>
--> <p class="resources_heading">
Advisory Opinion Letters aka Reccomendation Letters are usually included in an application. These are most often drafted by your lawyer or you and then sent to the person to review, print, and sign on their letterhead.
</p>
<p class="resources_heading">
USCIS does not have a minimum or maximum number of letters they ask for so it is really up to you. Most people submit anywhere from 5 to 12, the average being somewhere on the higher side like 9-10. The letters should come from experts in your field, people who have worked with you and can vouch for you. A tip in this part of the process is to also include press about them so as to prove their credentials and avoid multiple letters from your academic instituion.
</p>
</div>
<div class="imageSlide">
<a href="images/recco_example_1.jpg"><img src="images/thumb_recco_example_1.jpg"></a>
<a href="images/recco_example_2.jpg"><img src="images/thumb_recco_example_2.jpg"></a>
<a href="images/recco_example_3.jpg"><img src="images/thumb_recco_example_3.jpg"></a>
</div>
</div>
</div>
<!-- PRESS -->
<div class="bird_resource" data-9500="top:50%;left:180%;" data-10000="left:50%;" data-11000="left:50%; display:block;opacity:1; z-index:1;" data-11500="left:-25%; opacity[swing]:-1; z-index:-1;" data-11501="display:none;">
<div class="floatL">
<img src="images/press.png" >
</div>
<div class="text">
<div class="floatR">
<!-- <h2 class="resources_heading">Recommandation letters</h2>
--> <p class="resources_heading">
It is important to start early in this process and begin scraping the internet for your name and saving and downloading anything and everything you find about you. Lawyers will ask you to provide press about your work and accomplishments from major newspapers, journals etc. While it is valuable to have 2-5 articles that do this it is also valuable to show press that includes announcements of your exhibition, brochures of shows you have been part of or articles talking about projects that you were part of even though they do not mention your name. In these cases experts from your field could vouch for your involvement in projects or exhibitions in their letters by briefly mentioning them and your role.
</p>
</div>
<div class="imageSlide">
<a href="images/press_01.jpg"><img src="images/thumb_press_01.jpg"></a>
<a href="images/press_02.jpg"><img src="images/thumb_press_02.jpg"></a>
<a href="images/press_03.jpg"><img src="images/thumb_press_03.jpg"></a>
<a href="images/press_04.jpg"><img src="images/thumb_press_04.jpg"></a>
</div>
</div>
</div>
<!-- itenerary -->
<div class="bird_resource" data-11000="top:50%;left:180%;" data-11500="left:50%;" data-12500="left:50%; display:block;opacity:1; z-index:1;" data-13000="left:-25%; opacity[swing]:-1; z-index:-1;" data-13001="display:none;">
<div class="floatL">
<img src="images/Itineraries.png" >
</div>
<div class="text">
<div class="floatR">
<!-- <h2 class="resources_heading">Recommandation letters</h2>
--> <p class="resources_heading">
The Itinerary is an important part of your application and can be completed once you have all your work engagements ready. It is helpful to create an excel document with the months and years to notice overlaps and see whether you are in fact covering the entire period allowed. These are relatively more simple for those that have galleries acting as agents. For others it can be daunting to have to collect promises of work for three years when often young creatives do not even know what will happen next month. </br> </br> While it is good to have commitments from people you want to work with, it is also not required of you to fulfill all your commitments and it also allowed for you to add engagements and or alter the itinerary during the course of your O1 approval. Each engagement in the itinerary is accompanied by an oral agreement/deal memo.
</p>
</div>
<div class="imageSlide">
<a href="images/itinererary_example_1a.jpg"><img src="images/thumb_itinererary_example_1a.jpg"></a>
<a href="images/itinererary_example_1b.jpg"><img src="images/thumb_itinererary_example_1b.jpg"></a>
<a href="images/itinererary_example_1c.jpg"><img src="images/thumb_itinererary_example_1c.jpg"></a>
<a href="images/itinererary_example_1d.jpg"><img src="images/thumb_itinererary_example_1d.jpg"></a>
</div>
</div>
</div>
<!-- DEAL MEMO -->
<div class="bird_resource" data-12500="top:50%;left:180%;" data-13000="left:50%;" data-13900="left:50%; display:block;opacity:1; z-index:1;" data-14500="top:-25%; opacity[swing]:-1; z-index:-1;" data-14501="display:none;">
<div class="floatL">
<img src="images/deal_memos.png" >
</div>
<div class="text">
<div class="floatR">
<!-- <h2 class="resources_heading">Recommandation letters</h2>
--> <p class="resources_heading">
Deal Memo's also known as oral agreements or contracts are between you and another person, organization or company showing that they want to employ you for your extraordinary ability. These do not legally have to be signed, however the more official you can make them the better. You should include who will be employing you, during what period and how much they will pay you. You should also include where the work will take place and the nature of the work. Providing a background of the employer/organization is also a good thing. </br> </br> One of the main things to keep in mind when seeking a multiple-employer itinerary based visa is that you want the work engagements to cover a period of three years, the maximum duration you can get the O1 for at a time.
</p>
</div>
<div class="imageSlide">
<a href="images/deal_memo_1a.jpg"><img src="images/thumb_deal_memo_1a.jpg"></a>
<a href="images/deal_memo_1b.jpg"><img src="images/thumb_deal_memo_1b.jpg"></a>
<a href="images/deal_memo_2.jpg"><img src="images/thumb_deal_memo_2.jpg"></a>
<a href="images/deal_memo_3.jpg"><img src="images/thumb_deal_memo_3.jpg"></a>
</div>
</div>
</div>
</section>
<section id="BG">
<div class="rellax bird_01" data-rellax-speed="-3">
<img src="images/bird-01.png">
</div>
<div class="rellax bird_02" data-rellax-speed="-3">
<img src="images/bird-02.png">
</div>
<div class="rellax bird_03" data-rellax-speed="-3">
<img src="images/bird-03.png">
</div>
<div class="rellax bird_04" data-rellax-speed="8">
<img src="images/bird-04.png">
</div>
<div class="rellax bird_05" data-rellax-speed="7">
<img src="images/bird-05.png">
</div>
<div class="rellax bird_06" data-rellax-speed="3">
<img src="images/bird-02.png">
</div>
<div class="rellax bird_07" data-rellax-speed="7">
<img src="images/bird-01.png">
</div>
</section>
<section id="dataViz" class="section" >
<iframe src="dataviz.html" style="width: 100%; height:100%; border: none; z-index:-100;" scrolling="no"></iframe>
</section>
</div>
<script type="text/javascript" src="src/soundControl.js"></script>
<script type="text/javascript" src="lib/rellax.min.js"></script>
<script type="text/javascript" src="lib/skrollr.js"></script>
<!-- <script type="text/javascript" src="src/imageSlide.js"></script> -->
<script src="src/baguetteBox.min.js"></script>
<script>
baguetteBox.run('.imageSlide');
var s = skrollr.init({
// write constant
smoothScrolling: true,
smoothScrollingDuration: 300,
forceHeight: false,
render: function(data){
document.querySelector("#where").innerHTML = data.curTop;
}
// mobileCheck: function(){
// return (/Android|iPhone|iPad|iPod|BlackBerry/i).test(navigator.userAgent || navigator.vendor || window.opera);
// }
});
var rellax = new Rellax('.rellax');
// window.addEventListener("load", function(){
// var rellax = new Rellax('.rellax');
// });
</script>
</body>
</html>