|
|
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 104: |
Line 69: |
| } | | } |
| | | |
− |
| |
− | @media (max-width:696px){
| |
− | #twit {display:none;};
| |
− | }
| |
| | | |
| | | |
Line 180: |
Line 141: |
| | | |
| | | |
− | #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;
| |
− | padding: 0;
| |
− | font-family: Raleway;
| |
− | 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: 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: 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: absolute; 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){ |
Line 368: |
Line 238: |
| | | |
| </div> | | </div> |
− |
| |
| </div> | | </div> |
− |
| |
− |
| |
− |
| |
| | | |
| </div> | | </div> |
| | | |
− | <div id="introo1" class="bgswitch"> | + | <div id="introo1"> |
| | | |
| <div style="clear: both;"></div> | | <div style="clear: both;"></div> |
Line 390: |
Line 256: |
| </h5> | | </h5> |
| </div> | | </div> |
− | | + | </div> |
− | <!--<div id="introo1arrow"> <a data-scroll data-options='{ "easing": "linear" }' href="#introo2"><img src="https://static.igem.org/mediawiki/2015/f/f7/UCL_Intro1arrow.jpg" style="width: 100%;"></a></div>-->
| + | |
− | | + | |
− | | + | |
− | | + | |
− | </div> | + | |
− | | + | |
− | | + | |
| | | |
| <div id="introo2"> | | <div id="introo2"> |
Line 408: |
Line 267: |
| <source src="https://static.igem.org/mediawiki/2015/b/b1/Mind_the_gut_UCL_iGEM_2015_Wiki.mp4"> | | <source src="https://static.igem.org/mediawiki/2015/b/b1/Mind_the_gut_UCL_iGEM_2015_Wiki.mp4"> |
| </video> | | </video> |
− | </div> | + | </div></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 id="introo3">
| |
− |
| |
− |
| |
− | <div id="introo3text">
| |
− |
| |
− | Inspired by this emerging research area, <span style="color: #019966;">the 2015 UCL iGEM </span> team explores the modulation of 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 this knowledge and use <span style="color: #019966;">synthetic biology</span> to make people <span style="color: #019966;">happy</span>! </span>
| |
− |
| |
− |
| |
− | </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/a/aa/UCL_mtg_green_project_description.png" style="width: 70%; position: relative;"></a></div> </div>-->
| |
− |
| |
− |
| |
− | </div>
| |
| | | |
| <div style="clear: both;"></div> | | <div style="clear: both;"></div> |
Line 462: |
Line 301: |
| </div> | | </div> |
| | | |
− | </div>
| |
| | | |
− | </div>
| |
− |
| |
− |
| |
− |
| |
− | </div>
| |
| | | |
| | | |
Line 475: |
Line 308: |
| | | |
| | | |
− |
| |
− | <script src="https://cferdinandi.github.io/smooth-scroll/dist/js/smooth-scroll.js"></script>
| |
− | <script>
| |
− | smoothScroll.init({
| |
− | speed: 1000,
| |
− | easing: 'easeInOutCubic',
| |
− | offset: 0,
| |
− | updateURL: true,
| |
− | callbackBefore: function ( toggle, anchor ) {},
| |
− | callbackAfter: function ( toggle, anchor ) {}
| |
− | });
| |
− | </script>
| |
| | | |
| | | |