Difference between revisions of "Team:Fudan-CHINA"

Line 5: Line 5:
 
 
 
 
−
<!--page-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
<!--page-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
−
<img class="bgPic" src="https://static.igem.org/mediawiki/2018/8/8f/T--Fudan-CHINA--bgpicture2.jpeg" style="z-index: -1;-webkit-filter: brightness(0.85);
+
<div id="div1">
−
filter: brightness(0.85);width=100%" />
+
<!--<img class="bgPic" src="https://static.igem.org/mediawiki/2018/8/8f/T--Fudan-CHINA--bgpicture2.jpeg" style="z-index: -1;-webkit-filter: brightness(0.85);
 +
filter: brightness(0.85);width=100%" />-->
 +
<video id="bgVideo" autoplay muted loop>
 +
    <source  src="https://static.igem.org/mediawiki/2018/f/fd/T--Fudan-CHINA--bgVideo.mp4">
 +
</video>
 +
 +
<div id="stepDiv">
 +
<img id="stepPic" src="https://static.igem.org/mediawiki/2018/1/1d/T--Fudan-CHINA--step_white.png" />
 +
<div id="stepName">&thinsp;S T E P</div>
 +
</div>
 +
<div id="fullName">Synthetic Transducer Engineering Platform</div>
 +
</div>
 +
 +
 
 +
 +
 
 
 
−
<video id="bgVideo" autoplay muted loop style="width: 100%;position: absolute;top:0;left: 0;">
 
−
    <source  src="https://static.igem.org/mediawiki/2018/f/fd/T--Fudan-CHINA--bgVideo.mp4">
 
−
</video>
 
−
 
−
<script>
 
−
function bgPicFun(){
 
−
var winWidth=$(window).width();
 
−
$(".bgPic").css("width",winWidth);
 
−
}
 
−
bgPicFun();
 
−
$(window).resize(function(){
 
−
bgPicFun();
 
−
});
 
−
</script>
 
−
 
−
 
−
<ul id="step" style="
 
−
z-index: 99;
 
−
list-style: none;
 
−
margin: 0;
 
−
padding: 0;
 
−
overflow: hidden;
 
−
position:absolute;
 
−
top:300px;
 
−
height: auto;
 
−
">
 
−
<li class="navLi navImg" style="float: left;"><img class="navA" style="width=200px;height:200px;padding:0px; " src="https://static.igem.org/mediawiki/2018/1/1d/T--Fudan-CHINA--step_white.png" /></li>
 
−
<li class="navLi navImg" style="float: left;"><a class="navA activeA teamName" style="font-family: Algerian,_Algerian;font-size: 13em;font-weight: 400;height:200px;line-height: 200px;" href="#11"> S T E P</a></li>
 
−
 
−
</ul>
 
−
<div id="fullName">Synthetic Transducer Engineering Platform</div>
 
 
<style>
 
<style>
−
#fullName{
+
#div1{
 +
width: 100%;
 +
overflow: hidden;
 +
}
 +
#bgVideo{
 +
position: relative;
 +
}
 +
#stepDiv,#fullName{
 
position: absolute;
 
position: absolute;
−
font-family:"Lucida Calligraphy",_LucidaCalligraphy;
+
 
 +
}
 +
#stepName{
 +
display: inline-block;
 
color: white;
 
color: white;
−
font-size:3.3em;
+
font-family: Algerian,_Algerian;
−
font-weight: 200;
+
 
 +
vertical-align: middle;
 +
}
 +
#stepPic{
 +
max-width: 10.5vw;
 +
max-height: 30vh;
 +
}
 +
#fullName{
 +
color: white;
 +
font-family:"Lucida Calligraphy",_LucidaCalligraphy;
 +
    padding: 0;margin: 0;
 
}
 
}
 
</style>
 
</style>
 
 
 
<script>
 
<script>
−
function pjNameFun(){
+
function div1Fun(){
−
var winWidth=$(window).width();
+
var videoWidth=1920;
−
var winHeight=$(window).height();
+
var videoHeight=1080;
−
var stepWidth=$('#step').width();
+
var winWidth=$(window).width();
−
var stepHeight=$('#step').height();
+
var winHeight=$(window).height();
−
var fnWidth=$('#fullName').width();
+
$("#div1").css("height",winHeight);
−
var fnHeight=$('#fullName').height();
+
if (winWidth*videoHeight>winHeight*videoWidth ){
−
var fnTop=1.2*stepHeight;
+
$("#bgVideo").css("width",winWidth);
−
var totalTop=fnTop+fnHeight;
+
$("#bgVideo").css("top",0.5*(winHeight-videoHeight*winWidth/videoWidth));
−
$("#step").css("left",0.5*(winWidth-stepWidth));
+
$("#bgVideo").css("Height",videoHeight*winWidth/videoWidth);
−
$("#step").css("top",0.5*(winHeight-totalTop));
+
$("#bgVideo").css("left",0);
−
var stepY = $('#step').offset().top;
+
}
−
$("#fullName").css("left",0.5*(winWidth-fnWidth));
+
else{
−
$("#fullName").css("top",stepY+fnTop);
+
$("#bgVideo").css("Height",winHeight);
−
};
+
$("#bgVideo").css("left",0.5*(winWidth-videoWidth*winHeight/videoHeight));
−
/*function pjNameFun(){
+
$("#bgVideo").css("width",videoWidth*winHeight/videoHeight);
−
var winWidth=$(window).width();
+
$("#bgVideo").css("top",0);
−
var winHeight=$(window).height();
+
}
−
var stepWidth=$('#step').width();
+
−
var fnWidth=$('#fullName').width();
+
if (winWidth/winHeight>21/8.5){
−
$("#step").css("left",0.5*(winWidth-stepWidth));
+
$("#stepName").css("font-size","21vh");
−
$("#step").css("top",0.35*winHeight);
+
}
−
    var stepHeight=$('#step').height();
+
else{
−
var stepY = $('#step').offset().top;
+
$("#stepName").css("font-size","8.5vw");
−
$("#fullName").css("left",0.5*(winWidth-fnWidth));
+
}
−
$("#fullName").css("top",stepY+1.2*stepHeight);
+
if (winWidth/winHeight>5/2.2){
−
};*/
+
$("#fullName").css("font-size","5vh");
−
window.onload=pjNameFun();
+
}
−
$(window).resize(function(){
+
else{
−
pjNameFun();
+
$("#fullName").css("font-size","2.2vw");
−
});
+
}
 +
 +
var stepHeight=$("#stepDiv").height();
 +
var stepWidth=$("#stepDiv").width();
 +
var fnWidth=$("#fullName").width();
 +
var fnHeight=$("#fullName").height();
 +
var intervalHeight=0.03*winHeight
 +
$("#stepDiv").css("top",0.5*(winHeight-(stepHeight+intervalHeight+fnHeight)));
 +
$("#fullName").css("top",0.5*(winHeight-(stepHeight+intervalHeight+fnHeight))+stepHeight+intervalHeight);
 +
$("#stepDiv").css("left",0.5*(winWidth-stepWidth));
 +
$("#fullName").css("left",0.5*(winWidth-fnWidth));
 +
 +
}
 +
div1Fun();
 +
$(window).resize(function(){
 +
div1Fun();
 +
});
 +
 
 +
 +
 
 
 
 
</script>
 
</script>
Line 92: Line 115:
 
<!--end--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
<!--end--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
 
 +
 
 
  

Revision as of 06:13, 24 September 2018

 S T E P
Synthetic Transducer Engineering Platform