https://virtualfashionarchive.com/

1<html>
2<head>
3<!-- Global site tag (gtag.js) - Google Analytics -->

3
4<script async src="https://www.googletagmanager.com/gtag/js?id=

4UA-112402272-3

4"></script>

5<script>
6  

6window.dataLayer = window.dataLayer || [];
7  function gtag(){dataLayer.push(arguments);}
8  gtag('js', new Date());
9
10  gtag('config', '

10UA-112402272-3

10');

11</script>

11
12
13  <meta charset="utf-8">
14  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
15  <meta name="apple-mobile-web-app-capable" content="yes" />
16  <meta name="description" content="The Virtual Fashion Archive is a collection of archival fashion garments brought to life in new digital dimensions.">
17
18  <title>The Virtual Fashion Archive — A collection of garments brought to life in new digital dimensions.</title>
19  <link href='https://d33wubrfki0l68.cloudfront.net/css/0e0f080164bd104cef47f0f6bb818482d788deab/style.css' rel='stylesheet' type='text/css'/>
20  <link rel="icon" type="image/png" href="favicon.png" />
21
22</head>
23
24<body>
25  <section class='header'>
26    <a href="./"><video class="header-logo" src="https://d33wubrfki0l68.cloudfront.net/34f348192ed3ffd7fd6e4235c2469f741af55563/e4f9f/media/-global/vfa-logo-3d.mp4" poster="https://d33wubrfki0l68.cloudfront.net/1d9633100775a0c0708df2fa4d899505af926a69/88f76/media/-global/vfa-logo-3d.jpg" autoplay loop playsinline muted></video></a>
27  </section>
28
29  <section class="navigation">
30    <a id="info-btn" class="button hide" href="about/">Info</a>
31  </section>
32
33
34
35  <section class="bottom-strip">
36    <div id="signuplink" class="running-text-container">
37      <div class="running-text">
38        <span>
39          The Virtual Fashion Archive.
40        </span>
41        <span>
42          Sign up for updates.
43        </span>
44        <span>
45          The Virtual Fashion Archive.
46        </span>
47        <span>
48          Sign up for updates.
49        </span>
50      </div>
51    </div>
52
53    <section id="signupsuccess" class="signup-success remove">
54        <div id="signuplink" class="running-text-container">
55          <div class="running-text">
56            <span>
57              Thanks for signing up!
58            </span>
59            <span>
60              Thanks for signing up!
61            </span>
62            <span>
63              Thanks for signing up!
64            </span>
65            <span>
66              Thanks for signing up!
67            </span>
68          </div>
69        </div>
70
71    </section>
72
73    <section id="signupbox" class="signupbox remove">
74
75
76    <div class="modal">
77    <a id="close-signup" class="close"></a>
78
79    <div id="mc_embed_signup">
80    <form action="https://studio.us4.list-manage.com/subscribe/post?u=1822dec3180d500c924062a19&amp;id=39427f28b0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" novalidate>
81    <div id="mc_embed_signup_scroll">
82
83    <div class="mc-field-group">
84    <input class="signupfield" type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Enter email">
85  </div>
86  <div id="mce-responses" class="clear">
87  <div class="response" id="mce-error-response" style="display:none"></div>
88  <div class="response" id="mce-success-response" style="display:none"></div>
89</div>
90<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_1822dec3180d500c924062a19_39427f28b0" tabindex="-1" value=""></div>
91<div class="clear hide">
92  <button type="submit" name="subscribe" id="mc-embedded-subscribe" class="button">Sign Up</button>
93  </div>
94</div>
95</form>
96</div>
97</div>
98</section>
99

100<script type="text/javascript">
101
102function setsignuplink(){
103  document.getElementById("signuplink").onclick = function(){
104    document.getElementById('signupbox').classList = "signupbox";
105    document.getElementById('signuplink').classList = "remove";
106    document.getElementById('mce-EMAIL').focus();
107  };
108  document.getElementById("close-signup").onclick = function(){
109    document.getElementById('signupbox').classList = "signupbox remove";
110    document.getElementById('signuplink').classList = "running-text-container";
111  }
112}
113setsignuplink();
114var displayMailChimpStatus = function (data) {
115    if(data.result == "success"){
116      document.getElementById('signupbox').classList = "remove";
117      document.getElementById('signupsuccess').classList = "signup-success";
118    }else if(data.msg.substr(0, 3) == "0 -"){
119      var field = document.getElementById('mce-EMAIL');
120      field.value = "";
121      field.placeholder = "Please check email format and try again";
122    }else{
123      var field = document.getElementById('mce-EMAIL');
124      field.value = "";
125      field.placeholder = "Email is already subscribed";
126    }
127};
128document.addEventListener("DOMContentLoaded", function(){
129  var form = document.getElementById("mc-embedded-subscribe-form");
130  form.onsubmit = function(e){
131  e.preventDefault();
132    var field = document.getElementById('mce-EMAIL');
133    var formdata = '&' + encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value);
134    var url = 'https://studio.us4.list-manage.com/subscribe/post-json?u=1822dec3180d500c924062a19&amp;id=39427f28b0';
135    url += formdata + '&c=displayMailChimpStatus';
136    let script = document.createElement('script');
137    script.src = url;
138    document.body.append(script);
139  }
140});
141</script>

141
142
143
144
145</section>
146
147  <section id="page-content" class="page-content">
148    <section id="intro" class="intro">
149      <p><span>The Virtual Fashion Archive is a collection of archival garments brought to life in new digital dimensions. </span><a class="inline-link" href="about/">More Info</a></p>
150    </section>
151  </section>
152
153  

153<script src='https://d33wubrfki0l68.cloudfront.net/bundles/7db576e6a95f664a332cc9b148872ec0ec8eb5ed.js'></script>

153
154
155  

155<script>
156
157  // Hide About On Scroll
158  window.onscroll = function() {
159    var currentScrollPos = window.pageYOffset;
160    if (currentScrollPos > 120) {
161      document.getElementById("intro").setAttribute("class", "intro hide");
162      document.getElementById("info-btn").setAttribute("class", "button");
163    } else {
164      document.getElementById("intro").setAttribute("class", "intro");
165      document.getElementById("info-btn").setAttribute("class", "button hide");
166    }
167  }
168
169
170
171  // Setup Landing Page Items
172  setupLanding();
173
174  function setupLanding(){
175    Object.keys(garments).forEach(createItem);
176  }
177
178  function createItem(obj){
179    var tagsHTML = '';
180    var garmentTags = garments[obj]['tags'];
181
182    garmentTags.forEach(function(tag) {
183      tagsHTML += '<li><a href="tags/?tag='+
184      tag+'">'+tag+'</a></li> ';
185    });
186
187    document.getElementById('page-content').innerHTML +=
188    '<section class="landing-garment">'+
189    '<div class="video">'+
190    '<a href="./garments/?id='+garments[obj]["url"]+'">'+
191    '<video src="media/'+garments[obj]["url"]+garments[obj]["landingVideo"]+'" poster="media/'+garments[obj]["url"]+garments[obj]["landingVideoPoster"]+'" autoplay muted playsinline loop></video>'+
192    '</a>'+
193    '</div>'+
194    '<div class="landing-text">'+
195    '<div class="name">'+
196    '<a href="./garments/?id='+garments[obj]["url"]+'">'+
197    garments[obj]["designer"]+'<br>'+
198    garments[obj]["garmentName"]+'<br>'+
199    garments[obj]["date"]+'</a>'+
200    '<a class="button" href="./garments/?id='+garments[obj]["url"]+'">View</a>'+
201    '</div>'+
202    '<div class="tags">'+
203    '<ul>'+tagsHTML+
204    '</ul>'+
205    '</div>'+
206    '</div>'+
207
208
209    '</section>';
210
211  }
212
213
214  window.onload = function() {
215    var objectCount = Object.keys(garments).length;
216    var currentCount = 1;
217
218function loop(){
219    if(currentCount < objectCount+1){
220      if(garments['garment00'+currentCount]['models']){
221      var modelPath = garments['garment00'+currentCount]['url'] + garments['garment00'+currentCount]['models'][0]['gltf'];
222      preloadModel(modelPath);
223      currentCount++;
224    }else{
225      currentCount++;
226      loop();
227    }
228
229    }else{return}
230}
231loop();
232
233    function preloadModel(obj){
234      var loader = new THREE.FileLoader();
235
236//load a text file and output the result to the console
237loader.load(
238	// resource URL
239	'media/'+obj,
240
241	// onLoad callback
242	function ( data ) {
243    loop();
244		console.log( 'loaded' );
245	},
246	// onProgress callback
247	function ( xhr ) {
248		console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
249	},
250	// onError callback
251	function ( err ) {
252		console.error( 'An error happened' );
253	}
254);
255}
256};
257
258
259
260
261
262</script>

262
263
264</body>
265</html>