Template:Team:KIT-Kyoto/first

From 2014.igem.org

(Difference between revisions)
 
(34 intermediate revisions not shown)
Line 2: Line 2:
<div class="clear"><hr /></div>
<div class="clear"><hr /></div>
<div id="first">
<div id="first">
-
<img src="https://static.igem.org/mediawiki/2014/7/7f/Kitlogo.png" width="120" height="120" alt="kit" style="margin:auto;"><br>
+
<img src="https://static.igem.org/mediawiki/2014/7/7f/Kitlogo.png" width="140" height="140" alt="kit" style="">
-
<div id="pc"><a href="javascript:void(0);">PC</a></div> or <div id="#mobile"><a href="javascript:void(0);" id="mobile">Cell phone</a></div>
+
</div>
</div>
 +
<div id="first_box_left"></div>
 +
<div id="first_box_right"></div>
 +
<div id="first_box_top"></div>
 +
<div id="first_box_bottom"></div>
<script type="text/javascript">
<script type="text/javascript">
$(function(){
$(function(){
-
$("#container,#SideMenu").css({opacity:'0'});
+
        var main = $("#container,#SideMenu,#igem,#page-top,#mobilemenu");
-
$("#pc a").click(function(){
+
main.css({opacity:'0'});
-
                $("#container,#SideMenu").stop().animate({opacity:'1'},1000);
+
        $("#first").css({opacity:'0'});
-
         $("#first").css({display:'none'});
+
        setTimeout(function(){
 +
        $("#first_box_left").animate({left:"50%"},400);
 +
        $("#first_box_right").animate({right:"50%"},400);
 +
        $("#first_box_top").animate({top:"50%"},400);
 +
        $("#first_box_bottom").animate({bottom:"50%"},400);
 +
        },1000);
 +
        setTimeout(function(){
 +
        $("#first").animate({opacity:'1'},800);
 +
        $("#first_box_left,#first_box_right,#first_box_top,#first_box_bottom").animate({opacity:'0'},400);
 +
        },1400);
 +
setTimeout(function(){
 +
        main.stop().animate({opacity:'1'},3000);
 +
         $("#first").stop().animate({opacity:'0'},1000);
 +
        },3000);
});   
});   
-
});
 
</script>
</script>
Line 27: Line 42:
background-color:rgba(300,300,300,0.7);
background-color:rgba(300,300,300,0.7);
text-align:center;
text-align:center;
 +
}
 +
 +
#first img{
 +
position:fixed;
 +
top:50%;
 +
left:50%;
 +
margin-top:-70px;
 +
margin-left:-70px;
 +
}
 +
 +
#first_box_left,#first_box_right,#first_box_top,#first_box_bottom{
 +
position:fixed;
 +
height:300px;
 +
width:300px;
 +
}
 +
 +
#first_box_left,#first_box_right{
 +
top:50%;
 +
margin-top:-150px;
 +
}
 +
 +
#first_box_top,#first_box_bottom{
 +
left:50%;
 +
margin-left:-150px;
 +
}
 +
 +
#first_box_left{
 +
left:-150px;
 +
border-top:2px solid rgba(300,300,300,0.5);
 +
margin-left:-150px;
 +
}
 +
#first_box_right{
 +
right:-150px;
 +
border-bottom:2px solid rgba(300,300,300,0.5);
 +
margin-right:-150px;
 +
}
 +
 +
#first_box_top{
 +
top:-150px;
 +
border-right:2px solid rgba(300,300,300,0.5);
 +
margin-top:-150px;
 +
}
 +
#first_box_bottom{
 +
bottom:-150px;
 +
border-left:2px solid rgba(300,300,300,0.5);
 +
margin-bottom:-150px;
 +
}
 +
#first a:link,#first a:visited,#first a:active{
 +
color:forestgreen;
 +
}
 +
#first a:hover{
 +
color:lime;
}
}
</style>
</style>

Latest revision as of 06:24, 25 September 2014


kit