Difference between revisions of "Team:UCL/Playingaround"
Line 2: | Line 2: | ||
<html> | <html> | ||
<head> | <head> | ||
+ | |||
+ | <script language="JavaScript" type="text/javascript"> | ||
+ | $(document).ready(function(){ | ||
+ | |||
+ | var imgArr = new Array( // relative paths of images | ||
+ | 'https://static.igem.org/mediawiki/2015/7/7f/UCL_block2_2_texture.jpg', | ||
+ | 'https://static.igem.org/mediawiki/2015/c/ca/UCL_block2_3_texture.jpg', | ||
+ | 'https://static.igem.org/mediawiki/2015/c/c3/UCL_block2_1_texture.jpg' | ||
+ | ); | ||
+ | |||
+ | var preloadArr = new Array(); | ||
+ | var i; | ||
+ | |||
+ | /* preload images */ | ||
+ | for(i=0; i < imgArr.length; i++){ | ||
+ | preloadArr[i] = new Image(); | ||
+ | preloadArr[i].src = imgArr[i]; | ||
+ | } | ||
+ | |||
+ | var currImg = 1; | ||
+ | var intID = setInterval(changeImg, 2000); | ||
+ | |||
+ | /* image rotator */ | ||
+ | function changeImg(){ | ||
+ | $('#introo2').animate({opacity: 1}, 1000, function(){ | ||
+ | $(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src +') no-repeat 1px 40px/100%'); | ||
+ | }).animate({opacity: 1}, 1000); | ||
+ | } | ||
+ | |||
+ | }); | ||
+ | </script> | ||
+ | |||
<style> | <style> | ||
Line 19: | Line 51: | ||
width: 100%; | width: 100%; | ||
z-index: 99999; | z-index: 99999; | ||
+ | transition-property: opacity; | ||
+ | transition-duration: 2s;transition-timing-function: ease; | ||
} | } | ||
#logophoto:hover {opacity: 0.7; transition-property: opacity; | #logophoto:hover {opacity: 0.7; transition-property: opacity; | ||
− | transition-duration: | + | transition-duration: 2s;transition-timing-function: ease;} |
#hidden-menu { | #hidden-menu { | ||
Line 30: | Line 64: | ||
#introo1 {width: 100%; height: 100%; position: relative; | #introo1 {width: 100%; height: 100%; position: relative; | ||
− | background: # | + | background: #FBFDFC; background-image: url('https://static.igem.org/mediawiki/2015/9/98/UCL_block1_texture.jpg'); background-repeat: no-repeat; background-position: 0% 0%; background-size: 100%; |
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
font-family: Raleway; | font-family: Raleway; | ||
letter-spacing: 1.1px; font-size: 13px; top: 0px; | letter-spacing: 1.1px; font-size: 13px; top: 0px; | ||
+ | z-index: 9995; | ||
} | } | ||
− | #introo1text {position: absolute; bottom: | + | #introo1text {position: absolute; bottom: 13%; padding-left: 10%; width: 65%; font-size: 20px; letter-spacing: 2px; line-height: 1.8; float: left; display: inline; z-index: 10000;} |
− | #introo1arrow {width: 7%; height: 7%; float: right; display: inline; position: absolute; bottom: | + | #introo1arrow {width: 7%; height: 7%; float: right; display: inline; position: absolute; bottom: 20%; right: 10%; z-index: 10000; opacity: 0.8;} |
− | #introo2 {width: 100%; height: | + | #introo1:after { |
− | + | content: ""; | |
+ | position: absolute; | ||
+ | right: 0px; | ||
+ | left: 0px; | ||
+ | bottom: 0px; | ||
+ | height: 100px !important; | ||
+ | background-image: url('https://static.igem.org/mediawiki/2015/c/c3/UCL_block2_1_texture.jpg'); | ||
+ | -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 100, from(rgba(0,0,0,0)), to(rgba(0,0,0,1))); | ||
+ | |||
+ | |||
+ | background-size: 100%; | ||
+ | background-position: 1px 0%; | ||
+ | background-repeat: no-repeat; | ||
+ | -webkit-transition: opacity 1s; | ||
+ | -moz-transition: opacity 1s; | ||
+ | transition: opacity 1s; | ||
+ | opacity: 0.3; | ||
+ | z-index: 9996; | ||
+ | |||
+ | display: block; | ||
+ | |||
+ | } | ||
+ | |||
+ | #introo1:hover:after { | ||
+ | opacity: 1; z-index: 9996; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | #introo2 {width: 100%; height: 110%; position: relative; top: -100px; margin-top: 100px; | ||
+ | background-image: url('https://static.igem.org/mediawiki/2015/c/c3/UCL_block2_1_texture.jpg'); | ||
+ | -webkit-mask-image: -webkit-gradient(linear, 0 40, 0 80, from(rgba(0,0,0,0)), to(rgba(0,0,0,1))); | ||
+ | |||
+ | |||
+ | background-repeat: no-repeat; background-position: 1px 40px; background-size: 100% ; background-color: no-color; | ||
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
font-family: Raleway; | font-family: Raleway; | ||
− | letter-spacing: 1.1px; font-size: 13px; | + | letter-spacing: 1.1px; font-size: 13px; |
+ | |||
+ | |||
+ | transition-property: background-image, color, border-color; | ||
+ | transition-duration: 0.2s; | ||
+ | transition-timing-function: ease-in; | ||
+ | z-index: 9997; | ||
} | } | ||
− | #introo2text {position: absolute; bottom: | + | #introo2text {position: absolute; bottom: 20%; right: 10%; width: 65%; font-size: 23px; letter-spacing: 2.5px; line-height: 2.1; float: right; display: inline; z-index: 9999;} |
− | #introo2arrow {width: 7%; height: | + | #introo2arrow {width: 7%; height: 17%; float: left; display: inline; position: absolute; bottom: 10%; left: 7%; z-index: 9999; opacity: 0.8;} |
+ | #introo2:after { | ||
+ | content: ""; | ||
+ | position: absolute; | ||
+ | right: 0px; | ||
+ | left: 0px; | ||
+ | bottom: 0px; | ||
+ | height: 100px !important; | ||
+ | background-image: url('https://static.igem.org/mediawiki/2015/1/15/UCL_block3_texture3.jpg'); | ||
+ | -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 80, from(rgba(0,0,0,0)), to(rgba(0,0,0,1))); | ||
+ | display: block; | ||
+ | background-size: 100%; | ||
+ | background-position: 1px 55%; | ||
+ | background-repeat: no-repeat; | ||
+ | -webkit-transition: opacity 1s; | ||
+ | -moz-transition: opacity 1s; | ||
+ | transition: opacity 1s; | ||
+ | opacity: 0.3; | ||
+ | z-index: 9998; | ||
+ | } | ||
+ | #introo2:hover:after { | ||
+ | opacity: 1; z-index: 9998; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | #introo3 {width: 100%; height: 110%; position: relative; top: -200px; | ||
+ | |||
+ | |||
+ | background-image: url('https://static.igem.org/mediawiki/2015/1/15/UCL_block3_texture3.jpg'); | ||
+ | -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 80, from(rgba(0,0,0,0)), to(rgba(0,0,0,1))); | ||
+ | |||
+ | |||
+ | background-repeat: no-repeat; background-position: left 0px bottom 0px; background-size: 100%; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | font-family: Raleway; | ||
+ | letter-spacing: 1.1px; font-size: 13px; z-index: 9999; margin-bottom: 118px; border-bottom: 10px solid #014c4b; | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | #introo3text {position: absolute; top: 13%; right: 10%; width: 80%; font-size: 19px; letter-spacing: 2.2px; line-height: 1.8; float: right; display: inline; z-index: 10001;} | ||
+ | |||
+ | #introo3dna {background-image: url('https://static.igem.org/mediawiki/2015/a/ab/UCL_Gearicon.png'); background-size: 100%; background-repeat: no-repeat; background-position: center center; width: 8%; height: 15%; position: relative; bottom: 35%; left: 24.5%; opacity: 0.5; | ||
+ | |||
+ | -webkit-animation-name: spinnerRotate; | ||
+ | -webkit-animation-duration: 10s; | ||
+ | -webkit-animation-iteration-count: infinite; | ||
+ | -webkit-animation-timing-function: linear; | ||
+ | -moz-animation-name: spinnerRotate; | ||
+ | -moz-animation-duration: 10s; | ||
+ | -moz-animation-iteration-count: infinite; | ||
+ | -moz-animation-timing-function: linear; | ||
+ | -ms-animation-name: spinnerRotate; | ||
+ | -ms-animation-duration: 10s; | ||
+ | -ms-animation-iteration-count: infinite; | ||
+ | -ms-animation-timing-function: linear; | ||
+ | z-index: 10001; | ||
+ | } | ||
+ | #introo3dna-img {width: 8%; height: 15%; line-height: 50%; position: absolute; bottom: 35%; left: 24.5%; opacity: 0.8; | ||
+ | z-index: 10001;} | ||
+ | #todescription {position: absolute; bottom: 10%; width: 100%;} | ||
+ | #centerbutton {position: relative; margin: 0 auto; width: 17%; left: 10px; transition-property: opacity; | ||
+ | transition-duration: 2s;transition-timing-function: ease;} | ||
+ | #centerbutton:hover {opacity: 0.5; transition-property: opacity; | ||
+ | transition-duration: 2s;transition-timing-function: ease; } | ||
@media (max-width:1024px){ | @media (max-width:1024px){ | ||
− | #introo1 {background-position: | + | #introo1 {} |
− | #introo1text {font-size: 17px; line-height: 1.5;} | + | #introo2 { height: 100%;} |
+ | #introo3 {height: 100%; background-position: left 0px bottom -35px;} | ||
+ | #introo1text, #introo1arrow {font-size: 18px; line-height: 1.5;} | ||
+ | #introo2text {font-size: 20px; line-height: 1.5; bottom: 15%;} | ||
+ | #introo3text {font-size: 17px; line-height: 1.5; top: 20%;} | ||
+ | #todescription {bottom: 3%;} | ||
} | } | ||
@media (max-width:768px){ | @media (max-width:768px){ | ||
− | #introo1 {background-position: 0 | + | #introo1 {background-position: 0 100px;} |
− | # | + | #introo1text {font-size: 18px; line-height: 1.5; bottom: 10%;} |
− | #introo1arrow {width: 10%; height: 10%;} | + | #introo2text {font-size: 20px; line-height: 1.5; bottom: 10%;} |
+ | #introo1arrow, #introo2arrow {width: 10%; height: 10%;} | ||
+ | #introo3dna {bottom: 100px;} | ||
+ | #introo3dna-img {bottom: 80px;} | ||
+ | #todescription {bottom: 1%;} | ||
} | } | ||
Line 74: | Line 225: | ||
#introo1 {background-position: 0 100px;} | #introo1 {background-position: 0 100px;} | ||
#introo1text {font-size: 15px; line-height: 1.5;} | #introo1text {font-size: 15px; line-height: 1.5;} | ||
− | #introo1arrow {width: 13%; height: 13%;} | + | #introo2text {font-size: 17px; line-height: 1.5; bottom: 20%;} |
+ | #introo1arrow, #introo2arrow {width: 13%; height: 13%;} | ||
} | } | ||
Line 81: | Line 233: | ||
@media (max-width:360px){ | @media (max-width:360px){ | ||
#introo1 {background-position: 0 60px;} | #introo1 {background-position: 0 60px;} | ||
− | #introo1text {font-size: 14px; line-height: 1.2;} | + | #introo1text, #introo2text {font-size: 14px; line-height: 1.2;} |
− | #introo1arrow {width: | + | #introo2text {font-size: 15px; line-height: 1.5; bottom: 20%;} |
+ | #introo1arrow, #introo2arrow {width: 15%; height: 15%;} | ||
} | } | ||
+ | |||
+ | |||
+ | @-webkit-keyframes spinnerRotate | ||
+ | { | ||
+ | from{-webkit-transform:rotate(0deg);} | ||
+ | to{-webkit-transform:rotate(360deg);} | ||
+ | } | ||
+ | @-moz-keyframes spinnerRotate | ||
+ | { | ||
+ | from{-moz-transform:rotate(0deg);} | ||
+ | to{-moz-transform:rotate(360deg);} | ||
+ | } | ||
+ | @-ms-keyframes spinnerRotate | ||
+ | { | ||
+ | from{-ms-transform:rotate(0deg);} | ||
+ | to{-ms-transform:rotate(360deg);} | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | #footer {background: #493C54; background-image: url('https://static.igem.org/mediawiki/2015/b/b0/UCL_University_College_London2.jpg'); background-position: center 70%; background-size: 100%; width: 100%; height: 120px; position: fixed; bottom: 0; left: 0; margin: 0 auto; z-index: -1; } | ||
+ | |||
+ | |||
</style> | </style> | ||
Line 118: | Line 294: | ||
</div> | </div> | ||
− | <div id="introo1"> | + | <div id="introo1" class="bgswitch"> |
<div style="clear: both;"></div> | <div style="clear: both;"></div> | ||
Line 148: | Line 324: | ||
<div id="introo2arrow"> <a data-scroll data-options='{ "easing": "linear" }' href="#introo3"><img src="https://static.igem.org/mediawiki/2015/b/b5/Intro2arrow.jpg" style="width: 100%;"></a></div> | <div id="introo2arrow"> <a data-scroll data-options='{ "easing": "linear" }' href="#introo3"><img src="https://static.igem.org/mediawiki/2015/b/b5/Intro2arrow.jpg" style="width: 100%;"></a></div> | ||
</div> | </div> | ||
+ | |||
+ | <div id="introo3"> | ||
+ | |||
+ | |||
+ | <div id="introo3text"> | ||
+ | |||
+ | Being inspired by this emerging research area, <span style="color: #019966;">UCL iGEM 2015</span> team wants to explore the modulation of the gut bacteria as a strategy for developing <span style="color: #019966;">novel treatments</span> for <span style="color: #019966;">mental health</span> disorders. Ultimately, our goal is to <span style="font-size: 130%;">harness <span style="color: #019966;">synthetic biology</span> to make people <span style="color: #019966;">happy</span>! </span> | ||
+ | |||
+ | |||
</div> | </div> | ||
+ | <div id="introo3dna"></div> | ||
+ | <div id="introo3dna-img"><img src="https://static.igem.org/mediawiki/2015/4/4a/UCL_Dnaicon.png" style="width: 100%;"></div> | ||
+ | <div id="todescription"><div id="centerbutton"><a href="https://2015.igem.org/Team:UCL/Description" ><img src="https://static.igem.org/mediawiki/2015/9/93/UCL_mtg_green.png" style="width: 100%; position: relative;"></a></div> </div> | ||
+ | |||
+ | |||
+ | </div> | ||
+ | |||
+ | <div style="clear: both;"></div> | ||
+ | |||
+ | <div id="footer"> | ||
<div class="back"> | <div class="back"> | ||
− | + | ||
+ | <a href="http://twitter.com/UCLiGEM"><img src="https://static.igem.org/mediawiki/2015/6/64/Twitter-512.png" style="width: 40px; height: 40px;"></a> | ||
+ | |||
+ | <a href="http://www.facebook.com/UCLiGEM?fref=ts"><img src="https://static.igem.org/mediawiki/2015/6/69/UCL_fbicon.png" style="width: 35px; height: 35px;"></a> | ||
+ | |||
+ | <a href="mailto: ucligem2015@gmail.com"><img src="https://static.igem.org/mediawiki/2015/2/21/UCLEmailicom.png" style="width: 40px; height: 40px;"></a><br><a data-scroll data-options='{ "easing": "linear" }' href="#header">Back to top</a> | ||
</div> | </div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
</div> | </div> |
Revision as of 18:45, 25 August 2015