Team:KIT-Kyoto/Test

From 2014.igem.org

(Difference between revisions)
Line 11: Line 11:
</style>
</style>
-
<div id="bgimg">
+
<div class="bgimg">
-
<div><img src="https://static.igem.org/mediawiki/2014/4/43/KIT_pictures_hund.jpg" class="bg"></div>
+
<img src="https://static.igem.org/mediawiki/2014/4/43/KIT_pictures_hund.jpg">
-
<div><img src="https://static.igem.org/mediawiki/2014/d/d2/KIT_picutures_daityoukinndots.jpg" class="bg"></div>
+
<img src="https://static.igem.org/mediawiki/2014/d/d2/KIT_picutures_daityoukinndots.jpg">
</div>
</div>
 +
<script type="text/javascript"> 
 +
  $(function(){ 
 +
    $('.bgimg img:gt(0)').hide(); 
 +
    setInterval(function() { 
 +
      $('.bgimg :first-child').fadeOut(3000) 
 +
        .next('img').fadeIn(3000) 
 +
      .end().appendTo('.bgimg'); 
 +
    }, 5000);
 +
  }); 
 +
</script>
<style>
<style>
-
#bgimg{
+
.bgimg { position: fixed; left:0; top:0; z-index: -1; height: 100%; width: 100%; }
-
/* Set rules to fill background */
+
.bgimg img { position: absolute; min-height: 100%; min-width: 800px; width: 100%; height: auto;left:0; top:0; }
-
min-height: 100%;
+
-
min-width: 1024px;
+
-
 
+
-
/* Set up proportionate scaling */
+
-
width: 100%;
+
-
height: auto;
+
-
 
+
-
/* Set up positioning */
+
-
position: fixed;
+
-
top: 0;
+
-
left: 0;
+
-
}
+
-
#bgimg>div {
+
-
/* Set rules to fill background */
+
-
min-height: 100%;
+
-
min-width: 1024px;
+
-
 
+
-
/* Set up proportionate scaling */
+
-
width: 100%;
+
-
height: auto;
+
-
position: fixed;
+
-
top: 0;
+
-
left: 0;
+
-
opacity: 0;
+
-
}
+
-
 
+
-
@media screen and (max-width: 1024px){
+
-
img.bg {
+
-
left: 50%;
+
-
margin-left: -512px; }
+
-
}
+
-
 
+
-
div#content {
+
-
/* This is the only important rule */
+
-
/* We need our content to show up on top of the background */
+
-
position: relative;
+
-
 
+
-
/* These have no effect on the functionality */
+
-
width: 500px;
+
-
margin: 0 auto;
+
-
background: #fff;
+
-
padding: 20px;
+
-
font-family: helvetica, arial, sans-serif;
+
-
font-size: 10pt;
+
-
line-height: 16pt;
+
-
-moz-box-shadow: #000 4px 4px 10px;
+
-
-webkit-box-shadow: #000 4px 4px 10px;
+
-
}
+
-
 
+
-
body {
+
-
/* These rules have no effect on the functionality */
+
-
/* They are for styling only */
+
-
margin: 0;
+
-
padding: 20px 0 0 0;
+
-
}
+
</style>
</style>
-
<script>
 
-
(function($) {
 
-
    var fadeInOut = function ($element) {
 
-
        var $children = $element.children(),
 
-
            current = 0,
 
-
            time = 5000,
 
-
            speed = '3s';
 
-
     
 
-
        $children.css({ transition: speed })
 
-
                .eq(current).css({ opacity: '1' });
 
-
     
 
-
        setInterval(function () {
 
-
            $children.eq(current).css({ opacity: '0' });
 
-
            current = current === $children.length - 1 ? 0 : current += 1;
 
-
            $children.eq(current).css({ opacity: '1' });
 
-
        }, time);
 
-
    };
 
-
 
-
    fadeInOut($('#bgimg'));
 
-
 
-
})(jQuery);
 
-
</script>
 
</html>
</html>

Revision as of 09:58, 19 May 2014

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