Difference between revisions of "Template:Fudan-CHINA"

Line 1: Line 1:
 
<html>
 
<html>
−
+
 
<!--start---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
<!--start---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
</p>
 
</p>
Line 211: Line 211:
 
.no-js h1 {color: #222222;}
 
.no-js h1 {color: #222222;}
 
 
−
#loader-wrapper .load_title {/*words*/
 
−
    font-family:_Quicksand;
 
−
    color:#FFF;
 
−
font-size:19px;
 
−
width:100%;
 
−
text-align:center;
 
−
z-index:9999999999999;
 
−
position:absolute;
 
−
top:60%;
 
−
opacity:1;
 
−
line-height:30px;
 
−
}
 
−
#loader-wrapper .load_title span { 
 
−
font-family: _Algerian;
 
−
font-weight:normal;
 
−
font-size:13px;
 
−
color:#FFF;
 
−
opacity:0.5;
 
−
}
 
  
  
Line 239: Line 220:
 
     <div class="loader-section section-left"></div>
 
     <div class="loader-section section-left"></div>
 
     <div class="loader-section section-right"></div>
 
     <div class="loader-section section-right"></div>
−
    <div class="load_title">LOADING<br><span>Fudan-CHINA</span></div>
 
 
</div>
 
</div>
 
 
−
<script type="text/javascript">       
+
<script>
−
    function rmLoading(){
+
$(function(){
−
setTimeout(function(){ $('body').addClass('loaded');
+
var myBgVideo=document.getElementById("bgVideo");
−
        $('#loader-wrapper .load_title').remove(); }, 1500);
+
myBgVideo.addEventListener('canplaythrough',function(){
−
    };  
+
setTimeout(function(){ $('body').addClass('loaded');
−
window.onload=rmLoading();
+
        $('#loader-wrapper .load_title').remove(); }, 100);
 +
});
 +
});
 +
$(function(){
 +
var myBgVideo=document.getElementById("bgVideo");
 +
setTimeout(function(){ $('body').addClass('loaded');
 +
        $('#loader-wrapper .load_title').remove(); }, 5000);
 +
});
 +
 +
   
 
</script>   
 
</script>   
 
<!--------------------------------------------------------------------------------------------------------------------------------------------------->
 
<!--------------------------------------------------------------------------------------------------------------------------------------------------->
Line 253: Line 242:
 
 
  
−
 
−
 
−
 
−
 
−
 
−
<!--make the menu hidden------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
−
<script>
 
−
$(document).ready(function(){
 
−
  $('#sideMenu').remove();
 
−
  let trigger = document.createElement('div');
 
−
$(trigger).attr('id','menu-trigger');
 
−
let menu = document.getElementById('top_menu_14');
 
−
  $(trigger).mouseenter(function(){
 
−
$(menu).css('top','0');
 
−
  });
 
−
  $(trigger).mouseleave(function(){
 
−
    $(menu).css('top','-20px');
 
−
  });
 
−
  document.body.appendChild(trigger);
 
−
});
 
−
</script>
 
−
 
−
 
−
 
−
<style>
 
−
 
−
#top_menu_14{
 
−
  top: -20px; padding-bottom: 2px; transition: top 0.3s;
 
−
}
 
−
#top_menu_14:hover {
 
−
    top: 0 !important;
 
−
}
 
−
#menu-trigger{
 
−
  width:100%;
 
−
  height:16px;
 
−
  position:fixed;
 
−
  left:0;
 
−
  top:0;
 
−
  z-index:10;
 
−
}
 
−
#HQ_page ul.navigation-bar > li > ul.sub-menu > li{
 
−
  min-width: 100px;
 
−
}
 
−
#HQ_page ul.navigation-bar > li > ul > li.long{
 
−
  min-width: 160px;
 
−
}
 
−
</style>
 
−
<!---------------------------------------------------------------------------------------------------------------------------------------------------->
 
−
 
−
 
−
 
−
 
−
 
−
<!--navigation bar-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
−
<style>
 
−
#navUl{
 
−
list-style: none;
 
−
margin: 0;
 
−
padding: 0;
 
−
overflow: hidden;
 
−
position:fixed;
 
−
width: 1500px;
 
−
}
 
−
.navLi:not(.navImg){
 
−
float: right;
 
−
}
 
−
.navA{
 
−
display: block;
 
−
height: 110px;
 
−
padding:0 20px;
 
−
color:white;
 
−
font-family:_Butler;
 
−
font-weight: 400;
 
−
font-size: 30px;
 
−
text-align: center;
 
−
line-height: 110px;
 
−
}
 
−
.teamName{
 
−
font-family:_Zelda;
 
−
font-weight: 400;
 
−
font-size: 35px;
 
−
}
 
−
.navA:link{
 
−
text-decoration: none;
 
−
}
 
−
 
−
.navA:visited{
 
−
color: white;
 
−
}
 
−
 
−
.navA:hover:not(.activeA){
 
−
color: rgba(0,189,234,1);
 
−
}
 
−
.jqhover {
 
−
        color:black  !important;
 
−
    }
 
−
.navA:hover{
 
−
text-decoration:none;
 
−
}
 
−
 
−
    .navA:active{
 
−
text-decoration:none;
 
−
color: white;
 
−
}
 
−
 
−
</style>
 
−
 
−
 
−
 
−
<ul id="navUl" style="z-index: 999;">
 
−
<li class="navLi navImg" style="display: inline-block;float: left;width: 10px;" href="#8"></li>
 
−
<li class="navLi navImg" style="float: left;"><a href="https://2018.igem.org/Team:Fudan-CHINA"><img class="navA" style="width=80px;height:80px;padding:15px; " src="https://static.igem.org/mediawiki/2018/6/6b/T--Fudan-CHINA--teamBadgeWhite_noCircle.png" /></a></li>
 
−
<li class="navLi navImg" style="float: left;position: relative;"><a class="navA activeA teamName" href="https://2018.igem.org/Team:Fudan-CHINA">Fudan-CHINA</a></li>
 
−
  <li class="navLi"><a class="navA" href="#7">Team</a></li>
 
−
<li class="navLi"><a class="navA" href="#6">Parts</a></li>
 
−
<li class="navLi"><a class="navA" href="#5">Practices</a></li>
 
−
<li class="navLi"><a class="navA" href="#4">Lab</a></li>
 
−
<li class="navLi"><a class="navA" href="#3">Modeling</a></li>
 
−
<li class="navLi"><a class="navA" href="#2">Project</a></li>
 
−
</ul>
 
−
<script>
 
−
function navFun(){
 
−
var winWidth=$(window).width();
 
−
var navWidth=$('#navUl').width();
 
−
var winHeight=$(window).height();
 
−
$("#navUl").css("left",0.5*(winWidth-navWidth));
 
−
$("#navUl").css("top",0.1*winHeight);
 
−
};
 
−
window.onload=navFun();
 
−
 
−
$(window).resize(function(){
 
−
navFun();
 
−
});
 
−
 
−
    $(window).scroll(function(){
 
−
var winHeight=$(window).height();
 
−
        var topDis = $(window).scrollTop();
 
−
if(topDis >150){
 
−
$("#navUl").stop().animate({top:'0px',backgroundColor:"rgba(4,198,215,1)",boxShadow:"0px 0px 5px"},"fast");
 
−
    $(".navA:not(.activeA)").hover(function () {
 
−
                $(this).addClass("jqhover");
 
−
            }).mouseout(function () {
 
−
$(this).removeClass("jqhover");
 
−
            });
 
−
}
 
−
else{
 
−
$("#navUl").stop().animate({top:0.1*winHeight,backgroundColor:"transparent"},"fast");
 
−
$(".navA:not(.activeA)").hover(function () {
 
−
                $(this).removeClass("jqhover");
 
−
            });
 
−
};
 
−
    });
 
−
</script>
 
−
 
−
 
−
 
−
 
−
 
−
 
−
<!---------------------------------------------------------------------------------------------------------------------------------------------------->
 
−
 
−
 
  
  

Revision as of 17:02, 21 September 2018