Line 52: | Line 52: | ||
/* Navbar and body setup */ | /* Navbar and body setup */ | ||
body { | body { | ||
− | + | overflow:hidden; | |
− | + | ||
− | + | ||
} | } | ||
Line 68: | Line 66: | ||
color: white; | color: white; | ||
font-weight: 300; | font-weight: 300; | ||
+ | overflow: hidden; | ||
} | } | ||
Line 133: | Line 132: | ||
.notOutline { | .notOutline { | ||
− | margin-top: | + | margin-top: 160px; |
+ | min-height: 400px; | ||
} | } | ||
Line 141: | Line 141: | ||
a { | a { | ||
padding-right: 0px !important; | padding-right: 0px !important; | ||
+ | text-decoration: none !important; | ||
} | } | ||
Line 164: | Line 165: | ||
line-height: 1em; | line-height: 1em; | ||
margin-right: 40px; | margin-right: 40px; | ||
+ | } | ||
+ | |||
+ | .prompt:hover, #img-arrow:hover { | ||
+ | cursor: pointer; | ||
} | } | ||
Line 193: | Line 198: | ||
</div> | </div> | ||
<div class="tour"> | <div class="tour"> | ||
− | + | <p class="prompt" onclick="transition()">Take our <br />virtual tour!</p> | |
− | + | <img onclick="transition()" src="https://static.igem.org/mediawiki/2016/d/db/T--UMaryland--arrow.png" id="img-arrow" width="32px"/> | |
</div> | </div> | ||
<div class="covervid-wrapper"> | <div class="covervid-wrapper"> | ||
Line 201: | Line 206: | ||
<source src="https://static.igem.org/mediawiki/2016/0/03/T--UMaryland--landfill.mp4" type="video/mp4"> | <source src="https://static.igem.org/mediawiki/2016/0/03/T--UMaryland--landfill.mp4" type="video/mp4"> | ||
</video> | </video> | ||
+ | </div> | ||
+ | <div id="div-frame"> | ||
+ | |||
</div> | </div> | ||
</div> | </div> | ||
<style> | <style> | ||
+ | #div-frame { | ||
+ | position: absolute; | ||
+ | overflow: hidden; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | top: 0px; | ||
+ | left: 0px; | ||
+ | z-index: -999; | ||
+ | } | ||
+ | |||
+ | .tourFrame { | ||
+ | display: none; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | top: 0px; | ||
+ | left: 0px; | ||
+ | position: absolute; | ||
+ | } | ||
+ | |||
.covervid-wrapper { | .covervid-wrapper { | ||
position: absolute; | position: absolute; | ||
Line 219: | Line 246: | ||
resizeVid(); | resizeVid(); | ||
+ | resizeFrame(); | ||
+ | |||
$( window ).resize(function() { | $( window ).resize(function() { | ||
resizeVid() | resizeVid() | ||
+ | resizeFrame() | ||
}) | }) | ||
+ | |||
+ | function resizeFrame() { | ||
+ | var frameHeight = $(window).outerHeight(true); | ||
+ | |||
+ | } | ||
function resizeVid() { | function resizeVid() { | ||
Line 271: | Line 306: | ||
$('.tour').animateCss('slideInLeft'); | $('.tour').animateCss('slideInLeft'); | ||
$('.tour').css('display','block') | $('.tour').css('display','block') | ||
+ | timeoutID = window.setTimeout(show5, 5000); | ||
} | } | ||
+ | function show5() { | ||
+ | $('.tour').animateCss('pulse'); | ||
+ | timeoutID = window.setTimeout(show5, 5000); | ||
+ | } | ||
+ | |||
+ | function transition() { | ||
+ | $('nav, #small, #h3, #h2, .tour').animateCss('fadeOutDown'); | ||
+ | timeoutID = window.setTimeout(loading, 1000); | ||
+ | } | ||
+ | |||
+ | function loading() { | ||
+ | $('nav, #small, #h3, #h2, .hide, .tour').css('display','none'); | ||
+ | $('#h2').removeClass('animated ' + 'fadeOutDown'); | ||
+ | $('#h2').css('padding-top','80px'); | ||
+ | $('#h2').text('Loading virtual tour...'); | ||
+ | $('#h2').animateCss('fadeInUp'); | ||
+ | timeoutID = window.setTimeout(slideOut, 1000); | ||
+ | } | ||
+ | |||
+ | function slideOut() { | ||
+ | $('#h2').css('display','block'); | ||
+ | var slide = 1 | ||
+ | $('#div-frame').html('<iframe class="tourFrame" src="https://2016.igem.org/Team:UMaryland/education"></iframe>'); | ||
+ | |||
+ | $('.tourFrame').load(function () { | ||
+ | |||
+ | if (slide == 1) { | ||
+ | $('body').css('height','400px') | ||
+ | var left = $(document).outerWidth(true); | ||
+ | $('#div-frame').css('z-index','999999') | ||
+ | $('#div-frame').css('left', left); | ||
+ | $('.tourFrame').css('display','block') | ||
+ | $('#div-frame').css('display','block'); | ||
+ | $('#div-frame').animate({left:0},2000); | ||
+ | timeoutID = window.setTimeout(destroyVid, 2000); | ||
+ | slide = 0; | ||
+ | } | ||
+ | |||
+ | |||
+ | }) | ||
+ | } | ||
+ | |||
+ | function destroyVid() { | ||
+ | $('nav, #small, #h3, #h2, #img-logo, .hide, .tour').remove(); | ||
+ | $('.covervid-wrapper').remove(); | ||
+ | } | ||
</script> | </script> | ||
</html> | </html> |
Revision as of 23:26, 5 September 2016
</div></div>