View source for Template:Fudan-CHINA/initialize

<html>

	<!--start---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->						
						
						
<!--TEMPLATE:initialize-->
												
<!--get jQuery and wiki settings------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->	
<style>
	#top_menu_under,#home_logo, #sideMenu,#top,.logo_2018,#firstHeading ,#top_title, .patrollink { display:none; }
	.mediawiki,#globalWrapper,#content,#HQ_page,#bodyContent,#mw-content-text { width:100%; padding:0px;  margin:0px; }
	#top_menu_14{position: fixed;top:0;}

	#mw-content-text>p{padding: 0; margin: 0;width: 100%;}
	a, button, input, textarea {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -moz-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}
</style>



					
<script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:Fudan-CHINA/jQuery&amp;action=raw&amp;ctype=text/javascript">
//jQuery
</script>
<script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:Fudan-CHINA/jQueryUi&amp;action=raw&amp;ctype=text/javascript">
//jQueryUi
</script>				
<script type="text/javascript" src="https://2018.igem.org/wiki/index.php?title=Template:Fudan-CHINA/jQueryAnimateColors&amp;action=raw&amp;ctype=text/javascript">
//jQuery_AnimateColors
</script>
<link href="https://2018.igem.org/wiki/index.php?title=Template:Fudan-CHINA/font_awesome&action=raw&ctype=text/css" rel="stylesheet">
			

						

<!---------------------------------------------------------------------------------------------------------------------------------------------------->	
					
<!--get fonts----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->						
<style>
	@font-face
	{
  		font-family:_Quicksand;
 		 src: url('https://static.igem.org/mediawiki/2018/8/8a/T--Fudan-CHINA--Quicksand.ttf');
	}
	@font-face
	{
  		font-family:_LucidaCalligraphy;/*for fullname of STEP*/
 		 src: url('https://static.igem.org/mediawiki/2018/a/a8/T--Fudan-CHINA--LucidaCalligraphy.ttf');
	}
	@font-face
	{
  		font-family:_CalistoMT;
 		 src: url('https://static.igem.org/mediawiki/2018/b/be/T--Fudan-CHINA--CalistoMT.ttf');
	}
	@font-face
	{
  		font-family:_Algerian;
 		 src: url('https://static.igem.org/mediawiki/2018/5/56/T--Fudan-CHINA--Algerian.ttf');
	}
	@font-face
	{
  		font-family:_ZELDA;/*for team name*/
 		 src: url('https://static.igem.org/mediawiki/2018/d/df/T--Fudan-CHINA--ZELDA.ttf'),
			  url('https://static.igem.org/mediawiki/2018/6/63/T--Fudan-CHINA--ZELDA.eot');
	}
	@font-face
	{
  		font-family:_Butler;
 		 src: url('https://static.igem.org/mediawiki/2018/e/e1/T--Fudan-CHINA--Butler.ttf'),
			  url('https://static.igem.org/mediawiki/2018/c/c9/T--Fudan-CHINA--Butler.eot');/*IE 9+*/
	}
	@font-face
	{
  		font-family:_Allura;
 		src: url('https://static.igem.org/mediawiki/2018/6/69/T--Fudan-CHINA--Allura-Regular.otf');
	}
	@font-face
	{
  		font-family:_VerlagBook;
 		src: url('https://static.igem.org/mediawiki/2018/f/fe/T--Fudan-CHINA--VerlagBook.otf');
	}
	
	
</style>

<!---------------------------------------------------------------------------------------------------------------------------------------------------->
		
						
						
						
<!--loading page------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<style>
.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}
#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index:999999;
	
	}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    /* COLOR 1 */
    border-top-color: rgba(255,0,255,1);
    -webkit-animation: spin 2s linear infinite;
    -ms-animation: spin 2s linear infinite; 
    -moz-animation: spin 2s linear infinite; 
    -o-animation: spin 2s linear infinite;   
        animation: spin 2s linear infinite; 
    z-index:1001;
	}
#loader:before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border-radius: 50%;
        border: 3px solid transparent;
        /* COLOR 2 */       
        border-top-color: rgba(255,255,0,1);
        -webkit-animation: spin 3s linear infinite; 
        -moz-animation: spin 3s linear infinite; 
        -o-animation: spin 3s linear infinite; 
        -ms-animation: spin 3s linear infinite;           
        animation: spin 3s linear infinite; 
}
#loader:after {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: rgba(0,255,255,1);
        /* COLOR 3 */       
        -moz-animation: spin 1.5s linear infinite; 
        -o-animation: spin 1.5s linear infinite; 
        -ms-animation: spin 1.5s linear infinite;         
        -webkit-animation: spin 1.5s linear infinite; 
          animation: spin 1.5s linear infinite; 
}


@-webkit-keyframes spin {
        0%{ 
            -webkit-transform: rotate(0deg);   
            -ms-transform: rotate(0deg);  
            transform: rotate(0deg);   
        }100%{
            -webkit-transform: rotate(360deg);  
            -ms-transform: rotate(360deg);  
            transform: rotate(360deg); }
}

@keyframes spin {
        0%{ 
            -webkit-transform: rotate(0deg);  
            -ms-transform: rotate(0deg); 
            transform: rotate(0deg);  
        }100%{
            -webkit-transform: rotate(360deg); 
            -ms-transform: rotate(360deg);  
            transform: rotate(360deg);  }
}


#loader-wrapper .loader-section {
        position: fixed;
        top: 0;
        width: 51%;
        height: 100%;
        background: rgba(2,28,53,1); /* loading background color!!!*/
        z-index: 1000;
        -webkit-transform: translateX(0);  
        -ms-transform: translateX(0);  
        transform: translateX(0); 
}
#loader-wrapper .loader-section.section-left {left: 0;}
#loader-wrapper .loader-section.section-right {right: 0;}

/* Loaded */
.loaded #loader-wrapper .loader-section.section-left {
        -webkit-transform: translateX(-100%);  
            -ms-transform: translateX(-100%);  
                transform: translateX(-100%);  
        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
                transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.loaded #loader-wrapper .loader-section.section-right {
        -webkit-transform: translateX(100%);  
            -ms-transform: translateX(100%);  
                transform: translateX(100%);  
        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.loaded #loader {
        opacity: 0;
        -webkit-transition: all 0.3s ease-out;  
                transition: all 0.3s ease-out;
}
.loaded #loader-wrapper {
        visibility: hidden;
        -webkit-transform: translateY(-100%);  
            -ms-transform: translateY(-100%);  
                transform: translateY(-100%);  
        -webkit-transition: all 0.3s 1s ease-out;  
                transition: all 0.3s 1s ease-out;
}
/* JavaScript Turned Off */
.no-js #loader-wrapper {display: none;}
.no-js h1 {color: #222222;}
	


</style>
 

<div id="loader-wrapper">
    <div id="loader"></div>
    <div class="loader-section section-left"></div>
    <div class="loader-section section-right"></div>
</div>
						
<script>
	$(function(){
		var myBgVideo=document.getElementById("bgVideo");
		myBgVideo.addEventListener('canplaythrough',function(){
			setTimeout(function(){ $('body').addClass('loaded');
        	$('#loader-wrapper .load_title').remove(); },500);
		});
	});
	$(function(){
		var myBgVideo=document.getElementById("bgVideo");
			setTimeout(function(){ $('body').addClass('loaded');
        	$('#loader-wrapper .load_title').remove(); }, 1000);
	});
		
   	function slideInTop(obj,obj2,delayTime){
		var targetHeight = obj.offset().top-50;
		var scrollTop = $(document).scrollTop();
		var winHeight=$(window).height();
		var imgHeight=obj2.height();
		if(scrollTop+winHeight-0.3*imgHeight>targetHeight){
			 setTimeout(function(){  obj.animate({top:'0px',opacity:1},800,"easeInOutCubic"); }, delayTime);
		}
	};
	function slideInLeft(obj,obj2,delayTime){
		var targetHeight = obj.offset().top;
		var scrollTop = $(document).scrollTop();
		var winHeight=$(window).height();
		var imgHeight=obj2.height();
		if(scrollTop+winHeight-0.3*imgHeight>targetHeight){
			 setTimeout(function(){  obj.animate({left:'0px',opacity:1},800,"easeInOutCubic"); }, delayTime);
		}
	}; 
</script>   
<!--------------------------------------------------------------------------------------------------------------------------------------------------->
					
<!--TEMPLATE END:initialize-->		


</html>