Difference between revisions of "Team:CHINA CD UESTC/homeDemo"

(Blanked the page)
 
Line 1: Line 1:
{{Template:Team:CHINA_CD_UESTC/menu}}
 
<!DOCTYPE html>
 
<html>
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
  
 
<style type="text/css">
 
 
 
body.opened #realcontent {
 
left: 100px;
 
opacity: 0.2 !important;
 
pointer-events: none;
 
}
 
body {
 
background: #2d2c41;
 
font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
 
}
 
ul {
 
list-style-type: none;
 
}
 
 
 
#realcontent #homeIndex {
 
position: absolute;
 
top: 0;
 
left: 0;
 
right: 0;
 
bottom: 0;
 
}
 
#realcontent #homeIndex .contentInner {
 
position: absolute;
 
top: 0;
 
left: 0;
 
right: 0;
 
bottom: 0;
 
}
 
#realcontent #homeIndex a {
 
overflow: hidden;
 
}
 
#realcontent #homeIndex a img.fullBg {
 
display: block;
 
position: absolute;
 
top: 0;
 
left: 0;
 
display: none;
 
}
 
#realcontent #homeIndex a .overlay {
 
display: block;
 
position: absolute;
 
top: 0;
 
left: 0;
 
right: 0;
 
bottom: 0;
 
background: #262626;
 
opacity: 0.5;
 
filter: alpha(opacity=50);
 
-webkit-transition: all 200ms ease-out;
 
-moz-transition: all 200ms ease-out;
 
-ms-transition: all 200ms ease-out;
 
-o-transition: all 200ms ease-out;
 
transition: all 200ms ease-out;
 
z-index: 1;
 
}
 
#realcontent #homeIndex a .title {
 
position: absolute;
 
top: 50%;
 
left: 50%;
 
z-index: 10;
 
-webkit-backface-visibility: hidden;
 
}
 
#realcontent #homeIndex a video {
 
position: absolute;
 
left: 0;
 
right: 0;
 
opacity: 0;
 
filter: alpha(opacity=0);
 
}
 
#realcontent #homeIndex a .gallery {
 
position: absolute;
 
top: 0;
 
left: 0;
 
right: 0;
 
bottom: 0;
 
opacity: 0;
 
filter: alpha(opacity=0);
 
}
 
#realcontent #homeIndex a .gallery img {
 
display: block;
 
width: 100%;
 
height: 100%;
 
position: absolute;
 
top: 0;
 
left: 0;
 
z-index: 2;
 
}
 
#realcontent #homeIndex a .gallery img.active {
 
z-index: 4;
 
}
 
#realcontent #homeIndex a .gallery img.lastActive {
 
z-index: 3;
 
}
 
#realcontent #homeIndex .beer {
 
position: absolute;
 
top: 0;
 
left: 0;
 
bottom: 0;
 
width: 44%;
 
background: url("https://static.igem.org/mediawiki/2015/7/74/CHINA_CD_UESTC_homePRJBG.jpg") repeat center center #f2f2f2;
 
}
 
#realcontent #homeIndex .beer .overlay {
 
opacity: 0.2;
 
filter: alpha(opacity=20);
 
}
 
#realcontent #homeIndex .beer span {
 
display: block;
 
}
 
#realcontent #homeIndex .beer .middle {
 
width: 100%;
 
display: inline-block;
 
vertical-align: middle;
 
line-height: normal;
 
}
 
#realcontent #homeIndex .beer .title {
 
background: url("https://static.igem.org/mediawiki/2015/4/4e/CD_UESTC_sprite.png") no-repeat top left transparent;
 
display: block;
 
zoom: 1;
 
background-position: 0px 0px;
 
width: 260px;
 
height: 250px;
 
text-indent: -6000px;
 
text-align: left;
 
position: relative;
 
top: auto;
 
left: auto;
 
margin: 0 auto;
 
margin-bottom: 50px;
 
}
 
#realcontent #homeIndex .beer .swipe {
 
overflow: hidden;
 
visibility: hidden;
 
position: relative;
 
}
 
#realcontent #homeIndex .beer .swipe .swipe-wrap {
 
overflow: hidden;
 
position: relative;
 
}
 
#realcontent #homeIndex .beer .swipe .swipe-wrap div {
 
float: left;
 
width: 100%;
 
position: relative;
 
}
 
#realcontent #homeIndex .beer .swipe .swipe-wrap div img {
 
width: 50%;
 
height: 20%;
 
display: block;
 
margin: 0 auto;
 
max-height: 80%;
 
}
 
#realcontent #homeIndex .beer:hover .overlay {
 
opacity: 0;
 
filter: alpha(opacity=0);
 
}
 
#realcontent #homeIndex .results {
 
position: absolute;
 
top: 0;
 
left: 44%;
 
right: 0;
 
height: 50%;
 
background: url("https://static.igem.org/mediawiki/2015/6/60/CHINA_CD_UESTC_homeresult.jpg") no-repeat center center #f2f2f2;
 
-webkit-background-size: cover;
 
-moz-background-size: cover;
 
-o-background-size: cover;
 
background-size: cover;
 
}
 
#realcontent #homeIndex .results .title {
 
background: url("https://static.igem.org/mediawiki/2015/4/4e/CD_UESTC_sprite.png") no-repeat top left transparent;
 
display: block;
 
zoom: 1;
 
background-position: -260px -4px;
 
width: 300px;
 
height: 140px;
 
text-indent: -6000px;
 
text-align: left;
 
margin-left: -145px;
 
margin-top: -70px;
 
}
 
#realcontent #homeIndex .Modeling {
 
position: absolute;
 
top: 50%;
 
left: 44%;
 
right: 28%;
 
bottom: 0;
 
background: url("https://static.igem.org/mediawiki/2015/1/1a/CD_UESTC_bg_ambassador.jpg") no-repeat center center #f2f2f2;
 
        background-size:cover;
 
-webkit-background-size:cover;
 
-moz-background-size:cover;
 
-o-background-size:cover;
 
}
 
#realcontent #homeIndex .Modeling .title {
 
background: url("https://static.igem.org/mediawiki/2015/4/4e/CD_UESTC_sprite.png") no-repeat top left transparent;
 
display: block;
 
zoom: 1;
 
background-position: -578px -4px;
 
width: 274px;
 
height: 170px;
 
text-indent: -6000px;
 
text-align: left;
 
margin-top: -78px;
 
margin-left: -137px;
 
}
 
#realcontent #homeIndex .Team {
 
position: absolute;
 
top: 50%;
 
left: 72%;
 
right: 0;
 
bottom: 0;
 
background: url("https://static.igem.org/mediawiki/2015/a/af/CD_UESTC_bg_social.jpg") no-repeat center center #f2f2f2;
 
-webkit-background-size: 100% 100%;
 
-moz-background-size: 100% 100%;
 
-o-background-size: 100% 100%;
 
background-size: 100% 100%;
 
}
 
#realcontent #homeIndex .Team .title {
 
background: url("https://static.igem.org/mediawiki/2015/4/4e/CD_UESTC_sprite.png") no-repeat top left transparent;
 
display: block;
 
zoom: 1;
 
background-position: -892px 0px;
 
width: 250px;
 
height: 170px;
 
text-indent: -6000px;
 
text-align: left;
 
margin-top: -72px;
 
margin-left: -125px;
 
}
 
.no-touch #realcontent #homeIndex a:hover .overlay {
 
opacity: 0;
 
filter: alpha(opacity=0);
 
}
 
.touch #realcontent #homeIndex a.beer .overlay {
 
opacity: 0;
 
filter: alpha(opacity=0);
 
display: none;
 
}
 
 
#realcontent {
 
position: fixed;
 
left: 260px;
 
top: 0;
 
right: 0;
 
height: 100%;
 
overflow: hidden;
 
-webkit-transition: all 200ms ease-out;
 
-moz-transition: all 200ms ease-out;
 
-ms-transition: all 200ms ease-out;
 
-o-transition: all 200ms ease-out;
 
transition: all 200ms ease-out;
 
-webkit-transform: translate3d(0, 0, 0);
 
-moz-transform: translate3d(0, 0, 0);
 
-ms-transform: translate3d(0, 0, 0);
 
-o-transform: translate3d(0, 0, 0);
 
transform: translate3d(0, 0, 0);
 
}
 
 
 
@media screen and (max-width: 1050px) {
 
 
html #realcontent {
 
left: 200px;
 
}
 
}
 
@media screen and (max-width: 1200px) {
 
html #realcontent #homeIndex a .title {
 
-webkit-transform: scale(0.7);
 
-moz-transform: scale(0.7);
 
-ms-transform: scale(0.7);
 
-o-transform: scale(0.7);
 
transform: scale(0.7);
 
}
 
html #realcontent #homeIndex .beer .title {
 
margin-bottom: 20px;
 
}
 
html #realcontent #homeIndex .beer {
 
background-size: 150%;
 
}
 
}
 
@media screen and (max-width: 900px) {
 
html #realcontent #homeIndex .results {
 
height: 40%;
 
}
 
html #realcontent #homeIndex .Modeling {
 
top: 40%;
 
right: 0;
 
bottom: auto;
 
height: 30%;
 
}
 
html #realcontent #homeIndex .Team {
 
left: 44%;
 
top: 70%;
 
}
 
}
 
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
 
html .beerDetails .middle {
 
-webkit-transform: translate(0, 0) scale(0.9);
 
-moz-transform: translate(0, 0) scale(0.9);
 
-ms-transform: translate(0, 0) scale(0.9);
 
-o-transform: translate(0, 0) scale(0.9);
 
transform: translate(0, 0) scale(0.9);
 
}
 
}
 
@media screen and (max-width: 700px) {
 
 
html #realcontent {
 
left: 0;
 
right: auto;
 
width: 100%;
 
}
 
}
 
 
</style>
 
</head>
 
<body id="homeIndexBody">
 
 
<div id="realcontent">
 
<div id="homeIndex">
 
<div class="contentInner">
 
<a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Design" class="beer middleParent">
 
<div class="layoutHide"></div>
 
<span class="overlay"></span>
 
<span class="middle">
 
<h1 class="title">Project</h1>
 
<span class="swipe" id="swipeProject">
 
<span class="swipe-wrap">
 
<div>
 
<img alt="La Bruson" src="https://static.igem.org/mediawiki/2015/8/83/CHINA_CD_UESTC_homeswape01.png" />
 
</div>
 
<div>
 
<img alt="Les Faverges" src="https://static.igem.org/mediawiki/2015/9/90/CHINA_CD_UESTC_homeswape02.png" />
 
</div>
 
<div>
 
<img alt="Backside Montfort" src="https://static.igem.org/mediawiki/2015/5/55/CHINA_CD_UESTC_homeswape03.png" />
 
</div>
 
</span>
 
</span>
 
</span>
 
</a>
 
 
<a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Results" class="results">
 
<div class="layoutHide"></div>
 
<img class="fullBg"  onmouseover="resultsGalleryNext()"/>
 
<span class="overlay"></span>
 
<h2 class="title">Let's discover our results White Frontier Brewery</h2>
 
<div class="gallery">
 
<img src="https://static.igem.org/mediawiki/2015/1/10/CHINA_CD_UESTC_homere03.jpg" class="fullBg display " />
 
<img src="https://static.igem.org/mediawiki/2015/3/31/CHINA_CD_UESTC_homere04.jpg" class="fullBg display " />
 
</div>
 
</a>
 
<a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Modeling" class="Modeling">
 
<div class="layoutHide"></div>
 
<img class="fullBg"  />
 
<span class="overlay"></span>
 
<h2 class="title">Modeling</h2>
 
</a>
 
<a href="https://2015.igem.org/Team:CHINA_CD_UESTC/Members" class="Team" >
 
<div class="layoutHide"></div>
 
<img class="fullBg"  />
 
<span class="overlay"></span>
 
<h2 class="title">Team</h2>
 
</a>
 
</div>
 
</div>
 
</div>
 
<script type="text/javascript" src="https://2015.igem.org/Team:CHINA_CD_UESTC/homeJS.js?action=raw&ctype=text/js"></script>
 
 
<script type="text/javascript">//<![CDATA[
 
var controllerName="home";
 
var actionName="index";
 
var base="";
 
var baseLang="/en";
 
var lang="en";
 
data=[];//]]>
 
</script>
 
<script type="text/javascript">
 
//resultsIntercal change
 
        var resultsInterval;
 
        function resultsGalleryNext() {
 
            var $active = $('#realcontent #homeIndex a.results .gallery img.active');
 
            if ( $active.length == 0 ) $active = $('#realcontent #homeIndex a.results .gallery img:last');
 
            var $next =  $active.next().length ? $active.next() : $('#realcontent #homeIndex a.results .gallery img:first');
 
            $active.addClass('lastActive');
 
            $next.css({opacity: 0.0})
 
                .addClass('active')
 
                .animate({opacity: 1.0}, 700, function() {
 
                    $active.removeClass('active lastActive');
 
                });
 
        }
 
        $('.no-touch #realcontent #homeIndex a.results').hover(function(){
 
            var $gallery = $(this).find('.gallery');
 
            $gallery.stop().animate({
 
                scale:1,
 
                opacity:1
 
            },500, 'easeOutCubic');
 
            resultsInterval = window.setInterval(resultsGalleryNext, 1000);
 
        }, function(){
 
            window.clearInterval(resultsInterval);
 
            var $gallery = $(this).find('.gallery');
 
            $gallery.stop().animate({
 
                scale:1.5,
 
                opacity:0
 
            },500, 'easeOutCubic', function(){
 
                window.clearInterval(resultsInterval);
 
            });
 
        });
 
 
 
 
        // swipe beer
 
        var swipeProject = new Swipe(document.getElementById('swipeProject'), {
 
            speed: 400,
 
            auto: false,
 
 
            continuous: true,
 
            disableScroll: false,
 
            stopPropagation: false,
 
            callback: function(index, elem) {},
 
            transitionEnd: function(index, elem) {}
 
        });
 
 
        var timeout;
 
        function again()
 
        {
 
            window.clearTimeout(timeout);
 
            timeout = window.setTimeout(function(){
 
                swipeProject.next();
 
                again();
 
            }, 1400);
 
        }
 
        $('.no-touch #realcontent #homeIndex a.beer').hover(function(){
 
            swipeProject.next();
 
            again();
 
        }, function(){
 
            window.clearTimeout(timeout);
 
        });
 
 
    </script>
 
</body>
 
</html>
 

Latest revision as of 02:29, 11 September 2015