Template:Team:KIT-Kyoto/first
From 2014.igem.org
(Difference between revisions)
(Created page with "<html> <div class="clear"><hr /></div> <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> ...") |
|||
(35 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=" | + | <img src="https://static.igem.org/mediawiki/2014/7/7f/Kitlogo.png" width="140" height="140" alt="kit" style=""> |
- | + | ||
</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(){ | ||
- | + | var main = $("#container,#SideMenu,#igem,#page-top,#mobilemenu"); | |
- | + | main.css({opacity:'0'}); | |
- | + | $("#first").css({opacity:'0'}); | |
- | $("#first"). | + | 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 23: | Line 38: | ||
top:50%; | top:50%; | ||
left:50%; | left:50%; | ||
- | margin-top:150px; | + | margin-top:-150px; |
- | margin-left:150px; | + | margin-left:-150px; |
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