Team:KIT-Kyoto/Test

From 2014.igem.org

(Difference between revisions)
 
(162 intermediate revisions not shown)
Line 26: Line 26:
<!--メインコンテンツ-->
<!--メインコンテンツ-->
<div id="container">
<div id="container">
-
<section id="top-first" class="top-content">
+
<div id="topmenu">
-
<p class="logo sprite" data-speed="-1.5" data-offsety="100">KIT-Kyoto</p>
+
<div class="timg">
-
<article>
+
<div class="show">
-
<h1>Welcome to KIT-Kyoto Wiki Page!</h1>
+
<a href="javascript:void(0);"><img src="/wiki/images/6/6b/Kit_Welcome.png"></a></div>
-
<p>This is our wiki page.</p>
+
 
-
</article>
+
<div class="hide">
-
</section>
+
<a href="javascript:void(0);"><img src="/wiki/images/3/3f/Kit_Welcome_on_c.jpg" width="1920"></a></div>
-
<section id="top-second" class="top-content">
+
</div>
-
<article>
+
 
-
<h1 id="toc-only-css">About us</h1>
+
<div class="timg">
-
<p>About our team members,our university,and so on...</p>
+
<div class="show">
-
</article>
+
<a href="/Team:KIT-Kyoto/About"><img src="/wiki/images/b/bf/Kit_Abou_Us.png" width="1920">
-
</section>
+
</a>
-
<section id="top-third" class="top-content">
+
</div>
-
<article>
+
<div class="hide">
-
<h1 id="toc-without-jquery">Project</h1>
+
<a href="/Team:KIT-Kyoto/About"><img src="/wiki/images/8/8e/Kit_Abou_Us_on_c.jpg" width="1920">
-
<p>You want to know our project details, click here.</p>
+
</a>
-
</article>
+
</div>
-
<img src="images/guernica.jpg" />
+
</div>
-
</section>
+
 
-
<section id="top-theend" class="top-content">
+
<div class="timg">
-
<article>
+
<div class="show">
-
<h1>Modeling</h1>
+
<a href="/Team:KIT-Kyoto/Project"><img src="/wiki/images/c/c2/Kit_Projectmenu.png" width="1920">
-
<p class="sprite" data-speed="0.8" data-offsety="4180">Modeling</p>
+
</a>
-
</article>
+
</div>
-
</section>
+
<div class="hide">
 +
<a href="/Team:KIT-Kyoto/Project"><img src="/wiki/images/1/11/Kit_Project_on_c.jpg" width="1920">
 +
</a>
 +
</div>
 +
</div>
 +
 
 +
<div class="timg">
 +
<div class="show">
 +
<a href="/Team:KIT-Kyoto/HumanPractice"><img src="/wiki/images/7/7e/Kit_PP.png" width="1920">
 +
</a>
 +
</div>
 +
<div class="hide">
 +
<a href="/Team:KIT-Kyoto/HumanPractice"><img src="/wiki/images/e/e6/Kit_PP_on_c.jpg" width="1920">
 +
</a>
 +
</div>
 +
</div>
 +
 
 +
<div class="timg">
 +
<div class="show">
 +
<a href="/Team:KIT-Kyoto/Achievement"><img src="/wiki/images/8/82/Kit_Achievement.png" width="1920">
 +
</a>
 +
</div>
 +
<div class="hide">
 +
<a href="/Team:KIT-Kyoto/Achievement"><img src="/wiki/images/6/6d/Kit_Achievement_on_c.jpg" width="1920">
 +
</a>
 +
</div>
 +
</div>
 +
 
 +
<div class="timg">
 +
<div class="show">
 +
<a href="/Team:KIT-Kyoto/Labnote"><img src="/wiki/images/1/17/Kit_LN.png" width="1920">
 +
</a>
 +
</div>
 +
<div class="hide">
 +
<a href="/Team:KIT-Kyoto/Labnote"><img src="/wiki/images/1/1b/Kit_LN_on_c.jpg" width="1920">
 +
</a>
 +
</div>
 +
</div>
 +
 
 +
</div>
<div class="clear"><hr /></div>  
<div class="clear"><hr /></div>  
     <div id='kitfooter-box' class='noprint'>
     <div id='kitfooter-box' class='noprint'>
Line 86: Line 125:
<style style="text/css">
<style style="text/css">
#kitfooter-box{
#kitfooter-box{
-
background-color:rgba(300,300,300,0.8);
+
background-color:rgba(100,100,100,0);
-
margin-top:0;
+
z-index:1;
}
}
-
 
+
#fkit a{
-
div#container{
+
color:#fff;
-
margin:0px 0px 0px 250px;
+
}
}
-
    #top-first {  
+
#bodyContent{
-
background:rgba(100,100,100,0.5) url(https://static.igem.org/mediawiki/2014/d/d4/Kit_top5.png) 50% 0 fixed;
+
min-height:100%;
-
}
+
-
    #top-second {
+
-
background: url(https://static.igem.org/mediawiki/2014/e/e8/Kit_top2.JPG) 50% 0 fixed;
+
-
}
+
-
    #top-third {
+
-
background: url(https://static.igem.org/mediawiki/2014/5/52/Kit_top3.JPG) 50% 0 fixed;
+
-
}
+
-
    #top-theend {
+
-
background: url(https://static.igem.org/mediawiki/2014/3/3a/Kit_top4.JPG) 50% 0 fixed;
+
-
}
+
-
.top-content {
+
-
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
+
-
border-top: 1px solid rgba(255, 255, 255, 0.3);
+
-
color: #333;
+
-
height: 900px;
+
-
margin: 0 auto;
+
-
padding: 0;
+
-
position: relative;
+
}
}
-
 
+
div#container{
-
/* section first */
+
margin:14px 0px 0px 250px;
-
.logo {
+
min-height:100%;
-
color: rgba(255, 255, 255, 0.9);
+
position:relative;
-
font-size: 4em;
+
background-color:rgba(0,0,0,0.7);
-
font-weight: bold;
+
-
margin: 0;
+
-
position: fixed;
+
-
top: 100px;
+
-
left: 40px;
+
-
text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
+
}
}
-
#top-first article {
+
#topmenu{
-
background: rgba(255, 255, 255, 0.9);
+
margin-top:14px;
-
border: 1px solid rgba(150, 150, 150, 0.1);
+
position:relative;
-
box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.4);
+
-
padding: 18px;
+
-
position: absolute;
+
-
top: 200px;
+
}
}
-
/* section second */
+
#topmenu a{
-
#top-second {
+
display:block;
-
padding: 80px 0;
+
position:relative;
-
}
+
padding:0;
-
#top-second article {
+
-
background: rgba(255, 255, 255, 0.9);
+
-
border: 1px solid rgba(150, 150, 150, 0.1);
+
-
box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.4);
+
-
color: gray;
+
-
        position:absolute;
+
-
        left:60px;
+
-
        top:100px;
+
-
padding: 10px 20px;
+
-
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
+
-
line-height: 1.5em;
+
-
width: 445px;
+
}
}
-
/* section third */
+
.timg{
-
#top-third article {
+
position:relative;
-
background: rgba(255, 255, 255, 0.9);
+
margin:0;
-
border: 1px solid rgba(150, 150, 150, 0.1);
+
-
box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.4);
+
-
color: gray;
+
-
padding: 10px 20px;
+
-
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
+
-
line-height: 1.5em;
+
-
position: absolute;
+
-
top: 100px;
+
-
right:100px;
+
}
}
-
#top-third img {
+
.show,.hide{
-
border: 8px solid white;
+
width:100%;
-
box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.4);
+
height:100%;
-
height: 350px;
+
position:absolute;
-
width: 560px;
+
top:0;
-
position: absolute;
+
left:0;
-
left: 80px;
+
marign:0;
-
top: 300px;
+
-
-webkit-transform: rotate(-8deg);
+
-
-moz-transform: rotate(-8deg);
+
-
-ms-transform: rotate(-8deg);
+
-
-o-transform: rotate(-8deg);
+
-
transform: rotate(-8deg);
+
}
}
-
 
+
.show{
-
/* section the end */
+
z-index:3;
-
#top-theend {
+
-
padding: 80px 0;
+
}
}
-
#top-theend article {
+
.hide{
-
background: rgba(255, 255, 255, 0.9);
+
z-index:2;
-
border: 1px solid rgba(150, 150, 150, 0.1);
+
-
box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.4);
+
-
color: gray;
+
-
        position:absolute;
+
-
        top:100px;
+
-
        left:100px;
+
-
padding: 10px 20px;
+
-
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
+
-
line-height: 1.5em;
+
-
width: 445px;
+
}
}
-
 
</style>
</style>
<script type="text/javascript">
<script type="text/javascript">
-
$(function(){     
+
$(function(){  
-
var ua = navigator.userAgent;
+
var topimg = function(){
 +
var w = $("#container").width();
 +
$(".timg,.timg a img").css({width:w});
 +
var imgh = $('.show img').height();
 +
$(".timg").css({height:imgh});
 +
}
 +
$(function(){
 +
topimg();
 +
$(window).resize(topimg);
 +
});
 +
topimg();
 +
$('.hide').css('opacity','0');
 +
$('.show a,.hide a').hover(function(){
 +
var tnum = $('.show a').index(this);
 +
$('.show').eq(tnum).stop().animate({opacity:'0'},400);
 +
$('.hide').eq(tnum).stop().animate({opacity:'1'},400);
 +
},
 +
function(){
 +
var tnum = $('.show a').index(this);
 +
$('.show').eq(tnum).stop().animate({opacity:'1'},400);
 +
$('.hide').eq(tnum).stop().animate({opacity:'0'},400);
 +
}
 +
);
 +
    
 +
var slide = function(){
 +
                        $("#SideMenu").animate({left:'0px'},500,'swing');
 +
                        $("#close").animate({left:'215px'},500,'swing').addClass("close");
 +
                        $(".logo").animate({left:'250'},500,'swing');
 +
                        $("#container").animate({margin:'0px 0px 0px 250px'},{duration:500,easing:'swing',complete:function(){topimg();},});
 +
                        $(".toplogo,#nav5,.active,.submenu").animate({opacity:'1'},800,'swing');
 +
                        setTimeout(function(){
 +
                                  $("#close a")
 +
                                  .css({'background-image':'url("https://static.igem.org/mediawiki/2014/6/6d/Kit_close.png")'
 +
                        });},500);
 +
}
 +
    var ua = navigator.userAgent;
if(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 || ua.indexOf('BlackBerry') > 0 || ua.indexOf('Windows Phone') > 0){
if(ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 || ua.indexOf('BlackBerry') > 0 || ua.indexOf('Windows Phone') > 0){
-
$(".logo").css({"left":"0"});
+
setTimeout(function(){topimg();},1100);
-
$(".top-content").css({"height":"500px"});
+
$("#container").css({marginTop:'65px',marginLeft:'0px'});
-
        $("#top-third img").css({width:"280px",height:"175px",left:'0px'});
+
}else{
-
        $("#top-first article").css({width:"80%"});
+
-
        $("#top-second article").css({width:"80%",left:'0px'});
+
-
        $("#top-third article").css({width:"80%",right:'0px'});
+
-
        $("#top-theend article").css({width:"80%",left:'0px'});
+
-
}else {
+
         $("#close").removeClass('close');
         $("#close").removeClass('close');
         $("#SideMenu").css({"left":"-215px"});
         $("#SideMenu").css({"left":"-215px"});
Line 219: Line 219:
         $(".toplogo,#nav5,.active,.submenu").css({opacity:'0'});
         $(".toplogo,#nav5,.active,.submenu").css({opacity:'0'});
         $("#close a").css({'background-image':'url("https://static.igem.org/mediawiki/2014/d/d0/Kit_open.png")'});
         $("#close a").css({'background-image':'url("https://static.igem.org/mediawiki/2014/d/d0/Kit_open.png")'});
 +
        setTimeout(function(){
 +
              slide();
 +
                },2100);
}
}
 +
       
         $('#close a')
         $('#close a')
         .click(function(){
         .click(function(){
 +
               
                 var closed = $("#close").hasClass("close");
                 var closed = $("#close").hasClass("close");
                 if(closed){
                 if(closed){
Line 227: Line 232:
                         $("#close").animate({left:'0px'},500,'swing').removeClass("close");
                         $("#close").animate({left:'0px'},500,'swing').removeClass("close");
                         $(".logo").animate({left:'40'},500,'swing');
                         $(".logo").animate({left:'40'},500,'swing');
-
                         $("#container").animate({margin:'0px 0px 0px 35px'},500,'swing');
+
                         $("#container").animate({margin:'0px 0px 0px 35px'},{duration:500,easing:'swing',complete:function(){topimg();},});
                         $(".toplogo,#nav5,.active,.submenu").animate({opacity:'0'},800,'swing');
                         $(".toplogo,#nav5,.active,.submenu").animate({opacity:'0'},800,'swing');
                         setTimeout(function(){
                         setTimeout(function(){
Line 233: Line 238:
                         },500);
                         },500);
                 }else {
                 }else {
-
                         $("#SideMenu").animate({left:'0px'},500,'swing');
+
                         slide();
-
                        $("#close").animate({left:'215px'},500,'swing').addClass("close");
+
-
                        $(".logo").animate({left:'250'},500,'swing');
+
-
                        $("#container").animate({margin:'0px 0px 0px 250px'},500,'swing');
+
-
                        $(".toplogo,#nav5,.active,.submenu").animate({opacity:'1'},800,'swing');
+
-
                        setTimeout(function(){
+
-
                                  $("#close a")
+
-
                                  .css({'background-image':'url("https://static.igem.org/mediawiki/2014/6/6d/Kit_close.png")'});
+
-
                        },500);
+
                 }
                 }
         });
         });
-
 
-
    var $window = $(window);
 
-
 
-
    $('.top-content').each(function(index) {
 
-
        var $self = $(this);
 
-
        var offsetCoords = $self.offset();
 
-
 
-
        $(window).scroll(function() {
 
-
            if (($window.scrollTop() + $window.height()) > offsetCoords.top ){
 
-
                if((offsetCoords.top + $self.height()) > $window.scrollTop()) {
 
-
                var yPos = -($window.scrollTop() / 8);
 
-
                if ($self.attr('id') != 'top-first') {
 
-
                    yPos += 126;
 
-
                }
 
-
                var coords = '50%' + yPos + 'px';
 
-
                $self.css('backgroundPosition', coords);
 
-
 
-
                $('.sprite', $self).each(function(index) {
 
-
                    var $sprite = $(this);
 
-
                    var yPos = -($window.scrollTop() / $sprite.data('speed')) + $sprite.data('offsety');
 
-
                    $sprite.css('top', yPos);
 
-
                });
 
-
            }}
 
-
        });
 
-
    });
 
});
});
</script>
</script>

Latest revision as of 02:43, 11 October 2014

kit
Top

Retrieved from "http://2014.igem.org/Team:KIT-Kyoto/Test"