Difference between revisions of "Team:Fudan/"

(after vgj)
(simple skrollr)
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 13: Line 13:
 
}
 
}
  
−
.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: 2px;
−
    box-sizing:border-box;
+
 
}
 
}
−
 
+
.marker {
−
.content-full {
+
     height:10%;
−
     height:100%;
+
    width: 100%;
 +
}
 +
.red {
 +
    background-color: red;
 
}
 
}
−
 
+
.green {
−
#done {
+
    background-color: green;
−
     height:100%;
+
}
 +
.blue {
 +
    background-color: blue;
 +
}
 +
.grey {
 +
    background-color: grey;
 +
}
 +
.yellow {
 +
     background-color: yellow;
 
}
 
}
 
</style>
 
</style>
  
−
<div id="skrollr-body">
+
<body>
−
         <img src="https://static.igem.org/mediawiki/2020/8/89/T--Fudan--index01.svg" alt="bon pill 1" /><br/>
+
    <div id="slides-container">
−
        <img src="https://static.igem.org/mediawiki/2020/2/2d/T--Fudan--index02.svg" alt="bon pill 2" /><br/>
+
         <div id="slides"
−
        <img src="https://static.igem.org/mediawiki/2020/2/21/T--Fudan--index03.svg" alt="bon pill 3" /><br/>
+
            data-0="transform:translate(0%,0);"
−
        <img src="https://static.igem.org/mediawiki/2020/c/cc/T--Fudan--index04.svg" alt="bon pill 4" /><br/>
+
            data-133p="transform:translate(-50%,0);"
−
        <img src="https://static.igem.org/mediawiki/2020/7/73/T--Fudan--index05.svg" alt="bon pill 5" /><br/>
+
            data-200p=""
−
        <img src="https://static.igem.org/mediawiki/2020/5/50/T--Fudan--index06.svg" alt="bon pill 6" /><br/>
+
            data-250p="transform:translate(-50%,-50%);"
−
        <img src="https://static.igem.org/mediawiki/2020/6/69/T--Fudan--index07.svg" alt="bon pill 7" /><br/>
+
            data-300p=""
−
        <img src="https://static.igem.org/mediawiki/2020/f/fc/T--Fudan--index08.svg" alt="bon pill 8" /><br/>
+
            data-400p="transform:translate(-50%,-100%);"
−
        <img src="https://static.igem.org/mediawiki/2020/f/f8/T--Fudan--index09.svg" alt="bon pill 9" /><br/>
+
            data-450p=""
−
        <img src="https://static.igem.org/mediawiki/2020/9/9b/T--Fudan--index10.svg" alt="bon pill 10" /><!--br/>
+
            data-550p="transform:translate(-50%,-150%);"
−
        <img src="https://static.igem.org/mediawiki/2020/6/63/T--Fudan--index11.svg" alt="bon pill 11" / -->
+
            data-600p=""
−
  </div>
+
            data-700p="transform:translate(-50%,-200%);"
 +
            data-750p=""
 +
            data-850p="transform:translate(-50%,-250%);"
 +
            data-900p=""
 +
            data-1000p="transform:translate(-50%,-300%);"
 +
            data-1050p=""
 +
            data-1150p="transform:translate(-50%,-350%);"
 +
            data-1200p=""
 +
            data-1300p="transform:translate(-50%,-400%);"
 +
            data-1350p=""
 +
            data-1450p="transform:translate(-100%,-400%);"
 +
        >
 +
            <div id="slide-1" class="slide">
 +
                <div class="caption"
 +
                    data-40p="opacity: 1; transform:translate(0px,0px);"
 +
                    data-70p="opacity: 0; transform:translate(0px,-100%);"
 +
                    data-anchor-target="#scrolling-helper"
 +
                    style="top:52%;left:62%"
 +
                >
 +
                    <p style="color:black">by Team:Fudan &nbsp; #iGEM2020</p>
 +
                </div>
 +
            </div>
 +
            <div id="slide-2" class="slide">
 +
                <div class="caption"
 +
                    data-anchor-target="#scrolling-helper"
 +
                >
 +
                    <p style="color:#ccc;padding-left:1em">scene 2</p>
 +
                </div>
 +
            </div>
 +
            <div id="slide-3" class="slide">
 +
                <div class="caption"
 +
                    data-anchor-target="#scrolling-helper"
 +
                >
 +
                    <p style="color:#ccc;padding-left:1em">scene 3</p>
 +
                </div>
 +
            </div>
 +
            <div id="slide-4" class="slide">
 +
                <div class="caption"
 +
                    data-anchor-target="#scrolling-helper"
 +
                >
 +
                    <p style="color:#ccc;padding-left:1em">scene 4</p>
 +
                </div>
 +
            </div>
 +
            <div id="slide-5" class="slide">
 +
                <div class="caption"
 +
                    data-anchor-target="#scrolling-helper"
 +
                >
 +
                    <p style="color:#ccc;padding-left:1em">scene 5</p>
 +
                </div>
 +
            </div>
 +
            <div id="slide-6" class="slide">
 +
                <div class="caption"
 +
                    data-anchor-target="#scrolling-helper"
 +
                >
 +
                    <p style="color:#ccc;padding-left:1em">scene 6</p>
 +
                </div>
 +
            </div>
 +
            <div id="slide-7" class="slide">
 +
                <div class="caption"
 +
                    data-anchor-target="#scrolling-helper"
 +
                >
 +
                    <p style="color:#ccc;padding-left:1em">scene 7</p>
 +
                </div>
 +
            </div>
 +
            <div id="slide-8" class="slide">
 +
                <div class="caption"
 +
                    data-anchor-target="#scrolling-helper"
 +
                >
 +
                    <p style="color:#ccc;padding-left:1em">scene 8</p>
 +
                </div>
 +
            </div>
 +
            <div id="slide-9" class="slide">
 +
                <div class="caption"
 +
                    data-anchor-target="#scrolling-helper"
 +
                >
 +
                    <p style="color:#ccc;padding-left:1em">scene 9</p>
 +
                </div>
 +
            </div>
 +
            <div id="slide-10" class="slide">
 +
                <div class="caption"
 +
                    data-anchor-target="#scrolling-helper"
 +
                >
 +
                    <p style="color:#ccc;padding-left:1em">scene 10</p>
 +
                </div>
 +
            </div>
 +
            <div id="slide-end" class="slide">
 +
                <div class="caption"
 +
                    style="left:5%;bottom:5%;right:auto"
 +
                    data-1420p="opacity: 0; transform:translate(0,-200%);"
 +
                    data-1470p="opacity: 1; transform:translate(0,0);"
 +
                    data-anchor-target="#scrolling-helper"
 +
                >
 +
<h1 style="color:white">We are proud to contribute to the <a style="color:white" href="/Team:Fudan/Sustainable">Sustainable</a> Development.</h1>
 +
<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> above, please visit <a style="color:white" href="/Team:Fudan/Poster">/Team:Fudan/Poster</a>.</p>
 +
                </div>
 +
            </div>
 +
        </div>
 +
    </div>
  
−
<p>To find the quick answer to <a href="https://video.igem.org/videos/watch/7a0fee51-a637-4caf-aa97-a1d9bcafd3ba" target="_blank">the puzzle</a> above, please visit <a href="/Team:Fudan/Poster">/Team:Fudan/Poster</a>.<br/>
+
    <div id="scrolling-helper">
−
  We are proud to contribute to the <a href="/Team:Fudan/Sustainable">Sustainable</a> Development.
+
        <div class="marker red"></div>
−
<br/><img src="https://static.igem.org/mediawiki/2020/5/51/T--Fudan--title_3.svg" style="width:50%" alt="bone appetite" />
+
        <div class="marker green"></div>
−
  </p>
+
        <div class="marker blue"></div>
 +
        <div class="marker grey"></div>
 +
        <div class="marker yellow"></div>
 +
        <div class="marker red"></div>
 +
        <div class="marker green"></div>
 +
        <div class="marker blue"></div>
 +
        <div class="marker grey"></div>
 +
        <div class="marker yellow"></div>
 +
    </div>
 +
    <script src="/wiki/index.php?title=Template:Fudan/skrollr.js&action=raw&ctype=text/javascript"></script>
 +
    <script type="text/javascript">
 +
      var s = skrollr.init();
 +
    </script>
  
 
</div></div><!-- .igem_column_wrapper .igem_content_wrapper -->
 
</div></div><!-- .igem_column_wrapper .igem_content_wrapper -->

Revision as of 13:57, 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 above, please visit /Team:Fudan/Poster.