Difference between revisions of "Team:Fudan/"

m
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{Fudan}}
 
{{Fudan}}
−
<html>              
+
<html>
 
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 
<style>
 
<style>
Line 10: Line 10:
 
html, body {
 
html, body {
 
     height:100%;
 
     height:100%;
 +
    width:100%;
 
}
 
}
  
−
.skrollr-desktop body {
+
.caption {
−
     height:100% !important;
+
     position: absolute;
 
}
 
}
 +
h1 { margin-bottom: 0.2em; }
 +
p { line-height: 1.333em; }
 +
/*#slide-4 .caption {
 +
    right: auto;
 +
    left: 5%;
 +
    top: 5%;
 +
    bottom: auto;
 +
    color: #47373f;
 +
}*/
  
−
body {
+
/* full width/height container */
−
     font-family:sans-serif;
+
#slides-container {
 +
     width: 100%;
 +
    height:100%;
 +
    overflow: hidden;
 
}
 
}
  
−
p {
+
/* double the height/width of a viewport */
−
     margin:1em 0;
+
#slides {
 +
     width: 200%;
 +
    height:200%;
 +
    position: fixed;
 +
    top: 0;
 +
    left:0;
 
}
 
}
−
 
+
.slide {
−
.parallax-image-wrapper {
+
     position:absolute;
−
     position:fixed;
+
    top: 0;
 
     left:0;
 
     left:0;
−
     width:100%;
+
     width: 50%;
−
    overflow:hidden;
+
−
}
+
−
 
+
−
.parallax-image-wrapper-50 {
+
 
     height:50%;
 
     height:50%;
−
    top:-50%;
 
 
}
 
}
−
 
+
#slide-1 {
−
.parallax-image-wrapper-100 {
+
     background: url('https://static.igem.org/mediawiki/2020/8/89/T--Fudan--index01.svg') no-repeat center center;
−
     height:100%;
+
     background-size: cover;
−
     top:-100%;
+
 
}
 
}
−
 
+
#slide-2 {
−
.parallax-image {
+
     background: url('https://static.igem.org/mediawiki/2020/2/2d/T--Fudan--index02.svg') no-repeat center center;
−
     display:none;
+
     background-size: cover;
−
    position:absolute;
+
     -webkit-transform: translate(100%,0);
−
     bottom:0;
+
     -ms-transform: translate(100%,0);
−
     left:0;
+
     transform: translate(100%,0);
−
    width:100%;
+
−
     background-repeat:no-repeat;
+
−
    background-position:center;
+
−
     background-size:cover;
+
 
}
 
}
−
 
+
#slide-3 {
−
.parallax-image-50 {
+
    background: url('https://static.igem.org/mediawiki/2020/2/21/T--Fudan--index03.svg') no-repeat center center;
−
     height:200%;
+
     background-size: cover;
−
     top:-50%;
+
     -webkit-transform: translate(100%,100%);
 +
    -ms-transform: translate(100%,100%);
 +
    transform: translate(100%,100%);
 
}
 
}
−
 
+
#slide-4 {
−
.parallax-image-100 {
+
    background: url('https://static.igem.org/mediawiki/2020/c/cc/T--Fudan--index04.svg') no-repeat center center;
−
     height:100%;
+
    background-size: cover;
−
     top:0;
+
    -webkit-transform: translate(100%,200%);
 +
     -ms-transform: translate(100%,200%);
 +
     transform: translate(100%,200%);
 
}
 
}
−
 
+
#slide-5 {
−
.parallax-image.skrollable-between {
+
    background: url('https://static.igem.org/mediawiki/2020/7/73/T--Fudan--index05.svg') no-repeat center center;
−
     display:block;
+
    background-size: cover;
 +
    -webkit-transform: translate(100%,300%);
 +
    -ms-transform: translate(100%,300%);
 +
     transform: translate(100%,300%);
 
}
 
}
−
 
+
#slide-6 {
−
.no-skrollr .parallax-image-wrapper {
+
    background: url('https://static.igem.org/mediawiki/2020/5/50/T--Fudan--index06.svg') no-repeat center center;
−
     display:none !important;
+
    background-size: cover;
 +
    -webkit-transform: translate(100%,400%);
 +
    -ms-transform: translate(100%,400%);
 +
     transform: translate(100%,400%);
 
}
 
}
−
 
+
#slide-7 {
−
#skrollr-body {
+
     background: url('https://static.igem.org/mediawiki/2020/6/69/T--Fudan--index07.svg') no-repeat center center;
−
     height:100%;
+
    background-size: cover;
−
     overflow:visible;
+
    -webkit-transform: translate(100%,500%);
−
     position:relative;
+
     -ms-transform: translate(100%,500%);
 +
     transform: translate(100%,500%);
 
}
 
}
−
 
+
#slide-8 {
−
.gap {
+
     background: url('https://static.igem.org/mediawiki/2020/f/fc/T--Fudan--index08.svg') no-repeat center center;
−
     background:transparent center no-repeat;
+
     background-size: cover;
−
     background-size:cover;
+
    -webkit-transform: translate(100%,600%);
 +
    -ms-transform: translate(100%,600%);
 +
    transform: translate(100%,600%);
 
}
 
}
−
 
+
#slide-9 {
−
.skrollr .gap {
+
    background: url('https://static.igem.org/mediawiki/2020/f/f8/T--Fudan--index09.svg') no-repeat center center;
−
     background:transparent !important;
+
     background-size: cover;
 +
    -webkit-transform: translate(100%,700%);
 +
    -ms-transform: translate(100%,700%);
 +
    transform: translate(100%,700%);
 
}
 
}
−
 
+
#slide-10 {
−
.gap-50 {
+
    background: url('https://static.igem.org/mediawiki/2020/9/9b/T--Fudan--index10.svg') no-repeat center center;
−
     height:50%;
+
     background-size: cover;
 +
    -webkit-transform: translate(100%,800%);
 +
    -ms-transform: translate(100%,800%);
 +
    transform: translate(100%,800%);
 
}
 
}
−
 
+
/* https://static.igem.org/mediawiki/2020/6/63/T--Fudan--index11.svg */
−
.gap-100 {
+
#slide-end {
−
     height:100%;
+
     background: url('https://static.igem.org/mediawiki/2020/5/51/T--Fudan--title_3.svg') no-repeat center center;
 +
    background-size: cover;
 +
    -webkit-transform: translate(200%,800%);
 +
    -ms-transform: translate(200%,800%);
 +
    transform: translate(200%,800%);
 
}
 
}
  
−
.header, .content {
+
#scrolling-helper {
−
     /* background:#fcf5e9; */
+
     position:absolute;
−
     background:transparent !important;
+
     left:0;
−
     padding:1em;
+
     top: 0;
−
     -webkit-box-sizing:border-box;
+
     height:1550%;
−
     -moz-box-sizing:border-box;
+
     width: 0px;
−
    box-sizing:border-box;
+
 
}
 
}
−
 
+
.marker {
−
.content-full {
+
     height:10%;
−
     height:100%;
+
    width: 100%;
 
}
 
}
−
 
+
.red {
−
#done {
+
    background-color: red;
−
     height:100%;
+
}
 +
.green {
 +
    background-color: green;
 +
}
 +
.blue {
 +
    background-color: blue;
 +
}
 +
.grey {
 +
    background-color: grey;
 +
}
 +
.yellow {
 +
     background-color: yellow;
 
}
 
}
 
</style>
 
</style>
  
−
<!-- div
+
<div id="slides-container">
−
    class="parallax-image-wrapper parallax-image-wrapper-100"
+
     <div id="slides"
−
     data-anchor-target="#dragons + .gap"
+
        data-0="transform:translate(0%,0);"
−
    data-bottom-top="transform:translate3d(0px, 200%, 0px)"
+
        data-133p="transform:translate(-50%,0);"
−
    data-top-bottom="transform:translate3d(0px, 0%, 0px)">
+
         data-200p=""
−
 
+
         data-250p="transform:translate(-50%,-50%);"
−
    <div
+
         data-300p=""
−
         class="parallax-image parallax-image-100"
+
         data-400p="transform:translate(-50%,-100%);"
−
         style="background-image:url(T--Fudan--index01.svg)"
+
         data-450p=""
−
         data-anchor-target="#dragons + .gap"
+
        data-550p="transform:translate(-50%,-150%);"
−
         data-bottom-top="transform: translate3d(0px, -12%, 0px);"
+
        data-600p=""
−
         data-top-bottom="transform: translate3d(0px, 12%, 0px);"
+
        data-700p="transform:translate(-50%,-200%);"
−
    ></div>
+
        data-750p=""
−
</div>
+
         data-850p="transform:translate(-50%,-250%);"
−
 
+
         data-900p=""
−
<div
+
         data-1000p="transform:translate(-50%,-300%);"
−
    class="parallax-image-wrapper parallax-image-wrapper-100"
+
        data-1050p=""
−
    data-anchor-target="#index01 + .gap"
+
        data-1150p="transform:translate(-50%,-350%);"
−
    data-bottom-top="transform:translate3d(0px, 200%, 0px)"
+
        data-1200p=""
−
    data-top-bottom="transform:translate3d(0px, 0%, 0px)">
+
         data-1300p="transform:translate(-50%,-400%);"
−
    <div
+
         data-1350p=""
−
         class="parallax-image parallax-image-100"
+
         data-1450p="transform:translate(-100%,-400%);"
−
        style="background-image:url(T--Fudan--index01.svg)"
+
     >
−
         data-anchor-target="#index01 + .gap"
+
        <div id="slide-1" class="slide">
−
         data-bottom-top="transform: translate3d(0px, -12%, 0px);"
+
            <div class="caption"
−
        data-top-bottom="transform: translate3d(0px, 12%, 0px);"
+
                data-40p="opacity: 1; transform:translate(0px,0px);"
−
    ></div>
+
                data-70p="opacity: 0; transform:translate(0px,-100%);"
−
</div>
+
                data-anchor-target="#scrolling-helper"
−
<div
+
                style="top:52%;left:62%"
−
    class="parallax-image-wrapper parallax-image-wrapper-50"
+
            >
−
    data-anchor-target="#index02 + .gap"
+
                <p style="color:black">by Team:Fudan &nbsp; #iGEM2020</p>
−
    data-bottom-top="transform:translate3d(0px, 300%, 0px)"
+
            </div>
−
    data-top-bottom="transform:translate3d(0px, 0%, 0px)">
+
        </div>
−
    <div
+
        <div id="slide-2" class="slide">
−
         class="parallax-image parallax-image-50"
+
            <div class="caption"
−
        style="background-image:url(T--Fudan--index02.svg)"
+
                data-anchor-target="#scrolling-helper"
−
         data-anchor-target="#index02 + .gap"
+
            >
−
         data-bottom-top="transform: translate3d(0px, -12%, 0px);"
+
                <p style="color:#ccc;padding-left:1em">scene 2</p>
−
        data-top-bottom="transform: translate3d(0px, 12%, 0px);"
+
            </div>
−
     ></div>
+
         </div>
−
</div>
+
        <div id="slide-3" class="slide">
−
<div
+
            <div class="caption"
−
    class="parallax-image-wrapper parallax-image-wrapper-100"
+
                data-anchor-target="#scrolling-helper"
−
    data-anchor-target="#index03 + .gap"
+
            >
−
    data-bottom-top="transform:translate3d(0px, 400%, 0px)"
+
                <p style="color:#ccc;padding-left:1em">scene 3</p>
−
    data-top-bottom="transform:translate3d(0px, 0%, 0px)">
+
            </div>
−
    <div
+
        </div>
−
        class="parallax-image parallax-image-100"
+
        <div id="slide-4" class="slide">
−
        style="background-image:url(T--Fudan--index03.svg)"
+
            <div class="caption"
−
        data-anchor-target="#index03 + .gap"
+
                data-anchor-target="#scrolling-helper"
−
        data-bottom-top="transform: translate3d(0px, -12%, 0px);"
+
            >
−
        data-top-bottom="transform: translate3d(0px, 12%, 0px);"
+
                <p style="color:#ccc;padding-left:1em">scene 4</p>
−
    ></div>
+
            </div>
−
</div>
+
         </div>
−
<div
+
        <div id="slide-5" class="slide">
−
    class="parallax-image-wrapper parallax-image-wrapper-50"
+
            <div class="caption"
−
    data-anchor-target="#index04 + .gap"
+
                data-anchor-target="#scrolling-helper"
−
    data-bottom-top="transform:translate3d(0px, 500%, 0px)"
+
            >
−
    data-top-bottom="transform:translate3d(0px, 0%, 0px)">
+
                <p style="color:#ccc;padding-left:1em">scene 5</p>
−
    <div
+
            </div>
−
         class="parallax-image parallax-image-50"
+
        </div>
−
        style="background-image:url(T--Fudan--index04.svg)"
+
        <div id="slide-6" class="slide">
−
        data-anchor-target="#index04 + .gap"
+
            <div class="caption"
−
        data-bottom-top="transform: translate3d(0px, -12%, 0px);"
+
                data-anchor-target="#scrolling-helper"
−
        data-top-bottom="transform: translate3d(0px, 12%, 0px);"
+
            >
−
    ></div>
+
                <p style="color:#ccc;padding-left:1em">scene 6</p>
−
</div>
+
            </div>
−
<div
+
         </div>
−
    class="parallax-image-wrapper parallax-image-wrapper-100"
+
        <div id="slide-7" class="slide">
−
    data-anchor-target="#index05 + .gap"
+
            <div class="caption"
−
    data-bottom-top="transform:translate3d(0px, 600%, 0px)"
+
                data-anchor-target="#scrolling-helper"
−
    data-top-bottom="transform:translate3d(0px, 0%, 0px)">
+
            >
−
    <div
+
                <p style="color:#ccc;padding-left:1em">scene 7</p>
−
         class="parallax-image parallax-image-100"
+
            </div>
−
        style="background-image:url(T--Fudan--index05.svg)"
+
        </div>
−
        data-anchor-target="#index05 + .gap"
+
        <div id="slide-8" class="slide">
−
        data-bottom-top="transform: translate3d(0px, -12%, 0px);"
+
            <div class="caption"
−
        data-top-bottom="transform: translate3d(0px, 12%, 0px);"
+
                data-anchor-target="#scrolling-helper"
−
    ></div>
+
            >
−
</div>
+
                <p style="color:#ccc;padding-left:1em">scene 8</p>
−
<div
+
            </div>
−
    class="parallax-image-wrapper parallax-image-wrapper-50"
+
         </div>
−
    data-anchor-target="#index06 + .gap"
+
        <div id="slide-9" class="slide">
−
    data-bottom-top="transform:translate3d(0px, 700%, 0px)"
+
            <div class="caption"
−
    data-top-bottom="transform:translate3d(0px, 0%, 0px)">
+
                data-anchor-target="#scrolling-helper"
−
    <div
+
            >
−
         class="parallax-image parallax-image-50"
+
                <p style="color:#ccc;padding-left:1em">scene 9</p>
−
        style="background-image:url(T--Fudan--index06.svg)"
+
            </div>
−
        data-anchor-target="#index06 + .gap"
+
        </div>
−
        data-bottom-top="transform: translate3d(0px, -12%, 0px);"
+
        <div id="slide-10" class="slide">
−
        data-top-bottom="transform: translate3d(0px, 12%, 0px);"
+
            <div class="caption"
−
    ></div>
+
                data-anchor-target="#scrolling-helper"
−
</div>
+
            >
−
<div
+
                <p style="color:#ccc;padding-left:1em">scene 10</p>
−
    class="parallax-image-wrapper parallax-image-wrapper-100"
+
            </div>
−
    data-anchor-target="#index07 + .gap"
+
        </div>
−
    data-bottom-top="transform:translate3d(0px, 800%, 0px)"
+
        <div id="slide-end" class="slide">
−
    data-top-bottom="transform:translate3d(0px, 0%, 0px)">
+
            <div class="caption"
−
    <div
+
                style="left:5%;bottom:5%;right:auto"
−
         class="parallax-image parallax-image-100"
+
                data-1420p="opacity: 0; transform:translate(0,-200%);"
−
        style="background-image:url(T--Fudan--index07.svg)"
+
                data-1470p="opacity: 1; transform:translate(0,0);"
−
        data-anchor-target="#index07 + .gap"
+
                data-anchor-target="#scrolling-helper"
−
        data-bottom-top="transform: translate3d(0px, -12%, 0px);"
+
            >
−
        data-top-bottom="transform: translate3d(0px, 12%, 0px);"
+
<h1 style="color:white">We are proud to contribute to the <a style="color:white" href="/Team:Fudan/Sustainable">Sustainable</a> Development.</h1>
−
    ></div>
+
<p style="color:white">To find the quick answer to <a style="color:white" href="https://video.igem.org/videos/watch/7a0fee51-a637-4caf-aa97-a1d9bcafd3ba" target="_blank">the puzzle</a> please visit <a style="color:white" href="/Team:Fudan/Poster">/Team:Fudan/Poster</a></p>
−
</div>
+
            </div>
−
<div
+
        </div>
−
    class="parallax-image-wrapper parallax-image-wrapper-50"
+
    </div>
−
    data-anchor-target="#index08 + .gap"
+
−
    data-bottom-top="transform:translate3d(0px, 900%, 0px)"
+
−
    data-top-bottom="transform:translate3d(0px, 0%, 0px)">
+
−
    <div
+
−
        class="parallax-image parallax-image-50"
+
−
        style="background-image:url(T--Fudan--index08.svg)"
+
−
        data-anchor-target="#index08 + .gap"
+
−
        data-bottom-top="transform: translate3d(0px, -12%, 0px);"
+
−
        data-top-bottom="transform: translate3d(0px, 12%, 0px);"
+
−
    ></div>
+
−
</div>
+
−
<div
+
−
    class="parallax-image-wrapper parallax-image-wrapper-100"
+
−
    data-anchor-target="#index09 + .gap"
+
−
    data-bottom-top="transform:translate3d(0px, 1000%, 0px)"
+
−
    data-top-bottom="transform:translate3d(0px, 0%, 0px)">
+
−
    <div
+
−
        class="parallax-image parallax-image-100"
+
−
        style="background-image:url(T--Fudan--index09.svg)"
+
−
        data-anchor-target="#index09 + .gap"
+
−
        data-bottom-top="transform: translate3d(0px, -12%, 0px);"
+
−
        data-top-bottom="transform: translate3d(0px, 12%, 0px);"
+
−
    ></div>
+
−
</div>
+
−
<div
+
−
    class="parallax-image-wrapper parallax-image-wrapper-50"
+
−
    data-anchor-target="#index10 + .gap"
+
−
    data-bottom-top="transform:translate3d(0px, 1100%, 0px)"
+
−
    data-top-bottom="transform:translate3d(0px, 0%, 0px)">
+
−
    <div
+
−
        class="parallax-image parallax-image-50"
+
−
        style="background-image:url(T--Fudan--index10.svg)"
+
−
        data-anchor-target="#index10 + .gap"
+
−
        data-bottom-top="transform: translate3d(0px, -12%, 0px);"
+
−
        data-top-bottom="transform: translate3d(0px, 12%, 0px);"
+
−
    ></div>
+
 
</div>
 
</div>
−
<div
 
−
    class="parallax-image-wrapper parallax-image-wrapper-100"
 
−
    data-anchor-target="#index11"
 
−
    data-bottom-top="transform:translate3d(0px, 1200%, 0px)"
 
−
    data-top-bottom="transform:translate3d(0px, 0%, 0px)">
 
−
    <div
 
−
        class="parallax-image parallax-image-100"
 
−
        style="background-image:url(T--Fudan--index11.svg)"
 
−
        data-anchor-target="#index11"
 
−
        data-bottom-top="transform: translate3d(0px, -12%, 0px);"
 
−
        data-top-bottom="transform: translate3d(0px, 12%, 0px);"
 
−
    ></div>
 
−
</div> -->
 
  
−
<div id="skrollr-body">
+
<div id="scrolling-helper">
−
        <img src="https://static.igem.org/mediawiki/2020/8/89/T--Fudan--index01.svg" />
+
    <div class="marker red"></div>
−
        <img src="https://static.igem.org/mediawiki/2020/2/2d/T--Fudan--index02.svg" />
+
    <div class="marker green"></div>
−
        <img src="https://static.igem.org/mediawiki/2020/2/21/T--Fudan--index03.svg" />
+
    <div class="marker blue"></div>
−
        <img src="https://static.igem.org/mediawiki/2020/c/cc/T--Fudan--index04.svg" />
+
    <div class="marker grey"></div>
−
        <img src="https://static.igem.org/mediawiki/2020/7/73/T--Fudan--index05.svg" />
+
    <div class="marker yellow"></div>
−
        <img src="https://static.igem.org/mediawiki/2020/5/50/T--Fudan--index06.svg" />
+
    <div class="marker red"></div>
−
        <img src="https://static.igem.org/mediawiki/2020/6/69/T--Fudan--index07.svg" />
+
    <div class="marker green"></div>
−
        <img src="https://static.igem.org/mediawiki/2020/f/fc/T--Fudan--index08.svg" />
+
    <div class="marker blue"></div>
−
        <img src="https://static.igem.org/mediawiki/2020/f/f8/T--Fudan--index09.svg" />
+
    <div class="marker grey"></div>
−
        <img src="https://static.igem.org/mediawiki/2020/9/9b/T--Fudan--index10.svg" />
+
    <div class="marker yellow"></div>
−
        <img src="https://static.igem.org/mediawiki/2020/6/63/T--Fudan--index11.svg" />
+
 
</div>
 
</div>
 +
<script src="/wiki/index.php?title=Template:Fudan/skrollr.js&action=raw&ctype=text/javascript"></script>
 +
<script>
 +
  var s = skrollr.init();
 +
</script>
  
−
<p>Project Design at <a href="/Team:Fudan/Design">/Team:Fudan/Design</a></p>
+
<!-- #content #globalWrapper -->

Latest revision as of 14:17, 17 December 2020

by Team:Fudan   #iGEM2020

scene 2

scene 3

scene 4

scene 5

scene 6

scene 7

scene 8

scene 9

scene 10

We are proud to contribute to the Sustainable Development.

To find the quick answer to the puzzle please visit /Team:Fudan/Poster