Widget:新样式：修订间差异

H萌娘，万物皆可H的百科全书！
跳到导航 跳到搜索
imported>=海豚=
无编辑摘要
imported>=海豚=
无编辑摘要
第1行： 第1行：


<!-- 檀: Code Start Here (Create at 20201021) -->
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
   <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
   <!--<link rel="stylesheet" href="style.css">-->
   <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
  
   <title>iGEM Athens 2020 Wiki</title>
   <style>




<html>
body{
<link rel="stylesheet"
   font-family: 'Quicksand', sans-serif;
  href="https://2020.igem.org/wiki/index.php?title=Template:AHUT-ZJU-China/default.css&amp;action=raw&amp;ctype=text/css">
   background-color: #000000;
<link rel="stylesheet"
   color: #D5D5D5;
  href="https://2020.igem.org/wiki/index.php?title=Template:AHUT-ZJU-China/home-fonts.css&amp;action=raw&amp;ctype=text/css">
   height: 100vh;
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">
   width: 90vw;
<style>
   overflow-x: hidden;
#main-header .main-nav nav ul li a {
  
color: #000;
text-decoration: none;
padding: 0;
transition: all .5s ease-in-out;
}
}
::selection {
ol { text-align: left;
background: rgba(255, 193, 8, 0.7);
  font-size: 140%;}
color: #ffffff;
ul { text-align: left;}
a:hover{
font-weight: bold;
text-decoration: none;
}
}
a{color: #D5D5D5;}
.lightBack {color: #d5d5d5;}


::-moz-selection {
.display-1 { font-size: 40px;
background: rgba(255, 193, 8, 0.7);
      position: left;
color: #ffffff;
}
}


::selection {
 
background: rgba(255, 193, 8, 0.7);
#content {
color: #ffffff;
width: 100%;
     min-height: 100vh;
     margin: 0;
     margin-top: -12vh;
     padding: 0;
     padding-top: 0px;
background-color:black;
 
}
 
#top_title {
display: inline;
}
 
#navbar {
display: inline;
 
}
 
.navbar_ul  {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
 
.navbar_ul ul{
list-style-type: none;
}
}


::-moz-selection {
.navbar_ul.transparent {
background: rgba(255, 193, 8, 0.7);
background-color:transparent;
color: #ffffff;
}
}
   #globalWrapper,
   .project,.wet,.dry,.human,.team,.judging,.achievements,.future{
  #content,
 
  #HQ_page,
  float: left;
  #bodyContent,
  font-size: 7vh;
  #mw-content-text {
    justify-content: space-around;
   height: 100%;
    padding: 0px 0px 0px 1.5vh;
 
   }
   }
  .logos{
 
   float: left;
   font-size: 7vh;
     justify-content: space-around;
     padding: 0px 0px 0px 2vh;
 
  }


   * {
   .project a,.wet a,.dry a,.human a,.team a,.judging a,.achievements a,.future a,.logos a, .project_dropdown_li a, .wet_dropdown_li a, .dry_dropdown_li a, .human_dropdown_li a, .team_dropdown_li a, .judging_dropdown_li a, .achievements_dropdown_li a, .future_dropdown_li a,.logos_dropdown_li a {
   font-smoothing: antialiased;
  display: block;
   -webkit-font-smoothing: antialiased;
  color: #d5d5d5;
   text-rendering: optimizeLegibility;
  font-family: "Quicksand", sans-serif;
   line-height: 1;
  text-transform: uppercase;
font-family: 'Playfair Display', serif !important;
  text-align: left;
  padding: 2vh 2vh;
  text-decoration: none;
  font-weight: 300;
  letter-spacing: 2px;
  font-size: 2vh;
 
   }
   }


#video-preload {
.logo img{
height: 0;
  background-color: transparent;
width: 0;
   width: 170px;
opacity: 0;
   height: auto;
overflow: hidden;
   vertical-align: top;
   transition: transform 2s;
}
 
 
 
.img-container {
  position: fixed;
  z-index: 99 !important;
  top: 3%; /* required */
  left: 2%;
  width: 170px;
  height: auto;
}
.myimage0 { /*text only always opaque*/
  width: 170px;
  height: auto;
  position: relative;
  margin-top:3vh;
  margin-left:0vh;
  opacity: 1;
}
.myimage1 {
   width: 170px;
   height: auto;
   position: absolute;
   opacity: 0;
}
}
.myimage2 {
  width: 170px;
  height: auto;
  position: absolute;
  opacity: 0;
}
.myimage3 {
  width: 170px;
  height: auto;
  position: absolute;
  opacity: 0;
}
.myimage4 {
  width: 170px;
  height: auto;
  position: absolute;
  opacity: 0;
}
.myimage5 {
  width: 170px;
  height: auto;
  position:absolute;
  opacity: 0;
}
.myvideo5 { /*this is the complete one*/
  width: 170px;
  height: auto;
  position: absolute;
  opacity: 0;
}
.logo:hover {
  -ms-transform: scale(1.05); /* IE 9 */
  -webkit-transform: scale(1.05); /* Safari 3-8 */
  transform: scale(1.05);


#video-preload video {
height: 0;
width: 0;
opacity: 0;
overflow: hidden;
}
}
.myimage1:hover , .myimage2:hover, .myimage3:hover, .myimage4:hover,.myimage5:hover,.myvideo5:hover{
-ms-transform: scale(1.05); /* IE 9 */
-webkit-transform: scale(1.05); /* Safari 3-8 */
transform: scale(1.05);


html, body {
padding: 0;
margin: 0;
width: 100%;
   height: 100%;
   font-family: 'Playfair Display', serif !important;
}
.page-section {
position: relative;
width: 100%;
height: 100%;
}
.next-btn {
   padding: 10px 18px;
   color: #fff;
   border: solid 1px #fff;
   display: inline-block;
   cursor: pointer;
   transition: all .3s ease-in-out;
   font-size: 16px;
}
.next-btn:hover {
background-color: #fff;
color: #000;
}
#hero-section video {
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
}
#hero-section .side-bar {
position: absolute;
z-index: 102;
right: 0;
top: 220px;
bottom: 0;
width: 450px;
background-color: #000;
/* background: linear-gradient(135deg, transparent 20px, #000 0); */
}
#hero-section .side-bar.transform {
animation: side-bar-expand-shrink .6s 1;
-moz-animation: side-bar-expand-shrink .6s 1;
-webkit-animation: side-bar-expand-shrink .6s 1;
-o-animation: side-bar-expand-shrink .6s 1;
animation-timing-function: ease;
}
@keyframes side-bar-expand-shrink {
60%{
width: 100%;
top: 0;
}
70%{
width: 100%;
top: 0;
}
100%{
width: 450px;
top: 220px;
}
}
/*
#hero-section .side-bar::before {
content: '';
   position: absolute;
   height: 80px;
   width: 80px;
   left: -80px;
   bottom: 0;
   background-color: #000;
   background: linear-gradient(135deg, transparent 73px, #000 0);
}
*/
#hero-section .side-bar .content {
opacity: 1;
transition: opacity .5s ease-in-out;
}
#hero-section .side-bar .content.hide {
opacity: 0;
}
#hero-section .side-bar .top-title {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 30px 40px 20px 40px;
}
#hero-section .side-bar .bottom-title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 10px 40px;
border-top: solid 1px #525252;
text-align: right;
}
#hero-section .side-bar .top-title .subtitle {
color: #adadad;
   text-transform: uppercase;
   font-size: 13px;
}
#hero-section .side-bar .top-title h1 {
color: #fff;
   font-size: 25px;
   margin-top: 10px;
   margin-bottom: 0;
   text-transform: uppercase;
}
#hero-section .side-bar .text-content {
padding: 0 40px;
   overflow-y: auto;
   position: absolute;
   top: 100px;
   bottom: 62px;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
#hero-section .side-bar .text-content::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
}
#hero-section .side-bar .text-content p {
.myimage0:hover{
color: #dedede;
-ms-transform: scale(1.05); /* IE 9 */
font-size: 16px;
-webkit-transform: scale(1.05); /* Safari 3-8 */
}
transform: scale(1.05); 
#hero-section .video-mask {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgb(0 0 0 / 0);
   z-index: 101;
   transition: all .5s ease-in-out;
}
#hero-section .video-mask.show {
background-color: rgb(0 0 0 / 0.8);
}
#main-header {
position: absolute;
left: 0;
top: 0;
z-index: 102;
padding: 12px 30px;
padding-right: 50px;
background-color: #fff;
transition: all .5s ease-in-out;
background: linear-gradient(315deg, transparent 20px, #fff 0);
margin-top: 19px;
}
#main-header img.logo {
height: 80px;
width: auto;
transition: all .5s ease-in-out;
-webkit-filter: grayscale(0);
   filter: grayscale(0);
}
#main-header .float-left {
float: left;
}
#main-header .float-right {
float: right;
}
#main-header .float-clear {
clear: both;
}
#main-header .main-nav nav ul li {
color: #000;
   font-size: 16px;
   display: inline-block;
   margin: 15px 10px;
   transition: all .5s ease-in-out;
   cursor: pointer;
   border-left: solid 1px #000;
   padding: 0 0 2px 25px;
}
#main-header .main-nav nav ul {
padding-left: 20px;
transition: all .5s ease-in-out;
margin-top: 15px;
   margin-left: 0;


}
#main-header.shrink {
transition: all .5s ease-in-out;
}
#main-header.shrink .main-nav nav ul li {
margin: 2px 5px;
font-size: 13px;
border-left: solid 1px #000;
   padding: 0 0 3px 15px;
}
#main-header.shrink .main-nav nav ul {
padding-left: 15px;
margin: 15px 0 0 0;
}
#main-header.shrink img.logo {
height: 50px;
-webkit-filter: grayscale(100%);
   filter: grayscale(100%);
}
#main-header .sub-nav {
visibility: hidden;
opacity: 0;
transform: scaleY(0);
transition: all .5s ease-in-out;
}
#main-header .sub-nav.show {
visibility: visible;
opacity: 1;
transform: scaleY(1);
}
#main-header .sub-nav nav ul li {
display: block;
   padding: 5px 0 !important;
   border-left: none !important;
}
.fadedNavItem {
   color: #e6e6e6 !important;
   border-color: #e6e6e6 !important;
transition: all .5s ease-in-out;
}
.fadedNavItem a {
color: #e6e6e6 !important;
transition: all .5s ease-in-out;
}
}
.toggle {
  background-color: white;
  color: #3C3A3A;
  text-indent: 0px;
  position: relative;
  top: 150%;


#main-header li {
}
-webkit-touch-callout: none;
     /* iOS Safari */
     -webkit-user-select: none;
     /* Chrome/Safari/Opera */
     -khtml-user-select: none;
     /* Konqueror */
     -moz-user-select: none;
     /* Firefox */
     -ms-user-select: none;
     /* Internet Explorer/Edge */
     user-select: none;
}
.hero-title {
   position: absolute;
   z-index: 100;
   padding-bottom: 50px;
   padding-left: 50px;
   left: 0;
   bottom: 0;
   right: 0;
   background-image: linear-gradient(to top, black , transparent);
}
.hero-title h1 {
font-size: 40px;
   color: #fff;
   margin-bottom: 0;
}
.hero-title h2 {
   font-size: 14px;
   color: #fff;
   font-weight: 400;
   display: block;
   width: 650px;
   line-height: 1.5;
}


#mw-content-text {
.toggle:hover {
margin-top: 10px;
background-color: #eec53f;
}
}
#bodyContent h1 {
 
   font-weight: 600 !important;
 
.project a:hover:not(.active),.wet a:hover:not(.active),.dry a:hover:not(.active),.human a:hover:not(.active),.team a:hover:not(.active),.judging a:hover:not(.active),.achievements a:hover:not(.active),.future a:hover:not(.active) {
color: #ffffff;
font-weight: bold;
}
}
#top_menu_14 {
 
background-color: #000000;
.project_dropdown_content,.wet_dropdown_content,.dry_dropdown_content,.human_dropdown_content,.team_dropdown_content,.judging_dropdown_content,.achievements_dropdown_content,.future_dropdown_content {
display: none;
position: absolute;
z-index: 1;
}
}
#top_menu_inside {
 
padding-top: 2px;
.project_dropdown_content a:hover{
background-color: #ce34fdc9;
color: #ffffff;
}
}
#top_menu_inside {
.wet_dropdown_content a:hover{
border: none !important;
background-color: #3437fdc9;
margin-left: 3px !important;
color: #ffffff;
}
.dry_dropdown_content a:hover{
background-color: #fd3434c9;
color: #ffffff;
}
.human_dropdown_content a:hover{
background-color: #13ff32c9;
color: #ffffff;
}
.team_dropdown_content a:hover{
background-color: #fdb734c9;
color: #ffffff;
}
.judging_dropdown_content a:hover{
background-color: #fc4fc2c9;
color: #ffffff;
}
.achievements_dropdown_content a:hover{
background-color: #34dffdc9;
color: #ffffff;
}
.future_dropdown_content a:hover{
background-color: #fdfa34c9;
color: #ffffff;
}
}


.loading-cover {
.project_dropdown_content a,.wet_dropdown_content a,.dry_dropdown_content a,.human_dropdown_content a,.team_dropdown_content a,.judging_dropdown_content a,.achievements_dropdown_content a,.future_dropdown_content a{
display: flex;
color: white;
justify-content: center;
text-align: center;
align-items: center;
padding: 18px 14px;
min-height: 100vh;
text-decoration: none;
background: #042104;
}
animation: animateBg 10s linear infinite;
}


.loading-cover .loader{
.project:hover .project_dropdown_content {
position: relative;
display: block;
width: 120px;
}
height: 120px;
.wet:hover .wet_dropdown_content {
}
  display: block;
}
.dry:hover .dry_dropdown_content {
  display: block;
}
.human:hover .human_dropdown_content {
  display: block;
}
.team:hover .team_dropdown_content {
  display: block;
}
.judging:hover .judging_dropdown_content {
  display: block;
}
.achievements:hover .achievements_dropdown_content {
  display: block;
}
.future:hover .future_dropdown_content {
  display: block;
}
 
 
 
/*________________________________First Animation________________________________*/
.clip-circle {
   clip-path: circle(60px at center);
  }
.video-container {
   position:relative;
  }
 
 
.myvideo {
   width: 80%;
   height: auto;
   position: absolute;
   filter: grayscale(100%);
   margin-left: 5%;
   margin-top: 5%;
}
.myvideo-clipped{
   filter: grayscale(100%);
   width: 65%;
   height: auto;
   position: absolute;
   margin-top: 11.8%;
   left:27.8%;
   clip-path:circle(34vh at 50% 50%);
}
.video-container h1 {
   margin:0;
   font-family: sans-serif;
   font-size: 7vw;
   font-weight: 200;
   color: transparent;
   -webkit-text-stroke: 1px white;
   -webkit-text-fill-color: transparent;
   margin-top: 0%;
   left: 20%;
   position: absolute;
   padding:40vh;
}
.video-container h2 {
   margin:0;
   font-family: sans-serif;
   font-size: 7vw;
   font-weight: 200;
   color: transparent;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: white;
   margin-top: 7.5%;
   left: 35%;
   position: absolute;
   padding:40vh;
}


.loading-cover .loader span{
.video-container h3 {
position: absolute;
   margin:0;
top: 0;
   font-family: sans-serif;
left: 0;
   font-size: 7vw;
width: 100%;
   font-weight: 200;
height: 100%;
   color: transparent;
transform: rotate(calc(18deg * var(--i)));
   margin-top: 15%;
}
   left: 35%;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: white;
   position: absolute;
   padding:40vh;
}


.loading-cover .loader span::before{
.circle{
content: "";
   position: absolute;
position: absolute;
   display: block;
top: 0;
   /*margin: 100px auto;*/
left: 0;
   width: 75vh;
width: 15px;
   height: 75vh;
height: 15px;
   left:78vh;
border-radius: 50%;
   margin-top: 19.7vh;
background: #00ff0a;
   background: linear-gradient(#a1a1a1,#4b4a4b);  
box-shadow: 0 0 10px #00ff0a,
   border-radius: 50%;
0 0 20px #00ff0a,
   animation: animate 2000ms linear infinite;
0 0 40px #00ff0a,
}
0 0 60px #00ff0a,
0 0 70px #00ff0a,
0 0 100px #00ff0a;
animation: animate 2s linear infinite;
animation-delay: calc(0.1s * var(--i));
}


@keyframes animateBg{
@keyframes animate{
0%{filter: hue-rotate(0deg)}
   from{
100%{filter: hue-rotate(360deg)}
     transform: rotate(0deg);
}
   }


@keyframes animate{
   to{
0%{transform: scale(1);}
     transform: rotate(360deg);
80%, 100%{transform: scale(0);}
   }
}
}


#first-screen-loading-cover {
.circle:after{
   content: '';
    position: fixed;
    position: fixed;
    top: 0;
    top: 35px;
   right: 35px;
   bottom: 35px;
   left: 35px;
   border-radius: 50%;
   background-color: black;
 
}
 
.circle span{
   position: absolute;
   width: 100%;
   height: 100%;
   background: linear-gradient(#33ccff,#CB01FF);
   border-radius: 50%;
}
 
.circle span:nth-child(1){
   filter: blur(5px);
}
 
.circle span:nth-child(2){
   filter: blur(10px);
}
 
.circle span:nth-child(3){
   filter: blur(20px);
}
 
.circle span:nth-child(4){
   filter: blur(55px);
}
 
 
 
.footer{
   width:80%;
   height:200px;
   border-top: 3px solid #3D3B3B  ;
   margin:auto;
   margin-top: 3%;
   left: 3%;
}
 
.footer ul{
  
   margin:0%  50%;
   text-align:right;
   display:flex;
   position:absolute;
   transform: translate(-40%, -50%);
   color: white;
   margin-left: 3%;
}
.footer ul li{
   list-style: none;
   position:relative;
   margin-left: 17%;
}
.footer h4{
 
 
   text-align: center;
   background-color:none;
   position: absolute;
   margin: 120px 0 0 36%;
   font-size: 12px;
}
 
.footer ul li a{
   text-align: center;
   line-height: 70px;
   font-size:30px;
   margin:0 10px;
   display:block;
   position: relative;
   z-index: 1;
 
}
 
.footer ul li a .fa{
   position: relative;
   color: white;
   transition: 0.5s;
 
}
 
.f1 a:hover .fa{
   color: #3b5998;
   transform: rotateY(360deg);
}
 
.f1 a:before{
   content:'';
   position: absolute;
   top:100%;
   left:0;
   background: #3b5998;
   transition:0.5s;
   z-index: 2;
}
 
 
.f1 a:before{
   content:'';
   position: absolute;
   top:100%;
   left:0;
   background: #3b5998;
   transition:0.5s;
   z-index: 2;
}
.t2 a:hover .fa{
   color:  #55acee;
   transform: rotateY(360deg);
}
 
.t2 a:before{
   content:'';
   position: absolute;
   top:100%;
   left:0;
   background:  #55acee;
   transition:0.5s;
   z-index: 2;
}
.i3 a:hover .fa{
   color: #C32AA3;
   transform: rotateY(360deg);
}
 
.i3 a:before{
   content:'';
   position: absolute;
   top:100%;
   left:0;
   background: #C32AA3;
   transition:0.5s;
   z-index: 2;
}
.g4 a:hover .fa{
   color: #dd4b39;
   transform: rotateY(360deg);
}
 
.g4 a:before{
   content:'';
   position: absolute;
   top:100%;
   left:0;
   background: #dd4b39;
   transition:0.5s;
   z-index: 2;
}
 
.x5 a:hover .fa{
   color: #9ACD99;
   transform: rotateY(360deg);
}
 
.x5 a:before{
   content:'';
   position: absolute;
   top:100%;
   left:0;
   background: lightgoldenrodyellow;
   transition:0.5s;
   z-index: 2;
}
@keyframes slide{
   0%{
     background-position-x: 0%;
 
   }
   100%{
     background-position-x: 600vw;
 
   }
}
 
/*-----------------------COLOUR FOR CHANGE ANIMATION-----------*/
.fade-in1 {
   animation: fadeIn1 ease 2s;
   -webkit-animation: fadeIn1 ease 2s;
   -moz-animation: fadeIn1 ease 2s;
   -o-animation: fadeIn1 ease 2s;
   -ms-animation: fadeIn1 ease 2s;
  }
  @keyframes fadeIn1 {
   0% {
    opacity:0;
   }
   100% {
    opacity:1;
   }
  }
 
  @-moz-keyframes fadeIn1 {
   0% {
    opacity:0;
   }
   100% {
    opacity:1;
   }
  }
 
  @-webkit-keyframes fadeIn1 {
   0% {
    opacity:0;
   }
   100% {
    opacity:1;
   }
  }
 
  @-o-keyframes fadeIn1 {
   0% {
    opacity:0;
   }
   100% {
    opacity:1;
   }
  }
 
  @-ms-keyframes fadeIn1 {
   0% {
    opacity:0;
   }
   100% {
    opacity:1;
  }
}
  .fade-in2 {
   animation: fadeIn2 ease 4s;
   -webkit-animation: fadeIn2 ease 4s;
   -moz-animation: fadeIn2 ease 4s;
   -o-animation: fadeIn2 ease 4s;
   -ms-animation: fadeIn2 ease 4s;
  }
  @keyframes fadeIn2 {
   0% {
    opacity:0;
   }
   100% {
    opacity:1;
   }
  }
 
  @-moz-keyframes fadeIn2 {
   0% {
    opacity:0;
   }
   100% {
    opacity:1;
   }
  }
 
  @-webkit-keyframes fadeIn2 {
   0% {
    opacity:0;
   }
   100% {
    opacity:1;
   }
  }
 
  @-o-keyframes fadeIn2 {
   0% {
    opacity:0;
   }
   100% {
    opacity:1;
   }
  }
 
  @-ms-keyframes fadeIn2 {
   0% {
    opacity:0;
   }
   100% {
    opacity:1;
  }
}
.fade-in3 {
   animation: fadeIn3 ease 6s;
   -webkit-animation: fadeIn3 ease 6s;
   -moz-animation: fadeIn3 ease 6s;
   -o-animation: fadeIn3 ease 6s;
   -ms-animation: fadeIn3 ease 6s;
  }
  @keyframes fadeIn3 {
   0% {
    opacity:0;
   }
   100% {
    opacity:1;
   }
  }
 
  @-moz-keyframes fadeIn3 {
   0% {
    opacity:0;
   }
   100% {
    opacity:1;
   }
  }
 
  @-webkit-keyframes fadeIn3 {
   0% {
    opacity:0;
   }
   100% {
    opacity:1;
   }
  }
 
  @-o-keyframes fadeIn3 {
   0% {
    opacity:0;
   }
   100% {
    opacity:1;
   }
  }
 
  @-ms-keyframes fadeIn3 {
   0% {
    opacity:0;
   }
   100% {
    opacity:1;
  }}
  /*------------------text with button words--------------*/
  .main-header{
   font-family: "Quicksand",sans-serif;
   position: relative;
   top: 50%;
   height: 40vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 2rem;
}
 
.main-header h4 {
   font-size: 4rem;
   margin-bottom: 2rem;
   line-height: 1.2;
   color: white;
}
 
.main-header h4 span {
   color: #CB01FF;
}
 
.main-header p{
   font-size: 2rem;
   color:white;
}
 
.item {
  width: 200px;
  height: 200px;
  margin: 50px auto;
  padding-top: 75px;
  text-align: center;
  color: #FFF;
  font-size: 3em;
}
 
.test {
  height: 50vh;
  margin-top: 120vh;
  display: flex;
  flex-direction: row;
}
.test2 {
  height: 50vh;
  margin-top: -500vh;
  display: flex;
  flex-direction: row;
}
 
.parallax {
  width: 50%;
  height: 50%;
  color: #d5d5d5;
  font-size: 4vh;
  text-align: center;
  font-family: 'Quicksand',sans-serif;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
 
.p1 { /*less indented*/
  position: relative;
  left: 5%;
  background-color:transparent;
}
 
.p2 { /* more indented*/
  background-color: transparent;
  position: relative;
  left: 15%;
}
.p3 { /* not indented*/
  background-color: transparent;
}
 
.slidein2 {
  font-family: "Quicksand",sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10vh;
  color: #f0eeee;
  text-align: center;
  background:transparent;
  z-index:50 !important;
}
 
.slidein2 .row {
  position: absolute;
  justify-content: space-around;
}
.slidein2 h4{
   font-size: 2.5vh;
   margin-top: -860vh;
   /*margin-bottom: 2rem;*/
   line-height: 1.2;
   color: #d5d5d5;
}
.slidein2 h5{
  font-size: 2.5vh;
  margin-top: -750vh;
  /*margin-bottom: 2rem;*/
  line-height: 1.2;
  color: #d5d5d5;
}
.slidein2 h6{
  font-size: 2.5vh;
  margin-top: -640vh;
  /*margin-bottom: 2rem;*/
  line-height: 1.2;
  color: #d5d5d5;
}
 
 
 
 
.text-button {
  color: #f0eeee;
  font-family: "Quicksand",sans-serif;
  font-size: 2rem;
  background-color: rgba(168, 39, 168, 0.87);
  background-repeat:no-repeat;
  border: none;
  cursor:pointer;
  overflow: hidden;
  outline:none;
  display: block;
}
.text-button:hover{
  -ms-transform: scale(1.05); /* IE 9 */
  -webkit-transform: scale(1.05); /* Safari 3-8 */
  transform: scale(1.05);
 
  }
 
  .video-container-parallax{
   position: relative;
 
  }
  .video-parallax-left{
   width: 60%;
   height: auto;
   position: absolute;
   left: 15%;
   opacity: 0;
   }
  .video-parallax-right{
   width: 57%;
   height: auto;
   position: absolute;
   margin-top: 12%;
   left: 50%;
   opacity: 0;
  }
  .morphae { /*this is the complete one*/
   width: 500px;
   height: auto;
   position: absolute;
   opacity: 1;
  }
  hr {
   display: block;
   height: 1px;
   border: 0;
   border-top: 1px solid #d5d5d5;
   margin: 1em 0;
   padding: 0;
}
 
/* i have to fix the videos on ezgif and maybe compress them cause theyre too big*/
.loader-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 100 !important;
  top: 0;
  left: 0;
  background-color: #000000;
  display:flex;
  justify-content: center;
  align-items: center;
}
.loader {
  display: inline-block;
  width: 30px;
  height: 30px;
  position: relative;
  top:0%;
  left:0%;
  border: 4px solid #Fff;
  animation: loader 2s infinite ease;
}
.loader-wrapper h1{
position:fixed;
top:10%;
left:5%;
color:white;
font-size:4vh;
font-family:"Quicksand",sans-serif;
opacity:0;
}
.loader-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background-color: #fff;
  animation: loader-inner 2s infinite ease-in;
}
@keyframes loader {
  0% { transform: rotate(0deg);}
  25% { transform: rotate(180deg);}
  50% { transform: rotate(180deg);}
  75% { transform: rotate(360deg);}
  100% { transform: rotate(360deg);}
}
@keyframes loader-inner {
  0% { height: 0%;}
  25% { height: 0%;}
  50% { height: 100%;}
  75% { height: 100%;}
  100% { height: 0%;}
}
.scrolldown{
   position: relative;
   left: 56.5%;
   margin-top: 13%;
   width: 40px;
   height: 40px;
   transform: translateY(-80px) translateX(-50%) rotate(45deg);
}
.scrolldown span{
   position: absolute;
   top:0px;
    left: 0;
    left: 0;
    right: 0;
    display:block;
    bottom: 0;
   width:100%;
    z-index: 100000;
   height:100%;
   border-top: 2px solid white;
   border-left: 2px solid white;
   animation: animate 1.5s linear infinite;
   opacity: 0;
 
}
 
.scrolldown span:nth-child(1){
   transform: translate(-15px,-15px);
   animation-delay: 0s;
}
.scrolldown span:nth-child(2){
   transform: translate(0,0);
   animation-delay: -0.2s;
}
.scrolldown span:nth-child(3){
   transform: translate(15px,15px);
   animation-delay: -0.4s;
}
 
@keyframes animate {
   0%{
     top:5px;
     left:5px;
     opacity: 0;
   }
   25%{
     top: 0;
     left: 0;
     opacity: 1;
   }
    100%{
     top:-5px;
     left:-5px;
     opacity: 0;
    }
}
.footer{
   width:80%;
   height:200px;
   border-top: 3px solid #3D3B3B  ;
   margin:auto;
   margin-top: 3%;
   margin-left: 12%;
}
 
.footer ul{
   margin:4%  39%;
   text-align:right;
   display:flex;
   position:absolute;
   transform: translate(-50%, -50%);
   color: white;
}
.footer ul li{
   list-style: none;
   margin-right: 10%;
}
}
.footer h4{


</style>


   text-align: center;
   background-color:none;
   position: absolute;
   margin: 120px 0 0 36%;
   font-size: 12px;
}


.footer ul li a{
   text-align: center;
   line-height: 70px;
   font-size:30px;
   margin:0 10px;
   display:block;
   position: relative;
   z-index: 1;


}


<div class="floating-nav-btn"></div>
.footer ul li a .fa{
<header id="main-header" class="shrink">
   position: relative;
<div class="float-left">
   color: white;
<img class="logo" src="https://2020.igem.org/wiki/images/7/74/T--AHUT-ZJU-China--logo%402x.png">
   transition: 0.5s;
</div>
<div class="float-left main-nav">
<nav id="main-top-nav">
<ul>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China">HOME</a></li>
<li>TEAM</li>
<li>PROJECT</li>
<li>EXPERIMENTS</li>
<li>PARTS</li>
<li>HP</li>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Model">MODEL</a></li>
<li><a href="https://igem.org/2020_Judging_Form?id=3656">JUDGING FORM</a></li>
</ul>
</nav>
<!-- Top Sub-Nav S -->
<div class="sub-nav" id="sub-nav-team" style="display: none">
<nav>
<ul>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Team">TEAM MEMBERS</a></li>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Attributions">ATTRIBUTION</a></li>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Collaborations">COLLABORATION</a></li>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Partnership">PARTNERSHIP</a></li>
</ul>
</nav>
</div>
<div class="sub-nav" id="sub-nav-project" style="display: none">
<nav>
<ul>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Description">DESCRIPTION</a></li>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Design">DESIGN</a></li>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Contribution">CONTRIBUTION</a></li>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Implementation">PROPOSED IMPLEMENTATION</a></li>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Proof_Of_Concept">PROOF OF CONCEPT</a></li>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Excellence_in_another_Area">EXCELLENCE IN ANOTHER AREA</a></li>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Engineering">ENGINEERING</a></li>
</ul>
</nav>
</div>
<div class="sub-nav" id="sub-nav-parts" style="display: none">
<nav>
<ul>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Parts">OVERVIEW</a></li>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/New_parts">NEW PARTS</a></li>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Improved_parts">IMPROVED PARTS</a></li>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Characterization">CHARACTERIZATION</a></li>
</ul>
</nav>
</div>
<div class="sub-nav" id="sub-nav-hp" style="display: none">
<nav>
<ul>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Human_Practices">HP FOR SILVER</a></li>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Human_Practices">INTEGRATED HP FOR GOLD</a></li>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Education">EDUCATION</a></li>
</ul>
</nav>
</div>
                 <div class="sub-nav" id="sub-nav-experiments" style="display: none">
<nav>
<ul>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Protocol">PROTOCOL</a></li>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Results">RESULTS</a></li>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Safety">SAFETY</a></li>
</ul>
</nav>
</div>
                 <!-- Top Sub-Nav E -->
</div>
<div class="float-clear"></div>
</header>
<!-- 檀: Video Preload -->
<div id="video-preload">
<video src="https://2020.igem.org/wiki/images/0/0b/T--AHUT-ZJU-China--factory.mp4" id="video-preload-first" autoplay="true" preload="load" muted></video>
<video src="https://2020.igem.org/wiki/images/4/41/T--AHUT-ZJU-China--lab.mp4" autoplay="true" preload="load" muted></video>
<video src="https://2020.igem.org/wiki/images/1/14/T--AHUT-ZJU-China--plant.mp4" autoplay="true" preload="load" muted></video>
</div>
<section id="hero-section" class="page-section">
<video id="slide-video" src="" autoplay="true" loop="loop" preload="load" muted></video>
<div class="hero-title">
<h1>Carbon Dioxide Capturer 3.0</h1>
<h2>Presented by Anhui University of Technology (AHUT) and Zhejiang  University (ZJU).</h2>
</div>
<div class="video-mask" id="video-mask"></div>
<div class="side-bar" id="side-bar">
<div class="content" id="side-bar-content">
<div class="top-title">
<div class="subtitle" id="slide-subtitle"></div>
<h1 id="slide-title"></h1>
</div>
<div class="text-content" id="slide-text-content"></div>
<!-- Hero Sidebar Title -->
<div class="bottom-title" id="slide-bottom-title">
<div class="next-btn" id="prev-btn">PREV SLIDE</div>
<div class="next-btn" id="next-btn">NEXT SLIDE</div>
</div>
</div>
</div>
</section>


<div id="first-screen-loading-cover">
}
   <div class="loading-cover">
<div class="loader">
<span style="--i:1;"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
<span style="--i:4;"></span>
<span style="--i:5;"></span>
<span style="--i:6;"></span>
<span style="--i:7;"></span>
<span style="--i:8;"></span>
<span style="--i:9;"></span>
<span style="--i:10;"></span>
<span style="--i:11;"></span>
<span style="--i:12;"></span>
<span style="--i:13;"></span>
<span style="--i:14;"></span>
<span style="--i:15;"></span>
<span style="--i:16;"></span>
<span style="--i:17;"></span>
<span style="--i:18;"></span>
<span style="--i:19;"></span>
<span style="--i:20;"></span>
</div>
</div>
</div>


.f1 a:hover .fa{
   color: #3b5998;
   transform: rotateY(360deg);
}


<!-- 檀: HTML TAGS ENDS & SCRIPTS START -->
.f1 a:before{
   content:'';
   position: absolute;
   top:100%;
   left:0;
   background: #3b5998;
   transition:0.5s;
   z-index: 2;
}




<script>
.f1 a:before{
var slideContent = [
   content:'';
{
   position: absolute;
"section": "PROJECT DESCRIPTION",
   top:100%;
"title": "abstract",
   left:0;
"video-url": "https://2020.igem.org/wiki/images/0/0b/T--AHUT-ZJU-China--factory.mp4",
   background: #3b5998;
"content-html": "<p>Carbon dioxide (CO<sub>2</sub>) mainly from the combustion of fossil fuels is primary greenhouse gas associated with global warming and climate change; therefore, reducing the amount of CO<sub>2</sub> emitted into the atmosphere is an urgent need, of which CO<sub>2</sub> capture has become an extensively investigated area of research. In this project, we decided to use the biomimetic method of the enzyme (carbonic anhydrase, CA) for capturing CO<sub>2</sub>, which has the advantages of safety, high catalytic efficiency and environment-friendly compared with other methods. We designed an efficient and stable CA by improving the catalytic performance of CA from the OT3 strain of the hyperthermophilic archeon Pyrococcus horikoshii for capturing CO<sub>2</sub>. We use computer-aided analysis software to predict the ideal mutation site of the OT3-CA for improving its catalytic activity. In conclusion, we constructed a new part OT3-CA-WT and obtained its protein with higher thermostability, which is able to maintain its activity at 45 °C and 70°C. Furthermore, we obtained the mutant OT3-CA via molecular simulation with enhanced catalytic activity. The thermostability and efficiency of OT3-CA make it a potential candidate for CO<sub>2</sub> capture.</p>"
   transition:0.5s;
},
   z-index: 2;
{
}
"section": "PROJECT DESCRIPTION",
.t2 a:hover .fa{
"title": "CARBONIC ANHYDRASE",
   color:  #55acee;
"video-url": "https://2020.igem.org/wiki/images/4/41/T--AHUT-ZJU-China--lab.mp4",
    transform: rotateY(360deg);
"content-html": "<p>Carbonic anhydrase is a zinc metalloenzyme that catalyzes the reversible reaction of CO<sub>2</sub> and H<sub>2</sub>O to form HCO3<sup>-</sup> and H<sup>+</sup>. It is widely found in animals, plants and microorganisms, and plays an important role in biological processes such as carbon dioxide transfer, photosynthesis, acid-base balance and ion transport in the body.</p>"
},
{
"section": "PROJECT DESCRIPTION",
"title": "catalytic mechnism",
"video-url": "https://2020.igem.org/wiki/images/1/14/T--AHUT-ZJU-China--plant.mp4",
"content-html": "<p>The first step in the reaction is for the HYDROXyl group to act as a nucleophile and attack the carbon atoms in the CO<sub>2</sub> molecule. In the presence of water molecules, hydroxyl ions and CO<sub>2</sub> complexes are replaced by water molecules, detach from the active centers, and form bicarbonate ions. The second step is the regeneration of the active center Zn<sup>2+</sup> -OH <sup>-</sup>. When certain amino acids are used as hydrogen ion transport carriers, water molecules spontaneously ionize and dehydrogenate, and hydrogen ions are transported out of the hydrophobic center. The proton transport rate of the active center is the rate-limiting step of the enzyme-catalyzed reaction. The K<sub>at</sub> value of most carbonic anhydrases is >10<sup>6</sup> s<sup>-1</sup>.</p>"
}
];
</script>
<script>
// utility
function hasClass(ele, cls) {
  cls = cls || '';
  if (cls.replace(/\s/g, '').length == 0) return false;
  return new RegExp(' ' + cls + ' ').test(' ' + ele.className + ' ');
}
function addClass(ele, cls) {
  if (!hasClass(ele, cls)) {
   ele.className = ele.className == '' ? cls : ele.className + ' ' + cls;
  }
}
function removeClass(ele, cls) {
  if (hasClass(ele, cls)) {
   var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ';
   while (newClass.indexOf(' ' + cls + ' ') >= 0) {
    newClass = newClass.replace(' ' + cls + ' ', ' ');
   }
   ele.className = newClass.replace(/^\s+|\s+$/g, '');
  }
}
function loadSlideContent(slideData, index) {
var subtitle = document.getElementById('slide-subtitle'),
title = document.getElementById('slide-title'),
content = document.getElementById('slide-text-content'),
video = document.getElementById('slide-video'),
nextSlideBtn = document.getElementById('next-btn'),
prevSlideBtn = document.getElementById('prev-btn');
subtitle.innerText = 'section: ' + slideData[index]['section'];
title.innerText = slideData[index]['title'];
content.innerHTML = slideData[index]['content-html'];
video.src = slideData[index]['video-url'];
// Hide Next Slide Btn
if (index == slideData.length - 1) {
nextSlideBtn.style.display = 'none';
} else {
nextSlideBtn.style.display = 'inline-block';
}
// Hide Prev Slide Btn
if (index == 0) {
prevSlideBtn.style.display = 'none';
} else {
prevSlideBtn.style.display = 'inline-block';
}
}
function goToSlide(slideData, page) {
// Hide All Inside Elements
addClass(sideBarContent, 'hide');
setTimeout(function() {
// Side Bar Expand-Shrink Animation
addClass(sideBar, 'transform');
setTimeout(function() {
// Load Next Slide Content
loadSlideContent(slideData, page);
}, 300);
setTimeout(function() {
removeClass(sideBar, 'transform');
// Show All Inside Elements
removeClass(sideBarContent, 'hide');
}, 600);
}, 500);
}
// Page Init
var currentSlidePage = 0;
// Load First Slide
loadSlideContent(slideContent, currentSlidePage);
// "Next Slide" Button Bind Event
var nextSlideBtn = document.getElementById('next-btn'),
sideBar = document.getElementById('side-bar'),
sideBarContent = document.getElementById('side-bar-content');
nextSlideBtn.addEventListener('click', function() {
goToSlide(slideContent, ++currentSlidePage);
});
// "Prev Slide" Button Bind Event
var prevSlideBtn = document.getElementById('prev-btn');
prevSlideBtn.addEventListener('click', function() {
goToSlide(slideContent, --currentSlidePage);
});
// Header Expand Animation
var mainHeader = document.getElementById('main-header'),
videoMask = document.getElementById('video-mask');
mainHeader.addEventListener('mouseover', function() {
removeClass(mainHeader, 'shrink');
videoMask.style.display = 'block';
addClass(videoMask, 'show');
});
mainHeader.addEventListener('mouseout', function() {
addClass(mainHeader, 'shrink');
removeClass(videoMask, 'show');
setTimeout(function() {
videoMask.style.display = 'block';
videoMask.style.zIndex = 0;
}, 500);
});
// Nav Action
function showSubNavMenu(name) {
var subNavMenu = document.getElementById('sub-nav-' + name);
subNavMenu.style.display = 'block';
setTimeout(function() {
addClass(subNavMenu, 'show');
}, 1);
// Fade Other Nav Item
var allLis = document.querySelectorAll('#main-top-nav ul li');
for (var i = 0; i < allLis.length; i++) {
if (allLis[i].innerText.toLocaleLowerCase() != name) {
addClass(allLis[i], 'fadedNavItem');
}
}
isInSubMenu = true;
}
function hideAllSubNavMenu() {
// Disable Current Active Item
var allSubNavs = document.querySelectorAll('#main-header .sub-nav');
for (var i = 0; i < allSubNavs.length; i++) {
if (hasClass(allSubNavs[i], 'show')) {
removeClass(allSubNavs[i], 'show');
allSubNavs[i].style.display = 'none';
}
}
// Unfade Other Nav Item
var allLis = document.querySelectorAll('#main-top-nav ul li');
for (var i = 0; i < allLis.length; i++) {
removeClass(allLis[i], 'fadedNavItem');
}
isInSubMenu = false;
}
var mainTopNav = document.getElementById('main-top-nav');
var isInSubMenu = false;
    mainTopNav.onclick = function (ev) {
     var ev = ev || window.event;
     var target = ev.target || ev.srcElement;
     var name = target.innerText.toLocaleLowerCase();
     if (isInSubMenu) {
if (!hasClass(target, 'fadedNavItem')) {
hideAllSubNavMenu();
     return;
} else {
     hideAllSubNavMenu();
}
}
     } else {
     hideAllSubNavMenu();
     }
     if (target.nodeName.toLocaleLowerCase() == 'li'){
       switch(name){
         case 'team':
         case 'project':
         case 'experiment':
         case 'parts':
         case 'hp':
         case 'experiments':
           showSubNavMenu(name);
           break;
       }
     }
   }


.t2 a:before{
   content:'';
   position: absolute;
   top:100%;
   left:0;
   background:  #55acee;
   transition:0.5s;
   z-index: 2;
}
.i3 a:hover .fa{
   color: #C32AA3;
   transform: rotateY(360deg);
}


.i3 a:before{
   content:'';
   position: absolute;
   top:100%;
   left:0;
   background: #C32AA3;
   transition:0.5s;
   z-index: 2;
}
.g4 a:hover .fa{
   color: #dd4b39;
   transform: rotateY(360deg);
}


// TPC: Additional Customize
.g4 a:before{
   content:'';
   position: absolute;
   top:100%;
   left:0;
   background: #dd4b39;
   transition:0.5s;
   z-index: 2;
}


var _tpc_giugiJGUI = document.querySelector('#mw-content-text p');
.x5 a:hover .fa{
_tpc_giugiJGUI.parentNode.removeChild(_tpc_giugiJGUI);
   color: #9ACD99;
   transform: rotateY(360deg);
}


.x5 a:before{
   content:'';
   position: absolute;
   top:100%;
   left:0;
   background: lightgoldenrodyellow;
   transition:0.5s;
   z-index: 2;
}


var _tpc_uigGIUgkg23s = document.getElementById('top_menu_under');
   </style>
_tpc_uigGIUgkg23s.parentNode.removeChild(_tpc_uigGIUgkg23s);
</head>
<body>
  <div class="video-container">
   <video class="myvideo" id="intro" autoplay loop muted>
    <source src="https://2020.igem.org/wiki/images/4/45/T--Athens--intro.mp4" type="video/mp4">
   </video>
   <div class="fade-in1"><h1 id="this">THIS</h1>
   <script type="text/javascript">
   
    $(document).on('scroll',function(){
      $('h1').css("left",Math.max(20 - 0.02*scrollY)+"%");
    })
   </script></div>
   <div class="fade-in2"><h2 id="is">ISN'T</h2>
  
   <script type="text/javascript">
    $(document).on('scroll',function(){
      $('h2').css("left",Math.max(35 + 0.02*scrollY)+"%");
    })
   </script></div>
   <div class="fade-in3"><h3 id="temporary">FINAL</h3>
    <script type="text/javascript">
     $(document).on('scroll',function(){
       $('h3').css("left",Math.max(35 - 0.02*scrollY)+"%");
     })
    </script></div>
   <h5 id="hint" style="position: absolute; margin-top: 120vh; left: 45%; color: #ffffff73;">CLICK THE COLOURED BOXES TO COMPLETE THE PUZZLES</h5>
  </div>
 


  


// C Favicon
 
var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
  <div style="position: fixed; top: 16px; left:0%; width:100%; height:80px; z-index:100">
    link.rel = 'shortcut icon';
    <ul id="navbar" class="navbar_ul" style="margin:0px;list-style:none">
   link.href = 'https://2020.igem.org/wiki/images/7/74/T--AHUT-ZJU-China--logo%402x.png';
    <li class="logos"><a class="logo" style="padding:0px" href="https://2020.igem.org/Team:Athens">
    document.getElementsByTagName('head')[0].appendChild(link);
     <img src="https://2020.igem.org/wiki/images/9/97/T--Athens--transparent.png" width="170px">
         </a></li>
  
  
    <li class="project"><a href="#">Project</a>
      <div class="project_dropdown_content">
       
        <a href="/Team:Athens/Description">Description</a>  
   <a href="/Team:Athens/Implementation">Implementation</a>
   <a href="/Team:Athens/Contribution">Contribution</a>
   <a href="/Team:Athens/Engineering">Engineering Success</a>
      </div>
    </li>
  
  
    <li class="wet"><a href="#">Wet Lab</a>
      <div class="wet_dropdown_content">
       
              <a href="/Team:Athens/Design">Design</a>
  
              <a href="/Team:Athens/Biobricks">Biobricks</a>
              <a href="/Team:Athens/Safety">Safety</a>
  
      </div>
  
    </li>
  
  
    <li class="dry"><a href="#">Dry Lab</a>
      <div class="dry_dropdown_content">
              <a href="/Team:Athens/Background">Background</a>
              <a href="/Team:Athens/Timeline">Timeline</a>
              <a href="/Team:Athens/Model">Model</a>
      </div>
    </li>
  
    <li class="human"><a href="#">Human Practices</a>
      <div class="human_dropdown_content">
        <a href="/Team:Athens/Human_Practices">Human Practices</a>
         <a href="/Team:Athens/Partnership">Partnership</a>
              <a href="/Team:Athens/Education">Science Communication</a>
        <a href="/Team:Athens/Collaborations">Collaborations</a>
  
  
      </div>
    </li>
  
  
  
    <li class="team"><a href="#">People</a>
      <div class="team_dropdown_content">
   <a href="/Team:Athens/Team">Team</a>
              <a href="/Team:Athens/Attributions">Attributions</a>
   
             </div>          </li>
    
    <li class="judging"><a href="#">Judging</a>
     <div class="judging_dropdown_content">
       <a href="https://igem.org/2020_Judging_Form?id=3520">Form</a>


var isFPLoaded = false;
       
                 </div> 
   </li>
  
    <li class="achievements"><a href="#">Achievements</a>
     <div class="achievements_dropdown_content">
       <a href="/Team:Athens/Achievements">Medal Criteria</a>
       
                 </div> 
   </li>
    <li class="future"><a href="#">Future</a>
     <div class="future_dropdown_content">
       <a href="/Team:Athens/Future">Goals</a>
       
                 </div> 
   </li>
   </ul>
  
   </div>
   <script>
         function myScroll() {
         var scrolled = document.documentElement.scrollTop; // Firefox & IE
         var SCROLLED = document.body.scrollTop // Chrome, Safari & Opera
         var project = document.querySelector('.project');
         var project_dropdown = document.querySelector('.project_dropdown_content');
         var dry = document.querySelector('.dry');
var dry_dropdown = document.querySelector('.dry_dropdown_content');
var wet = document.querySelector('.wet');
var wet_dropdown = document.querySelector('.wet_dropdown_content');
         var human = document.querySelector('.human');
var human_dropdown = document.querySelector('.human_dropdown_content');
         var team = document.querySelector('.team');
var team_dropdown = document.querySelector('.team_dropdown_content');
         var judging = document.querySelector('.judging');
var judging_dropdown = document.querySelector('.judging_dropdown_content');
         var achievements = document.querySelector('.achievements');
var achievements_dropdown = document.querySelector('.achievements_dropdown_content');
         var future = document.querySelector('.future');
var future_dropdown = document.querySelector('.future_dropdown_content');
         var opac = (1.4-800/scrolled);
         var OPAC = (1.4-800/SCROLLED);
         project.style.backgroundColor = "rgba(0,0,0,"+opac+")";
         project.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";
         dry.style.backgroundColor = "rgba(0,0,0,"+opac+")";
         dry.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";
         wet.style.backgroundColor = "rgba(0,0,0,"+opac+")";
         wet.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";
         human.style.backgroundColor = "rgba(0,0,0,"+opac+")";
         human.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";
         team.style.backgroundColor = "rgba(0,0,0,"+opac+")";
         team.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";
         judging.style.backgroundColor = "rgba(0,0,0,"+opac+")";
         judging.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";
         achievements.style.backgroundColor = "rgba(0,0,0,"+opac+")";
         achievements.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";
         future.style.backgroundColor = "rgba(0,0,0,"+opac+")";
         future.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";
future_dropdown.style.backgroundColor = "rgba(0,0,0,"+opac+")";
         future_dropdown.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";
         achievements_dropdown.style.backgroundColor = "rgba(0,0,0,"+opac+")";
         achievements_dropdown.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";
judging_dropdown.style.backgroundColor = "rgba(0,0,0,"+opac+")";
         judging_dropdown.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";        
team_dropdown.style.backgroundColor = "rgba(0,0,0,"+opac+")";
         team_dropdown.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";
human_dropdown.style.backgroundColor = "rgba(0,0,0,"+opac+")";
         human_dropdown.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";
dry_dropdown.style.backgroundColor = "rgba(0,0,0,"+opac+")";
         dry_dropdown.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";
wet_dropdown.style.backgroundColor = "rgba(0,0,0,"+opac+")";
         wet_dropdown.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";
project_dropdown.style.backgroundColor = "rgba(0,0,0,"+opac+")";
         project_dropdown.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";
}
       document.addEventListener("scroll", myScroll);


       </script>


// 主页加载动画
  
var fvc = document.getElementById('video-preload-first');
 
fvc.addEventListener("canplay", function () {
   <div class="img-container">
   isFPLoaded = true;
   
   // 首屏视频预加载完成
    <img class="myimage1" src ="https://2020.igem.org/wiki/images/8/8e/T--Athens--incomplete1.png" />
   setTimeout(function() {
    <img class="myimage2" src ="https://2020.igem.org/wiki/images/8/82/T--Athens--incomplete2.png" />
    $('#first-screen-loading-cover').fadeOut(800);
    <img class="myimage3" src ="https://2020.igem.org/wiki/images/f/f3/T--Athens--incomplete3.png" />
    setTimeout(function(){
    <img class="myimage4" src ="https://2020.igem.org/wiki/images/1/1c/T--Athens--incomplete4.png"/>
    $('#first-screen-loading-cover').remove();
    <img class="myimage5" src ="https://2020.igem.org/wiki/images/0/0a/T--Athens--thebestlogo-purple.png"/>
    }, 801);
    <video class="myvideo5" autoplay loop muted>
  }, 1500);
     <source src="https://2020.igem.org/wiki/images/b/ba/T--Athens--logo2.mp4" type="video/mp4">
});
    </video>
// a timeout
   </div>
setTimeout(function(){
   <div id="button1"><button class="toggle" style="position: relative; left: -20%;" onclick="unfade1()"> </button></div>
if(!isFPLoaded){
  <div id="button2"><button class="toggle" style="position: relative; left: -20%;" onclick="unfade2()"> </button></div>
  isFPLoaded = true;
  <div id="button3"><button class="toggle" style="position: relative; left: -20%;" onclick="unfade3()"> </button></div>
  // 首屏视频预加载超时，直接显示
  <div id="button4"><button class="toggle" style="position: relative; left: -20%;" onclick="unfade4()"> </button></div>
  setTimeout(function() {
   <div id="button5"><button class="toggle" style="position: relative; left: -20%;" onclick="unfade5()"> </button></div>
   $('#first-screen-loading-cover').fadeOut(800);
   <div id="button6"><button class="toggle" style="position: relative; left: -20%;" onclick="unfade6()"> </button></div>
    setTimeout(function(){
   <script>
    $('#first-screen-loading-cover').remove();
   function unfade1() {
    }, 801);
    var op = 0.1;  // initial opacity
  }, 1500);
   var x = document.querySelector(".myimage1");
   x.style.display = 'block';
   var timer = setInterval(function () {
     if (op >= 1){
       clearInterval(timer);
     }
     x.style.opacity = op;
     x.style.filter = 'alpha(opacity=' + op * 100 + ")";
     op += op * 0.1;
   }, 10);
}
    </script>
   <script>
      function unfade2() {
   var op = 0.1;  // initial opacity
   var x = document.querySelector(".myimage2");
   x.style.display = 'block';
   var timer = setInterval(function () {
     if (op >= 1){
       clearInterval(timer);
     }
     x.style.opacity = op;
     x.style.filter = 'alpha(opacity=' + op * 100 + ")";
     op += op * 0.1;
    }, 10);
}
    </script>
    <script>
       function unfade3() {
   var op = 0.1; // initial opacity
   var x = document.querySelector(".myimage3");
   x.style.display = 'block';
   var timer = setInterval(function () {
     if (op >= 1){
       clearInterval(timer);
     }
     x.style.opacity = op;
     x.style.filter = 'alpha(opacity=' + op * 100 + ")";
     op += op * 0.1;
   }, 10);
}
     </script>
     <script>
        function unfade4() {
   var op = 0.1;  // initial opacity
   var x = document.querySelector(".myimage4");
   x.style.display = 'block';
   var timer = setInterval(function () {
     if (op >= 1){
       clearInterval(timer);
     }
     x.style.opacity = op;
     x.style.filter = 'alpha(opacity=' + op * 100 + ")";
     op += op * 0.1;
   }, 10);
}
      </script>
      <script>
         function unfade5() {
   var op = 0.1; // initial opacity
    var x = document.querySelector(".myimage5");
   x.style.display = 'block';
   var timer = setInterval(function () {
     if (op >= 1){
       clearInterval(timer);
     }
     x.style.opacity = op;
     x.style.filter = 'alpha(opacity=' + op * 100 + ")";
     op += op * 0.1;
   }, 10);
}
       </script>
       <script>
          function unfade6() {
   var op = 0.1;  // initial opacity
   var x = document.querySelector(".myvideo5");
    x.style.display = 'block';
   var timer = setInterval(function () {
     if (op >= 1){
       clearInterval(timer);
     }
     x.style.opacity = op;
     x.style.filter = 'alpha(opacity=' + op * 100 + ")";
     op += op * 0.1;
   }, 10);
}
}
}, 6500);
        </script>
    <!--PARALLAX FOR IMAGES AND TEXT-->
   
     <div class="video-container-parallax">
      <section class="test">
      <video class="video-parallax-left" id="mwv1" autoplay loop muted>
       <source src="https://2020.igem.org/wiki/images/9/9c/T--Athens--mwv1.mp4" type="video/mp4">
      </video>
      <video class="video-parallax-right" id="mwv2" autoplay loop muted>
       <source src="https://2020.igem.org/wiki/images/a/ac/T--Athens--mwv2.mp4" type="video/mp4">
      </video>
      <div class="parallax p2" id="sentence1" data-parallax="0.75">HAVE YOU EVER THOUGHT OF</div>
      <div class="parallax p3" id="sentence2" data-parallax="1.7">THE DARK SIDE OF</div>
    </section>
    </div>
    <div class="video-container-parallax" style="position:relative; margin-top:-50vh;">
     <section class="test">
     <video class="video-parallax-left" id="mwv3" autoplay loop muted>
      <source src="https://2020.igem.org/wiki/images/a/af/T--Athens--mwv3.mp4" type="video/mp4">
     </video>
     <video class="video-parallax-right" id="mwv4" autoplay loop muted>
      <source src="https://2020.igem.org/wiki/images/4/4f/T--Athens--mwv4.mp4" type="video/mp4">
     </video>
     <div class="parallax p2" id="sentence3" data-parallax="0.75">IT'S A SIDE OF HUMAN</div>
     <div class="parallax p1" style="left:10%;" id="sentence4" data-parallax="1.7">AND ENVIRONMENTAL</div>
   </section>
   </div>
  </div>
  <div class="video-container-parallax" style="position: relative; margin-top:-50vh;">
   <section class="test">
   <video class="video-parallax-left" id="mwv5" autoplay loop muted>
    <source src="https://2020.igem.org/wiki/images/2/2f/T--Athens--mwv5.mp4" type="video/mp4">
   </video>
   <video class="video-parallax-right" id="mwv6" autoplay loop muted>
    <source src="https://2020.igem.org/wiki/images/9/99/T--Athens--mwv6.mp4" type="video/mp4">
   </video>
   <div class="parallax p2" id="sentence5" data-parallax="0.75">WHERE THE THINGS WE DON'T SEE</div>
   <div class="parallax p1" id="sentence6" data-parallax="1.7">ARE THE ONES THAT</div>
</section>
</div>
<div class="video-container-parallax" style="position: relative; margin-top:-50vh;">
  <section class="test">
  <video class="video-parallax-left" id="mwv7" autoplay loop muted>
   <source src="https://2020.igem.org/wiki/images/4/46/T--Athens--mwv8.mp4" type="video/mp4">
  </video>
  <video class="video-parallax-right" id="mwv8" autoplay loop muted>
   <source src="https://2020.igem.org/wiki/images/1/1e/T--Athens--pnas2.mp4" type="video/mp4">
  </video>
  <div class="parallax p1" style="left: 12%;" id="sentence7" data-parallax="0.75">WHERE TOXICITY AND POLLUTION </div>
  <div class="parallax p2" style="left: 8%;" id="sentence8" data-parallax="1.9">ARE OVERSHADOWED BY LIGHT</div>
</section>
</div>
<div class="video-container-parallax" style="position: relative; margin-top:-50vh;">
  <section class="test">
  <video class="video-parallax-left" id="mwv9" autoplay loop muted>
   <source src="https://2020.igem.org/wiki/images/9/99/T--Athens--mwv10.mp4" type="video/mp4">
  </video>
  <video class="video-parallax-right" id="mwv10" autoplay loop muted>
   <source src="https://2020.igem.org/wiki/images/6/6b/T--Athens--domiko2.mp4" type="video/mp4">
  </video>
  <div class="parallax p1" style="left: 10%;" id="sentence9" data-parallax="0.75">BUT THE COLOUR WE NEED </div>
  <div class="parallax p1"  data-parallax="1.5" id="sentence10">GOES BEYOND THE COLOUR WE</div>
</section>
</div>
<div class="video-container-parallax" style="position: relative; margin-top:-50vh;">
  <section class="test">
  <video class="video-parallax-left" id="mwv11" autoplay loop muted>
   <source src="https://2020.igem.org/wiki/images/9/91/T--Athens--mwv11.mp4" type="video/mp4">
  </video>
  <video class="video-parallax-right" id="mwv12" autoplay loop muted>
   <source src="https://2020.igem.org/wiki/images/4/4c/T--Athens--domiko1.mp4" type="video/mp4">
  </video>
  <div class="parallax p2" id="sentence11" data-parallax="0.75">AND ITS FUTURE</div>
  <div class="parallax p3" id="sentence12" data-parallax="1.7">HAS TO BE</div>
</section>
</div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
<script>
  function parallax() { 
  var parallaxController = new ScrollMagic.Controller({globalSceneOptions: {triggerHook: "onEnter", duration: "200%"}});


  $('.parallax').each(function() {
   var trig = this.parentNode,
     parallax = this.getAttribute('data-parallax'),
     speed = parallax * 110 + '%';


</script>
   new ScrollMagic.Scene({triggerElement: trig})
     .setTween(this, {y: speed, ease: Linear.easeNone})
     .addTo(parallaxController);
  })
}
parallax();
</script>
<div class="slidein2 slide" id="slidein2">
  <div class="row">
    <div id="opacity">
      <h4><div><button id="word1" class="text-button" style=" margin-left: 20vh; margin-top:250vh;" onclick="unfade1() ">COLOUR</button></div></h4>
      <script>
       function unfade1() {
       var op = 0.1;  // initial opacity
       var x = document.querySelector(".myimage1");
       x.style.display = 'block';
       var timer = setInterval(function () {
         if (op >= 1){
           clearInterval(timer);
         }
         x.style.opacity = op;
         x.style.filter = 'alpha(opacity=' + op * 100 + ")";
         op += op * 0.1;
       }, 10);
     }
       </script>
    </div>
  </div>
</div>
<div class="slidein2 slide" id="slidein2">
  <div class="row">
    <div id="opacity2">
      <h5><div><button class="text-button" id="word2" style="background-color: rgba(40, 139, 252, 0.788); margin-left: 20vh; margin-top:250vh;" onclick="unfade2()">HARM</button></div></h5>
      <script>
       function unfade2() {
       var op = 0.1;  // initial opacity
       var x = document.querySelector(".myimage2");
       x.style.display = 'block';
       var timer = setInterval(function () {
         if (op >= 1){
           clearInterval(timer);
         }
         x.style.opacity = op;
         x.style.filter = 'alpha(opacity=' + op * 100 + ")";
         op += op * 0.1;
       }, 10);
     }
       </script>
    </div>
  </div>
</div>
<div class="slidein2 slide" id="slidein2">
  <div class="row">
    <div id="opacity3">
      <h6><div><button id="word3" class="text-button" style="background-color: rgba(179, 51, 238, 0.808); margin-left: 20vh; margin-top:250vh;" onclick="unfade3()">MATTER MOST</button></div></h6>
      <script>
       function unfade3() {
       var op = 0.1;  // initial opacity
       var x = document.querySelector(".myimage3");
       x.style.display = 'block';
       var timer = setInterval(function () {
         if (op >= 1){
           clearInterval(timer);
         }
         x.style.opacity = op;
         x.style.filter = 'alpha(opacity=' + op * 100 + ")";
         op += op * 0.1;
       }, 10);
     }
       </script>
    </div>
  </div>
</div>
<div class="slidein2 slide" id="slidein2">
  <div class="row">
    <div id="opacity4">
      <h6><div><button id="word4" class="text-button" style="background-color: rgba(30, 126, 11, 0.808); margin-top: +365vh; margin-left: 20vh;" onclick="unfade4()">SHADES</button></div></h6>
      <script>
       function unfade4() {
       var op = 0.1;  // initial opacity
       var x = document.querySelector(".myimage4");
       x.style.display = 'block';
       var timer = setInterval(function () {
         if (op >= 1){
           clearInterval(timer);
         }
         x.style.opacity = op;
         x.style.filter = 'alpha(opacity=' + op * 100 + ")";
         op += op * 0.1;
       }, 10);
     }
       </script>
    </div>
  </div>
</div>
<div class="slidein2 slide" id="slidein2">
  <div class="row">
    <div id="opacity5">
      <h6><div><button id="word5" class="text-button" style="background-color: rgba(49, 46, 216, 0.808); margin-top: +475vh; margin-left: 20vh;" onclick="unfade5()">KNOW</button></div></h6>
      <script>
       function unfade5() {
       var op = 0.1;  // initial opacity
       var x = document.querySelector(".myimage5");
       x.style.display = 'block';
       var timer = setInterval(function () {
         if (op >= 1){
           clearInterval(timer);
         }
         x.style.opacity = op;
         x.style.filter = 'alpha(opacity=' + op * 100 + ")";
         op += op * 0.1;
       }, 10);
     }
       </script>
    </div>
  </div>
</div>
<div class="slidein2 slide" id="slidein2">
  <div class="row">
    <div id="opacity6">
      <h6><div><button id="word6" class="text-button" style="background-color: rgba(30, 176, 243, 0.795); margin-top: +575vh; margin-left: 20vh;" onclick="unfade6()">RESHAPED</button></div></h6>
      <script>
       function unfade6() {
       var op = 0.1;  // initial opacity
       var x = document.querySelector(".myvideo5");
       x.style.display = 'block';
       var timer = setInterval(function () {
         if (op >= 1){
           clearInterval(timer);
         }
         x.style.opacity = op;
         x.style.filter = 'alpha(opacity=' + op * 100 + ")";
         op += op * 0.1;
       }, 10);
     }
       </script>
    </div>
  </div>
</div>


<div style="font-family: sans-serif;
font-size: 4vw;
font-weight: 200;
color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
position: relative;
margin-top: 30vh;
left: 15%;
width: 100%;
align-self: center;
line-height:2vw;
"><h4>COLOUR IS GIVING WAY TO NEW</h4></div>
<div class="video-container" style="position:relative;>
  <div class="slidein2 slide" id="slidein2">
   <div class="row">
    <div><video id="logo-chroma" style="width: 40%; height: auto; position: alsolute; opacity: 0; margin-left: 36% ; margin-top: 0vh;" autoplay loop muted>
  <source src="https://2020.igem.org/wiki/images/d/dd/T--Athens--animation_but_with_actual_circle.mp4" type="video/mp4">
</video>
<img class="morphae" style="position:absolute; top: 50%;left: 50%;margin-left:-162px;margin-top:-250px;"src="https://2020.igem.org/wiki/images/e/e7/T--Athens--justtext.png" />
<button id="morphae-button" class="text-button" onclick="unfade10()" style="color:transparent;height: 200px;width: 200px;background-color: transparent; position: absolute; left: 50%; top: 50%; margin-left:-00px;margin-top:-100px;">  </button>
</div>
</div>
</div>


<h5 id="hint2" style="position: absolute; margin-top: -77vh;margin-left:65vw;color: #ffffff80;">CLICK ON MORPHÆ BELOW TO ACTIVATE IT AND</h5>
<h4 id="hint3" style="position: absolute; margin-top: -75vh;margin-left:65vw;color: #ffffff;">SCROLL BACK UP</h4>
  <script>
   function unfade10() {
   var op = 0.1;
   var x = document.querySelector("#logo-chroma");
   var mwv1 = document.querySelector("#mwv1");
   var mwv2 = document.querySelector("#mwv2");
   var mwv3 = document.querySelector("#mwv3");
   var mwv4 = document.querySelector("#mwv4");
   var mwv5 = document.querySelector("#mwv5");
   var mwv6 = document.querySelector("#mwv6");
   var mwv7 = document.querySelector("#mwv7");
   var mwv8 = document.querySelector("#mwv8");
   var mwv9 = document.querySelector("#mwv9");
   var mwv10 = document.querySelector("#mwv10");
   var mwv11 = document.querySelector("#mwv11");
   var mwv12 = document.querySelector("#mwv12");
   var hint = document.querySelector("#hint");
   var hint2 = document.querySelector("#hint2");
   var hint3 = document.querySelector("#hint3");
   var this_word = document.querySelector('#this');
   var is = document.querySelector('#is');
   var temporary = document.querySelector('#temporary');
   var word1 = document.querySelector('#word1');
   var word2 = document.querySelector('#word2');
   var word3 = document.querySelector('#word3');
   var word4 = document.querySelector('#word4');
   var word5 = document.querySelector('#word5');
   var word6 = document.querySelector('#word6');
   var morphae_button = document.querySelector('#morphae-button');
   var sent1 = document.querySelector('#sentence1');
   var sent2 = document.querySelector('#sentence2');
   var sent3 = document.querySelector('#sentence3');
   var sent4 = document.querySelector('#sentence4');
   var sent5 = document.querySelector('#sentence5');
   var sent6 = document.querySelector('#sentence6');
   var sent7 = document.querySelector('#sentence7');
   var sent8 = document.querySelector('#sentence8');
   var sent9 = document.querySelector('#sentence9');
   var sent10 = document.querySelector('#sentence10');
   var sent11 = document.querySelector('#sentence11');
   var sent12 = document.querySelector('#sentence12');
   var intro = document.querySelector('#intro');
   word1.disabled = true;
   word2.disabled = true;
   word3.disabled = true;
   word4.disabled = true;
   word5.disabled = true;
   word6.disabled = true;
   morphae_button.disabled = true;
   x.style.display = 'block';
   mwv1.style.display = 'block';
   mwv2.style.display = 'block';
   mwv3.style.display = 'block';
   mwv4.style.display = 'block';
   mwv5.style.display = 'block';
   mwv6.style.display = 'block';
   mwv7.style.display = 'block';
   mwv8.style.display = 'block';
   mwv9.style.display = 'block';
   mwv10.style.display = 'block';
   mwv11.style.display = 'block';
   mwv12.style.display = 'block';
   hint.style.opacity = '0';
   hint2.style.opacity = '0';
   hint3.style.opacity = '0';
   intro.style.webkitFilter = "grayscale(0)";
   intro.style.filter = "grayscale(0)";
   sent11.innerHTML = "HAVE YOU HEARD OF";
   sent12.innerHTML = "STRUCTURAL";
   word6.innerHTML = "COLOUR";
   sent9.innerHTML = "IT'S A COLOUR";
   sent10.innerHTML = "BASED COMPLETELY ON";
   word5.innerHTML = "STRUCTURE";
   sent7.innerHTML = "WE USE FLAVOBACTERIA THAT";
   sent8.innerHTML = "PRESENT STRUCTURAL COLOUR";
   word4.innerHTML = "NATURALLY";
   sent5.innerHTML = "AND ENGINEER THEM";
   sent6.innerHTML = "TO BE TURNED INTO A";
   word3.innerHTML = "BIOMATERIAL";
   sent3.innerHTML = "THAT CAN REPLACE CHEMICAL DYES";
   sent4.innerHTML = "AND IS IN ITS ENTIRETY";
   word2.innerHTML = "SUSTAINABLE";
   sent1.innerHTML = "LET'S RE-IMAGINE COLOUR";
   sent2.innerHTML = "IT'S DO OR DYE";
   word1.innerHTML = " ";
   word1.style.backgroundColor = "transparent";
   this_word.innerHTML = "COLOUR";
   this_word.style.left = "-5vw";
   is.innerHTML = "FOR";
   is.style.left = "10vw";
   temporary.innerHTML = "CHANGE";
   var timer = setInterval(function () {
     if (op >= 1){
       clearInterval(timer);
     }
     x.style.opacity = op;
     x.style.filter = 'alpha(opacity=' + op * 100 + ")";
     mwv1.style.opacity = op;
     mwv1.style.filter = 'alpha(opacity' + op*100 + ")";
     mwv2.style.opacity = op;
     mwv2.style.filter = 'alpha(opacity' + op*100 + ")";
     mwv3.style.opacity = op;
     mwv3.style.filter = 'alpha(opacity' + op*100 + ")";
     mwv4.style.opacity = op;
     mwv4.style.filter = 'alpha(opacity' + op*100 + ")";
     mwv5.style.opacity = op;
     mwv5.style.filter = 'alpha(opacity' + op*100 + ")";
     mwv6.style.opacity = op;
     mwv6.style.filter = 'alpha(opacity' + op*100 + ")";
     mwv7.style.opacity = op;
     mwv7.style.filter = 'alpha(opacity' + op*100 + ")";
     mwv8.style.opacity = op;
     mwv8.style.filter = 'alpha(opacity' + op*100 + ")";
     mwv9.style.opacity = op;
     mwv9.style.filter = 'alpha(opacity' + op*100 + ")";
     mwv10.style.opacity = op;
     mwv10.style.filter = 'alpha(opacity' + op*100 + ")";
     mwv11.style.opacity = op;
     mwv11.style.filter = 'alpha(opacity' + op*100 + ")";
     mwv12.style.opacity = op;
     mwv12.style.filter = 'alpha(opacity' + op*100 + ")";
     op += op * 0.1;
   }, 10);
}
   </script>
</div>
<script>
  var controller = new ScrollMagic.Controller();
  // Fade in
var fadeInTimeline = new TimelineMax();
var fadeInFrom = TweenMax.from("#opacity", 1, {
   autoAlpha: 0
});
var fadeInTo = TweenMax.to("#opacity", 1, {
   autoAlpha: 1
});
fadeInTimeline
   .add(fadeInFrom)
   .add(fadeInTo);
new ScrollMagic.Scene({
     triggerElement: "#slidein2",
     offset: -5300,
   })
   .setTween(fadeInTimeline)
   .duration(400)
   //.reverse(false)
   //.addIndicators() // add indicators (requires plugin)
   .addTo(controller);
   var fadeInTimeline2 = new TimelineMax();
   var fadeInFrom2 = TweenMax.from("#opacity2", 1, {
     autoAlpha: 0
   });
   var fadeInTo2 = TweenMax.to("#opacity2", 1, {
     autoAlpha: 1
   });
   fadeInTimeline2
     .add(fadeInFrom2)
     .add(fadeInTo2);
  
   new ScrollMagic.Scene({
       triggerElement: "#slidein2",
       offset: -4200,
     })
     .setTween(fadeInTimeline2)
     .duration(400)
     //.reverse(false)
     //.addIndicators() // add indicators (requires plugin)
     .addTo(controller);
     var fadeInTimeline3 = new TimelineMax();
     var fadeInFrom3 = TweenMax.from("#opacity3", 1, {
       autoAlpha: 0
     });
     var fadeInTo3 = TweenMax.to("#opacity3", 1, {
       autoAlpha: 1
     });
     fadeInTimeline3
       .add(fadeInFrom3)
       .add(fadeInTo3);
    
     new ScrollMagic.Scene({
         triggerElement: "#slidein2",
         offset: -3100,
       })
       .setTween(fadeInTimeline3)
       .duration(400)
       //.reverse(false)
       //.addIndicators() // add indicators (requires plugin)
       .addTo(controller);
       var fadeInTimeline4 = new TimelineMax();
       var fadeInFrom4 = TweenMax.from("#opacity4", 1, {
         autoAlpha: 0
       });
       var fadeInTo4 = TweenMax.to("#opacity4", 1, {
         autoAlpha: 1
       });
       fadeInTimeline4
         .add(fadeInFrom4)
         .add(fadeInTo4);
      
       new ScrollMagic.Scene({
           triggerElement: "#slidein2",
           offset: -2300,
         })
         .setTween(fadeInTimeline4)
         .duration(400)
         //.reverse(false)
         //.addIndicators() // add indicators (requires plugin)
         .addTo(controller);
         var fadeInTimeline5 = new TimelineMax();
         var fadeInFrom5 = TweenMax.from("#opacity5", 1, {
           autoAlpha: 0
         });
         var fadeInTo5 = TweenMax.to("#opacity5", 1, {
           autoAlpha: 1
         });
         fadeInTimeline5
           .add(fadeInFrom5)
           .add(fadeInTo5);
        
         new ScrollMagic.Scene({
             triggerElement: "#slidein2",
             offset: -1350,
           })
           .setTween(fadeInTimeline5)
           .duration(400)
           //.reverse(false)
           //.addIndicators() // add indicators (requires plugin)
           .addTo(controller);
           var fadeInTimeline6 = new TimelineMax();
           var fadeInFrom6 = TweenMax.from("#opacity6", 1, {
             autoAlpha: 0
           });
           var fadeInTo6 = TweenMax.to("#opacity6", 1, {
             autoAlpha: 1
           });
           fadeInTimeline6
             .add(fadeInFrom6)
             .add(fadeInTo6);
          
           new ScrollMagic.Scene({
               triggerElement: "#slidein2",
               offset: -250,
             })
             .setTween(fadeInTimeline6)
             .duration(400)
             //.reverse(false)
             //.addIndicators() // add indicators (requires plugin)
             .addTo(controller);
             var fadeInTimeline7 = new TimelineMax();
             var fadeInFrom7 = TweenMax.from("#morphae", 1, {
               autoAlpha: 0
             });
             var fadeInTo7 = TweenMax.to("#morphae", 1, {
               autoAlpha: 1
             });
             fadeInTimeline7
               .add(fadeInFrom7)
               .add(fadeInTo7);
            
             new ScrollMagic.Scene({
                 triggerElement: "#slidein2",
                 offset: -300,
               })
               .setTween(fadeInTimeline7)
               .duration(400)
               //.reverse(false)
               //.addIndicators() // add indicators (requires plugin)
               .addTo(controller); 
</script>
<div class="scrolldown">
         <span></span>
         <span></span>
         <span></span>


       </div>
<div class="footer" style="position:absolute;">
     <div class="socialicons">
         <ul>
           <li class="f1"><a href="https://www.facebook.com/iGEM.Athens/" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
           <li class="t2"><a href="https://twitter.com/igemathens?lang=en" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
           <li class="i3"><a href="https://www.instagram.com/igemathens/" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
           <li class="g4"><a href="mailto:igemathens2020@gmail.com" target="_blank"><i class="fa fa-envelope" aria-hidden="true"></i></a></li>
           <li class="x5"><a href="https://github.com/iGEM-Athens-2020/iGEM_Athens_2020" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a></li>
         </ul>
           <h4 style="color:white;font-family:'Quicksand',sans-serif;position:absolute;margin-left:45%;"><i class="fa fa-envelope" aria-hidden="true"></i> igemathens2020@gmail.com</h4>
         </div>


    
       </div>
     </div>
</body>
</html>
</html>
{{Athens/Loader}}

2021年4月19日 (一) 21:43的版本

<html lang="en"> <head> 

   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
   <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
   <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
   
   <title>iGEM Athens 2020 Wiki</title>
   <style>


body{ 

   font-family: 'Quicksand', sans-serif;
   background-color: #000000;
   color: #D5D5D5;
   height: 100vh;
   width: 90vw;
   overflow-x: hidden;

} ol { text-align: left; 

 font-size: 140%;}

ul { text-align: left;} a:hover{ font-weight: bold; 

text-decoration: none;

} a{color: #D5D5D5;} .lightBack {color: #d5d5d5;}

.display-1 { font-size: 40px; 

         position: left;

}


  1. content {
width: 100%;
        min-height: 100vh;
        margin: 0;
        margin-top: -12vh;
        padding: 0;
        padding-top: 0px;

background-color:black;

}

  1. top_title {
display: inline;

}

  1. navbar {
display: inline;

}

.navbar_ul { 

list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;

}

.navbar_ul ul{ 

list-style-type: none;

}

.navbar_ul.transparent { background-color:transparent; } 

 .project,.wet,.dry,.human,.team,.judging,.achievements,.future{
  
  float: left;
  font-size: 7vh;
      justify-content: space-around;
      padding: 0px 0px 0px 1.5vh;
 
 }
 .logos{
  
   float: left;
   font-size: 7vh;
       justify-content: space-around;
       padding: 0px 0px 0px 2vh;
  
  }

 .project a,.wet a,.dry a,.human a,.team a,.judging a,.achievements a,.future a,.logos a, .project_dropdown_li a, .wet_dropdown_li a, .dry_dropdown_li a, .human_dropdown_li a, .team_dropdown_li a, .judging_dropdown_li a, .achievements_dropdown_li a, .future_dropdown_li a,.logos_dropdown_li a {
  display: block;
  color: #d5d5d5;
  font-family: "Quicksand", sans-serif;
  text-transform: uppercase;
  text-align: left;
  padding: 2vh 2vh;
  text-decoration: none;
  font-weight: 300;
  letter-spacing: 2px;
  font-size: 2vh;
 
 }

.logo img{
  background-color: transparent;
    width: 170px;
    height: auto;
    vertical-align: top;
    transition: transform 2s;
}



.img-container {
 position: fixed;
 z-index: 99 !important;
 top: 3%; /* required */
 left: 2%;
 width: 170px;
 height: auto;

} .myimage0 { /*text only always opaque*/ 

 width: 170px;
 height: auto;
 position: relative;
 margin-top:3vh;
 margin-left:0vh;
 opacity: 1;

} .myimage1 { 

   width: 170px;
   height: auto;
   position: absolute;
   opacity: 0;

} .myimage2 { 

 width: 170px;
 height: auto;
 position: absolute;
 opacity: 0;

} .myimage3 { 

 width: 170px;
 height: auto;
 position: absolute;
 opacity: 0;

} .myimage4 { 

 width: 170px;
 height: auto;
 position: absolute;
 opacity: 0;

} .myimage5 { 

 width: 170px;
 height: auto;
 position:absolute;
 opacity: 0;

} .myvideo5 { /*this is the complete one*/ 

 width: 170px;
 height: auto;
 position: absolute;
 opacity: 0;

} .logo:hover { 

 -ms-transform: scale(1.05); /* IE 9 */
 -webkit-transform: scale(1.05); /* Safari 3-8 */
 transform: scale(1.05);

} .myimage1:hover , .myimage2:hover, .myimage3:hover, .myimage4:hover,.myimage5:hover,.myvideo5:hover{ 

-ms-transform: scale(1.05); /* IE 9 */
-webkit-transform: scale(1.05); /* Safari 3-8 */
transform: scale(1.05);

} .myimage0:hover{ -ms-transform: scale(1.05); /* IE 9 */ -webkit-transform: scale(1.05); /* Safari 3-8 */ transform: scale(1.05);

} .toggle { 

 background-color: white;
 color: #3C3A3A;
 text-indent: 0px;
 position: relative;
 top: 150%;

}

.toggle:hover { 

background-color: #eec53f;

}


.project a:hover:not(.active),.wet a:hover:not(.active),.dry a:hover:not(.active),.human a:hover:not(.active),.team a:hover:not(.active),.judging a:hover:not(.active),.achievements a:hover:not(.active),.future a:hover:not(.active) { 

color: #ffffff;
font-weight: bold;

}

.project_dropdown_content,.wet_dropdown_content,.dry_dropdown_content,.human_dropdown_content,.team_dropdown_content,.judging_dropdown_content,.achievements_dropdown_content,.future_dropdown_content { 

display: none;
position: absolute;
z-index: 1;

}

.project_dropdown_content a:hover{ 

background-color: #ce34fdc9;
color: #ffffff;

} .wet_dropdown_content a:hover{ 

background-color: #3437fdc9;
color: #ffffff;

} .dry_dropdown_content a:hover{ 

background-color: #fd3434c9;
color: #ffffff;

} .human_dropdown_content a:hover{ 

background-color: #13ff32c9;
color: #ffffff;

} .team_dropdown_content a:hover{ 

background-color: #fdb734c9;
color: #ffffff;

} .judging_dropdown_content a:hover{ 

background-color: #fc4fc2c9;
color: #ffffff;

} .achievements_dropdown_content a:hover{ 

background-color: #34dffdc9;
color: #ffffff;

} .future_dropdown_content a:hover{ 

background-color: #fdfa34c9;
color: #ffffff;

}

.project_dropdown_content a,.wet_dropdown_content a,.dry_dropdown_content a,.human_dropdown_content a,.team_dropdown_content a,.judging_dropdown_content a,.achievements_dropdown_content a,.future_dropdown_content a{ 

color: white;
text-align: center;
padding: 18px 14px;
text-decoration: none;

}

.project:hover .project_dropdown_content { 

display: block;

} .wet:hover .wet_dropdown_content { 

 display: block;

} .dry:hover .dry_dropdown_content { 

 display: block;

} .human:hover .human_dropdown_content { 

 display: block;

} .team:hover .team_dropdown_content { 

 display: block;

} .judging:hover .judging_dropdown_content { 

 display: block;

} .achievements:hover .achievements_dropdown_content { 

 display: block;

} .future:hover .future_dropdown_content { 

 display: block;

}


/*________________________________First Animation________________________________*/ .clip-circle { 

   clip-path: circle(60px at center);
 }

.video-container { 

   position:relative;
 }


.myvideo { 

   width: 80%;
   height: auto;
   position: absolute;
   filter: grayscale(100%); 
   margin-left: 5%;
   margin-top: 5%;

} .myvideo-clipped{ 

   filter: grayscale(100%);
   width: 65%;
   height: auto;
   position: absolute; 
   margin-top: 11.8%;
   left:27.8%;
   clip-path:circle(34vh at 50% 50%);

} .video-container h1 { 

   margin:0;
   font-family: sans-serif;
   font-size: 7vw;
   font-weight: 200;
   color: transparent;
   -webkit-text-stroke: 1px white; 
   -webkit-text-fill-color: transparent;
   margin-top: 0%;
   left: 20%;
   position: absolute;
   padding:40vh;

} .video-container h2 { 

   margin:0;
   font-family: sans-serif;
   font-size: 7vw;
   font-weight: 200;
   color: transparent;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: white;
   margin-top: 7.5%;
   left: 35%;
   position: absolute;
   padding:40vh;

}

.video-container h3 { 

   margin:0;
   font-family: sans-serif;
   font-size: 7vw;
   font-weight: 200;
   color: transparent;
   margin-top: 15%;
   left: 35%;
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: white;
   position: absolute;
   padding:40vh;

}

.circle{ 

   position: absolute;
   display: block;
   /*margin: 100px auto;*/
   width: 75vh;
   height: 75vh;
   left:78vh;
   margin-top: 19.7vh;
   background: linear-gradient(#a1a1a1,#4b4a4b);    
   border-radius: 50%;
   animation: animate 2000ms linear infinite;

}

@keyframes animate{ 

   from{
       transform: rotate(0deg);
   }

   to{
       transform: rotate(360deg);
   }

}

.circle:after{ 

   content: ;
   position: fixed;
   top: 35px;
   right: 35px;
   bottom: 35px;
   left: 35px;
   border-radius: 50%;
   background-color: black;

}

.circle span{ 

   position: absolute;
   width: 100%;
   height: 100%;
   background: linear-gradient(#33ccff,#CB01FF); 
   border-radius: 50%;

}

.circle span:nth-child(1){ 

   filter: blur(5px);

}

.circle span:nth-child(2){ 

   filter: blur(10px);

}

.circle span:nth-child(3){ 

   filter: blur(20px);

}

.circle span:nth-child(4){ 

   filter: blur(55px);

}


.footer{ 

   width:80%; 
   height:200px; 
   border-top: 3px solid #3D3B3B  ;
   margin:auto;
   margin-top: 3%;
   left: 3%;

}

.footer ul{ 

   margin:0%  50%;
   text-align:right;
   display:flex;
   position:absolute;
   transform: translate(-40%, -50%);
   color: white;
   margin-left: 3%;

} .footer ul li{ 

   list-style: none;
   position:relative;
   margin-left: 17%;

} .footer h4{ 


   text-align: center;
   background-color:none;
   position: absolute;
   margin: 120px 0 0 36%;
   font-size: 12px;

}

.footer ul li a{ 

   text-align: center;
   line-height: 70px;
   font-size:30px;
   margin:0 10px;
   display:block;
   position: relative;
   z-index: 1;

}

.footer ul li a .fa{ 

   position: relative;
   color: white;
   transition: 0.5s;

}

.f1 a:hover .fa{ 

   color: #3b5998;
   transform: rotateY(360deg);

}

.f1 a:before{ 

   content:;
   position: absolute;
   top:100%;
   left:0;
   background: #3b5998;
   transition:0.5s;
   z-index: 2;

}


.f1 a:before{ 

   content:;
   position: absolute;
   top:100%;
   left:0;
   background: #3b5998;
   transition:0.5s;
   z-index: 2;

} .t2 a:hover .fa{ 

   color:  #55acee;
   transform: rotateY(360deg);

}

.t2 a:before{ 

   content:;
   position: absolute;
   top:100%;
   left:0;
   background:  #55acee;
   transition:0.5s;
   z-index: 2;

} .i3 a:hover .fa{ 

   color: #C32AA3;
   transform: rotateY(360deg);

}

.i3 a:before{ 

   content:;
   position: absolute;
   top:100%;
   left:0;
   background: #C32AA3;
   transition:0.5s;
   z-index: 2;

} .g4 a:hover .fa{ 

   color: #dd4b39;
   transform: rotateY(360deg);

}

.g4 a:before{ 

   content:;
   position: absolute;
   top:100%;
   left:0;
   background: #dd4b39;
   transition:0.5s;
   z-index: 2;

}

.x5 a:hover .fa{ 

   color: #9ACD99;
   transform: rotateY(360deg);

}

.x5 a:before{ 

   content:;
   position: absolute;
   top:100%;
   left:0;
   background: lightgoldenrodyellow;
   transition:0.5s;
   z-index: 2;

} @keyframes slide{ 

   0%{
       background-position-x: 0%;

   }
   100%{
       background-position-x: 600vw;

   }

}

/*-----------------------COLOUR FOR CHANGE ANIMATION-----------*/ .fade-in1 { 

   animation: fadeIn1 ease 2s;
   -webkit-animation: fadeIn1 ease 2s;
   -moz-animation: fadeIn1 ease 2s;
   -o-animation: fadeIn1 ease 2s;
   -ms-animation: fadeIn1 ease 2s;
 }
 @keyframes fadeIn1 {
   0% {
     opacity:0;
   }
   100% {
     opacity:1;
   }
 }
 
 @-moz-keyframes fadeIn1 {
   0% {
     opacity:0;
   }
   100% {
     opacity:1;
   }
 }
 
 @-webkit-keyframes fadeIn1 {
   0% {
     opacity:0;
   }
   100% {
     opacity:1;
   }
 }
 
 @-o-keyframes fadeIn1 {
   0% {
     opacity:0;
   }
   100% {
     opacity:1;
   }
 }
 
 @-ms-keyframes fadeIn1 {
   0% {
     opacity:0;
   }
   100% {
     opacity:1;
 }

} 

 .fade-in2 {
   animation: fadeIn2 ease 4s;
   -webkit-animation: fadeIn2 ease 4s;
   -moz-animation: fadeIn2 ease 4s;
   -o-animation: fadeIn2 ease 4s;
   -ms-animation: fadeIn2 ease 4s;
 }
 @keyframes fadeIn2 {
   0% {
     opacity:0;
   }
   100% {
     opacity:1;
   }
 }
 
 @-moz-keyframes fadeIn2 {
   0% {
     opacity:0;
   }
   100% {
     opacity:1;
   }
 }
 
 @-webkit-keyframes fadeIn2 {
   0% {
     opacity:0;
   }
   100% {
     opacity:1;
   }
 }
 
 @-o-keyframes fadeIn2 {
   0% {
     opacity:0;
   }
   100% {
     opacity:1;
   }
 }
 
 @-ms-keyframes fadeIn2 {
   0% {
     opacity:0;
   }
   100% {
     opacity:1;
 }

} .fade-in3 { 

   animation: fadeIn3 ease 6s;
   -webkit-animation: fadeIn3 ease 6s;
   -moz-animation: fadeIn3 ease 6s;
   -o-animation: fadeIn3 ease 6s;
   -ms-animation: fadeIn3 ease 6s;
 }
 @keyframes fadeIn3 {
   0% {
     opacity:0;
   }
   100% {
     opacity:1;
   }
 }
 
 @-moz-keyframes fadeIn3 {
   0% {
     opacity:0;
   }
   100% {
     opacity:1;
   }
 }
 
 @-webkit-keyframes fadeIn3 {
   0% {
     opacity:0;
   }
   100% {
     opacity:1;
   }
 }
 
 @-o-keyframes fadeIn3 {
   0% {
     opacity:0;
   }
   100% {
     opacity:1;
   }
 }
 
 @-ms-keyframes fadeIn3 {
   0% {
     opacity:0;
   }
   100% {
     opacity:1;
 }}
 /*------------------text with button words--------------*/
 .main-header{
   font-family: "Quicksand",sans-serif;
   position: relative;
   top: 50%;
   height: 40vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 2rem;

}

.main-header h4 { 

   font-size: 4rem;
   margin-bottom: 2rem;
   line-height: 1.2;
   color: white;

}

.main-header h4 span { 

   color: #CB01FF;

}

.main-header p{ 

   font-size: 2rem;
   color:white;

}

.item { 

 width: 200px;
 height: 200px;
 margin: 50px auto;
 padding-top: 75px;
 text-align: center;
 color: #FFF;
 font-size: 3em;

}

.test { 

 height: 50vh;
 margin-top: 120vh;
 display: flex;
 flex-direction: row;

} .test2 { 

 height: 50vh;
 margin-top: -500vh;
 display: flex;
 flex-direction: row;

}

.parallax { 

 width: 50%;
 height: 50%;
 color: #d5d5d5;
 font-size: 4vh;
 text-align: center;
 font-family: 'Quicksand',sans-serif;
 display: flex;
 flex-direction: row;
 justify-content: center;
 align-items: center;

}

.p1 { /*less indented*/ 

 position: relative;
 left: 5%;
 background-color:transparent;

}

.p2 { /* more indented*/ 

 background-color: transparent;
 position: relative;
 left: 15%;

} .p3 { /* not indented*/ 

 background-color: transparent;

}

.slidein2 { 

 font-family: "Quicksand",sans-serif;
 display: flex;
 justify-content: center;
 align-items: center;
 height: 10vh;
 color: #f0eeee;
 text-align: center;
 background:transparent;
 z-index:50 !important;

}

.slidein2 .row { 

 position: absolute;
 justify-content: space-around;

} .slidein2 h4{ 

   font-size: 2.5vh;
   margin-top: -860vh;
   /*margin-bottom: 2rem;*/
   line-height: 1.2;
   color: #d5d5d5;

} .slidein2 h5{ 

 font-size: 2.5vh;
 margin-top: -750vh;
 /*margin-bottom: 2rem;*/
 line-height: 1.2;
 color: #d5d5d5;

} .slidein2 h6{ 

 font-size: 2.5vh;
 margin-top: -640vh;
 /*margin-bottom: 2rem;*/
 line-height: 1.2;
 color: #d5d5d5;

}



.text-button { 

 color: #f0eeee;
 font-family: "Quicksand",sans-serif;
 font-size: 2rem;
 background-color: rgba(168, 39, 168, 0.87);
 background-repeat:no-repeat;
 border: none;
 cursor:pointer;
 overflow: hidden;
 outline:none;
 display: block;

} .text-button:hover{ 

 -ms-transform: scale(1.05); /* IE 9 */
 -webkit-transform: scale(1.05); /* Safari 3-8 */
 transform: scale(1.05); 
 
 }

 .video-container-parallax{
   position: relative;
 
 }
 .video-parallax-left{
   width: 60%;
   height: auto;
   position: absolute;
   left: 15%;
   opacity: 0;
   }
 .video-parallax-right{
   width: 57%;
   height: auto;
   position: absolute;
   margin-top: 12%;
   left: 50%;
   opacity: 0;
 }
 .morphae { /*this is the complete one*/
   width: 500px;
   height: auto;
   position: absolute;
   opacity: 1;
 }

 hr {
   display: block;
   height: 1px;
   border: 0;
   border-top: 1px solid #d5d5d5;
   margin: 1em 0;
   padding: 0;

}

/* i have to fix the videos on ezgif and maybe compress them cause theyre too big*/ .loader-wrapper { 

 width: 100%;
 height: 100%;
 position: fixed;
 z-index: 100 !important;
 top: 0;
 left: 0;
 background-color: #000000;
 display:flex;
 justify-content: center;
 align-items: center;

} .loader { 

 display: inline-block;
 width: 30px;
 height: 30px;
 position: relative;
 top:0%;
 left:0%;
 border: 4px solid #Fff;
 animation: loader 2s infinite ease;

} .loader-wrapper h1{ 

position:fixed;
top:10%;
left:5%;
color:white;
font-size:4vh;
font-family:"Quicksand",sans-serif;
opacity:0;

} .loader-inner { 

 vertical-align: top;
 display: inline-block;
 width: 100%;
 background-color: #fff;
 animation: loader-inner 2s infinite ease-in;

} @keyframes loader { 

 0% { transform: rotate(0deg);}
 25% { transform: rotate(180deg);}
 50% { transform: rotate(180deg);}
 75% { transform: rotate(360deg);}
 100% { transform: rotate(360deg);}

} @keyframes loader-inner { 

 0% { height: 0%;}
 25% { height: 0%;}
 50% { height: 100%;}
 75% { height: 100%;}
 100% { height: 0%;}

} .scrolldown{ 

   position: relative;
   left: 56.5%;
   margin-top: 13%;
   width: 40px;
   height: 40px;
   transform: translateY(-80px) translateX(-50%) rotate(45deg);

} .scrolldown span{ 

   position: absolute;
   top:0px;
   left: 0;
   display:block;
   width:100%;
   height:100%;
   border-top: 2px solid white;
   border-left: 2px solid white;
   animation: animate 1.5s linear infinite;
   opacity: 0;

}

.scrolldown span:nth-child(1){ 

   transform: translate(-15px,-15px);
   animation-delay: 0s;

} .scrolldown span:nth-child(2){ 

   transform: translate(0,0);
   animation-delay: -0.2s;

} .scrolldown span:nth-child(3){ 

   transform: translate(15px,15px);
   animation-delay: -0.4s;

}

@keyframes animate { 

   0%{
       top:5px;
       left:5px;
       opacity: 0;
   }
   25%{
       top: 0;
       left: 0;
       opacity: 1;
   }
   100%{
       top:-5px;
       left:-5px;
       opacity: 0;
   }

} .footer{ 

   width:80%; 
   height:200px; 
   border-top: 3px solid #3D3B3B  ;
   margin:auto;
   margin-top: 3%;
   margin-left: 12%;

}

.footer ul{ 

   margin:4%  39%;
   text-align:right;
   display:flex;
   position:absolute;
   transform: translate(-50%, -50%);
   color: white;

} .footer ul li{ 

   list-style: none;
   margin-right: 10%;

} .footer h4{ 


   text-align: center;
   background-color:none;
   position: absolute;
   margin: 120px 0 0 36%;
   font-size: 12px;

}

.footer ul li a{ 

   text-align: center;
   line-height: 70px;
   font-size:30px;
   margin:0 10px;
   display:block;
   position: relative;
   z-index: 1;

}

.footer ul li a .fa{ 

   position: relative;
   color: white;
   transition: 0.5s;

}

.f1 a:hover .fa{ 

   color: #3b5998;
   transform: rotateY(360deg);

}

.f1 a:before{ 

   content:;
   position: absolute;
   top:100%;
   left:0;
   background: #3b5998;
   transition:0.5s;
   z-index: 2;

}


.f1 a:before{ 

   content:;
   position: absolute;
   top:100%;
   left:0;
   background: #3b5998;
   transition:0.5s;
   z-index: 2;

} .t2 a:hover .fa{ 

   color:  #55acee;
   transform: rotateY(360deg);

}

.t2 a:before{ 

   content:;
   position: absolute;
   top:100%;
   left:0;
   background:  #55acee;
   transition:0.5s;
   z-index: 2;

} .i3 a:hover .fa{ 

   color: #C32AA3;
   transform: rotateY(360deg);

}

.i3 a:before{ 

   content:;
   position: absolute;
   top:100%;
   left:0;
   background: #C32AA3;
   transition:0.5s;
   z-index: 2;

} .g4 a:hover .fa{ 

   color: #dd4b39;
   transform: rotateY(360deg);

}

.g4 a:before{ 

   content:;
   position: absolute;
   top:100%;
   left:0;
   background: #dd4b39;
   transition:0.5s;
   z-index: 2;

}

.x5 a:hover .fa{ 

   color: #9ACD99;
   transform: rotateY(360deg);

}

.x5 a:before{ 

   content:;
   position: absolute;
   top:100%;
   left:0;
   background: lightgoldenrodyellow;
   transition:0.5s;
   z-index: 2;

} 

   </style>

</head> <body> 

   <video class="myvideo" id="intro" autoplay loop muted>
     <source src="https://2020.igem.org/wiki/images/4/45/T--Athens--intro.mp4" type="video/mp4">
   </video>

THIS

   <script type="text/javascript">
     
     $(document).on('scroll',function(){
         $('h1').css("left",Math.max(20 - 0.02*scrollY)+"%");
     })
</script>

ISN'T

   <script type="text/javascript"> 
     $(document).on('scroll',function(){
         $('h2').css("left",Math.max(35 + 0.02*scrollY)+"%");
     })
</script>

FINAL

     <script type="text/javascript">
       $(document).on('scroll',function(){
           $('h3').css("left",Math.max(35 - 0.02*scrollY)+"%");
       })
</script>
CLICK THE COLOURED BOXES TO COMPLETE THE PUZZLES



   <script>
               function myScroll() {
               var scrolled = document.documentElement.scrollTop; // Firefox & IE
               var SCROLLED = document.body.scrollTop // Chrome, Safari & Opera
               var project = document.querySelector('.project');
               var project_dropdown = document.querySelector('.project_dropdown_content');
               var dry = document.querySelector('.dry');

var dry_dropdown = document.querySelector('.dry_dropdown_content'); var wet = document.querySelector('.wet'); var wet_dropdown = document.querySelector('.wet_dropdown_content'); 

               var human = document.querySelector('.human');

var human_dropdown = document.querySelector('.human_dropdown_content'); 

               var team = document.querySelector('.team');

var team_dropdown = document.querySelector('.team_dropdown_content'); 

               var judging = document.querySelector('.judging');

var judging_dropdown = document.querySelector('.judging_dropdown_content'); 

               var achievements = document.querySelector('.achievements');

var achievements_dropdown = document.querySelector('.achievements_dropdown_content'); 

               var future = document.querySelector('.future');

var future_dropdown = document.querySelector('.future_dropdown_content'); 

               var opac = (1.4-800/scrolled);
               var OPAC = (1.4-800/SCROLLED);
               project.style.backgroundColor = "rgba(0,0,0,"+opac+")";
               project.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";
               dry.style.backgroundColor = "rgba(0,0,0,"+opac+")";
               dry.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";
               wet.style.backgroundColor = "rgba(0,0,0,"+opac+")";
               wet.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";
               human.style.backgroundColor = "rgba(0,0,0,"+opac+")";
               human.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";
               team.style.backgroundColor = "rgba(0,0,0,"+opac+")";
               team.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";
               judging.style.backgroundColor = "rgba(0,0,0,"+opac+")";
               judging.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";
               achievements.style.backgroundColor = "rgba(0,0,0,"+opac+")";
               achievements.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";
               future.style.backgroundColor = "rgba(0,0,0,"+opac+")";
               future.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";

future_dropdown.style.backgroundColor = "rgba(0,0,0,"+opac+")"; 

               future_dropdown.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";
               achievements_dropdown.style.backgroundColor = "rgba(0,0,0,"+opac+")";
               achievements_dropdown.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";

judging_dropdown.style.backgroundColor = "rgba(0,0,0,"+opac+")"; 

               judging_dropdown.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";

team_dropdown.style.backgroundColor = "rgba(0,0,0,"+opac+")"; 

               team_dropdown.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";

human_dropdown.style.backgroundColor = "rgba(0,0,0,"+opac+")"; 

               human_dropdown.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";

dry_dropdown.style.backgroundColor = "rgba(0,0,0,"+opac+")"; 

               dry_dropdown.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";

wet_dropdown.style.backgroundColor = "rgba(0,0,0,"+opac+")"; 

               wet_dropdown.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";

project_dropdown.style.backgroundColor = "rgba(0,0,0,"+opac+")"; 

               project_dropdown.style.backgroundColor = "rgba(0,0,0,"+OPAC+")";

} 

           document.addEventListener("scroll", myScroll);

           </script>



     <img class="myimage1" src ="https://2020.igem.org/wiki/images/8/8e/T--Athens--incomplete1.png" />
     <img class="myimage2" src ="https://2020.igem.org/wiki/images/8/82/T--Athens--incomplete2.png" />
     <img class="myimage3" src ="https://2020.igem.org/wiki/images/f/f3/T--Athens--incomplete3.png" />
     <img class="myimage4" src ="https://2020.igem.org/wiki/images/1/1c/T--Athens--incomplete4.png"/>
     <img class="myimage5" src ="https://2020.igem.org/wiki/images/0/0a/T--Athens--thebestlogo-purple.png"/>
     <video class="myvideo5" autoplay loop muted>
       <source src="https://2020.igem.org/wiki/images/b/ba/T--Athens--logo2.mp4" type="video/mp4">
     </video>
<button class="toggle" style="position: relative; left: -20%;" onclick="unfade1()"> </button>
<button class="toggle" style="position: relative; left: -20%;" onclick="unfade2()"> </button>
<button class="toggle" style="position: relative; left: -20%;" onclick="unfade3()"> </button>
<button class="toggle" style="position: relative; left: -20%;" onclick="unfade4()"> </button>
<button class="toggle" style="position: relative; left: -20%;" onclick="unfade5()"> </button>
<button class="toggle" style="position: relative; left: -20%;" onclick="unfade6()"> </button>
 <script>
   function unfade1() {
   var op = 0.1;  // initial opacity
   var x = document.querySelector(".myimage1");
   x.style.display = 'block';
   var timer = setInterval(function () {
       if (op >= 1){
           clearInterval(timer);
       }
       x.style.opacity = op;
       x.style.filter = 'alpha(opacity=' + op * 100 + ")";
       op += op * 0.1;
   }, 10);

} 

   </script>
    <script>
         function unfade2() {
   var op = 0.1;  // initial opacity
   var x = document.querySelector(".myimage2");
   x.style.display = 'block';
   var timer = setInterval(function () {
       if (op >= 1){
           clearInterval(timer);
       }
       x.style.opacity = op;
       x.style.filter = 'alpha(opacity=' + op * 100 + ")";
       op += op * 0.1;
   }, 10);

} 

     </script>
      <script>
           function unfade3() {
   var op = 0.1;  // initial opacity
   var x = document.querySelector(".myimage3");
   x.style.display = 'block';
   var timer = setInterval(function () {
       if (op >= 1){
           clearInterval(timer);
       }
       x.style.opacity = op;
       x.style.filter = 'alpha(opacity=' + op * 100 + ")";
       op += op * 0.1;
   }, 10);

} 

       </script>
        <script>
             function unfade4() {
   var op = 0.1;  // initial opacity
   var x = document.querySelector(".myimage4");
   x.style.display = 'block';
   var timer = setInterval(function () {
       if (op >= 1){
           clearInterval(timer);
       }
       x.style.opacity = op;
       x.style.filter = 'alpha(opacity=' + op * 100 + ")";
       op += op * 0.1;
   }, 10);

} 

         </script>
          <script>
               function unfade5() {
   var op = 0.1;  // initial opacity
   var x = document.querySelector(".myimage5");
   x.style.display = 'block';
   var timer = setInterval(function () {
       if (op >= 1){
           clearInterval(timer);
       }
       x.style.opacity = op;
       x.style.filter = 'alpha(opacity=' + op * 100 + ")";
       op += op * 0.1;
   }, 10);

} 

           </script>
           <script>
                 function unfade6() {
   var op = 0.1;  // initial opacity
   var x = document.querySelector(".myvideo5");
   x.style.display = 'block';
   var timer = setInterval(function () {
       if (op >= 1){
           clearInterval(timer);
       }
       x.style.opacity = op;
       x.style.filter = 'alpha(opacity=' + op * 100 + ")";
       op += op * 0.1;
   }, 10);

} 

             </script>
     

         <section class="test">
         <video class="video-parallax-left" id="mwv1" autoplay loop muted>
           <source src="https://2020.igem.org/wiki/images/9/9c/T--Athens--mwv1.mp4" type="video/mp4">
         </video>
         <video class="video-parallax-right" id="mwv2" autoplay loop muted>
           <source src="https://2020.igem.org/wiki/images/a/ac/T--Athens--mwv2.mp4" type="video/mp4">
         </video>
HAVE YOU EVER THOUGHT OF
THE DARK SIDE OF
     </section>

       <section class="test">
       <video class="video-parallax-left" id="mwv3" autoplay loop muted>
         <source src="https://2020.igem.org/wiki/images/a/af/T--Athens--mwv3.mp4" type="video/mp4">
       </video>
       <video class="video-parallax-right" id="mwv4" autoplay loop muted>
         <source src="https://2020.igem.org/wiki/images/4/4f/T--Athens--mwv4.mp4" type="video/mp4">
       </video>
IT'S A SIDE OF HUMAN
AND ENVIRONMENTAL
   </section>

   <section class="test">
   <video class="video-parallax-left" id="mwv5" autoplay loop muted>
     <source src="https://2020.igem.org/wiki/images/2/2f/T--Athens--mwv5.mp4" type="video/mp4">
   </video>
   <video class="video-parallax-right" id="mwv6" autoplay loop muted>
     <source src="https://2020.igem.org/wiki/images/9/99/T--Athens--mwv6.mp4" type="video/mp4">
   </video>
WHERE THE THINGS WE DON'T SEE
ARE THE ONES THAT

</section> 

 <section class="test">
 <video class="video-parallax-left" id="mwv7" autoplay loop muted>
   <source src="https://2020.igem.org/wiki/images/4/46/T--Athens--mwv8.mp4" type="video/mp4">
 </video>
 <video class="video-parallax-right" id="mwv8" autoplay loop muted>
   <source src="https://2020.igem.org/wiki/images/1/1e/T--Athens--pnas2.mp4" type="video/mp4">
 </video>
WHERE TOXICITY AND POLLUTION
ARE OVERSHADOWED BY LIGHT

</section> 

 <section class="test">
 <video class="video-parallax-left" id="mwv9" autoplay loop muted>
   <source src="https://2020.igem.org/wiki/images/9/99/T--Athens--mwv10.mp4" type="video/mp4">
 </video>
 <video class="video-parallax-right" id="mwv10" autoplay loop muted>
   <source src="https://2020.igem.org/wiki/images/6/6b/T--Athens--domiko2.mp4" type="video/mp4">
 </video>
BUT THE COLOUR WE NEED
GOES BEYOND THE COLOUR WE

</section> 

 <section class="test">
 <video class="video-parallax-left" id="mwv11" autoplay loop muted>
   <source src="https://2020.igem.org/wiki/images/9/91/T--Athens--mwv11.mp4" type="video/mp4">
 </video>
 <video class="video-parallax-right" id="mwv12" autoplay loop muted>
   <source src="https://2020.igem.org/wiki/images/4/4c/T--Athens--domiko1.mp4" type="video/mp4">
 </video>
AND ITS FUTURE
HAS TO BE

</section> 

     <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script> <script> 

 function parallax() {  
 var parallaxController = new ScrollMagic.Controller({globalSceneOptions: {triggerHook: "onEnter", duration: "200%"}});

 $('.parallax').each(function() {
   var trig = this.parentNode,
       parallax = this.getAttribute('data-parallax'),
       speed = parallax * 110 + '%';

   new ScrollMagic.Scene({triggerElement: trig})
       .setTween(this, {y: speed, ease: Linear.easeNone})
       .addTo(parallaxController);
 })

} parallax(); </script>

<button id="word1" class="text-button" style=" margin-left: 20vh; margin-top:250vh;" onclick="unfade1() ">COLOUR</button>

         <script>
           function unfade1() {
           var op = 0.1;  // initial opacity
           var x = document.querySelector(".myimage1");
           x.style.display = 'block';
           var timer = setInterval(function () {
               if (op >= 1){
                   clearInterval(timer);
               }
               x.style.opacity = op;
               x.style.filter = 'alpha(opacity=' + op * 100 + ")";
               op += op * 0.1;
           }, 10);
       }
           </script>
<button class="text-button" id="word2" style="background-color: rgba(40, 139, 252, 0.788); margin-left: 20vh; margin-top:250vh;" onclick="unfade2()">HARM</button>
         <script>
           function unfade2() {
           var op = 0.1;  // initial opacity
           var x = document.querySelector(".myimage2");
           x.style.display = 'block';
           var timer = setInterval(function () {
               if (op >= 1){
                   clearInterval(timer);
               }
               x.style.opacity = op;
               x.style.filter = 'alpha(opacity=' + op * 100 + ")";
               op += op * 0.1;
           }, 10);
       }
           </script>
<button id="word3" class="text-button" style="background-color: rgba(179, 51, 238, 0.808); margin-left: 20vh; margin-top:250vh;" onclick="unfade3()">MATTER MOST</button>
         <script>
           function unfade3() {
           var op = 0.1;  // initial opacity
           var x = document.querySelector(".myimage3");
           x.style.display = 'block';
           var timer = setInterval(function () {
               if (op >= 1){
                   clearInterval(timer);
               }
               x.style.opacity = op;
               x.style.filter = 'alpha(opacity=' + op * 100 + ")";
               op += op * 0.1;
           }, 10);
       }
           </script>
<button id="word4" class="text-button" style="background-color: rgba(30, 126, 11, 0.808); margin-top: +365vh; margin-left: 20vh;" onclick="unfade4()">SHADES</button>
         <script>
           function unfade4() {
           var op = 0.1;  // initial opacity
           var x = document.querySelector(".myimage4");
           x.style.display = 'block';
           var timer = setInterval(function () {
               if (op >= 1){
                   clearInterval(timer);
               }
               x.style.opacity = op;
               x.style.filter = 'alpha(opacity=' + op * 100 + ")";
               op += op * 0.1;
           }, 10);
       }
           </script>
<button id="word5" class="text-button" style="background-color: rgba(49, 46, 216, 0.808); margin-top: +475vh; margin-left: 20vh;" onclick="unfade5()">KNOW</button>
         <script>
           function unfade5() {
           var op = 0.1;  // initial opacity
           var x = document.querySelector(".myimage5");
           x.style.display = 'block';
           var timer = setInterval(function () {
               if (op >= 1){
                   clearInterval(timer);
               }
               x.style.opacity = op;
               x.style.filter = 'alpha(opacity=' + op * 100 + ")";
               op += op * 0.1;
           }, 10);
       }
           </script>
<button id="word6" class="text-button" style="background-color: rgba(30, 176, 243, 0.795); margin-top: +575vh; margin-left: 20vh;" onclick="unfade6()">RESHAPED</button>
         <script>
           function unfade6() {
           var op = 0.1;  // initial opacity
           var x = document.querySelector(".myvideo5");
           x.style.display = 'block';
           var timer = setInterval(function () {
               if (op >= 1){
                   clearInterval(timer);
               }
               x.style.opacity = op;
               x.style.filter = 'alpha(opacity=' + op * 100 + ")";
               op += op * 0.1;
           }, 10);
       }
           </script>

COLOUR IS GIVING WAY TO NEW

<video id="logo-chroma" style="width: 40%; height: auto; position: alsolute; opacity: 0; margin-left: 36% ; margin-top: 0vh;" autoplay loop muted> 
 <source src="https://2020.igem.org/wiki/images/d/dd/T--Athens--animation_but_with_actual_circle.mp4" type="video/mp4">

</video> <img class="morphae" style="position:absolute; top: 50%;left: 50%;margin-left:-162px;margin-top:-250px;"src="https://2020.igem.org/wiki/images/e/e7/T--Athens--justtext.png" /> <button id="morphae-button" class="text-button" onclick="unfade10()" style="color:transparent;height: 200px;width: 200px;background-color: transparent; position: absolute; left: 50%; top: 50%; margin-left:-00px;margin-top:-100px;"> </button>

CLICK ON MORPHÆ BELOW TO ACTIVATE IT AND

SCROLL BACK UP

 <script>
   function unfade10() {
   var op = 0.1;
   var x = document.querySelector("#logo-chroma");
   var mwv1 = document.querySelector("#mwv1");
   var mwv2 = document.querySelector("#mwv2");
   var mwv3 = document.querySelector("#mwv3");
   var mwv4 = document.querySelector("#mwv4");
   var mwv5 = document.querySelector("#mwv5");
   var mwv6 = document.querySelector("#mwv6");
   var mwv7 = document.querySelector("#mwv7");
   var mwv8 = document.querySelector("#mwv8");
   var mwv9 = document.querySelector("#mwv9");
   var mwv10 = document.querySelector("#mwv10");
   var mwv11 = document.querySelector("#mwv11");
   var mwv12 = document.querySelector("#mwv12");
   var hint = document.querySelector("#hint");
   var hint2 = document.querySelector("#hint2");
   var hint3 = document.querySelector("#hint3");
   var this_word = document.querySelector('#this');
   var is = document.querySelector('#is');
   var temporary = document.querySelector('#temporary');
   var word1 = document.querySelector('#word1');
   var word2 = document.querySelector('#word2');
   var word3 = document.querySelector('#word3');
   var word4 = document.querySelector('#word4');
   var word5 = document.querySelector('#word5');
   var word6 = document.querySelector('#word6');
   var morphae_button = document.querySelector('#morphae-button');
   var sent1 = document.querySelector('#sentence1');
   var sent2 = document.querySelector('#sentence2');
   var sent3 = document.querySelector('#sentence3');
   var sent4 = document.querySelector('#sentence4');
   var sent5 = document.querySelector('#sentence5');
   var sent6 = document.querySelector('#sentence6');
   var sent7 = document.querySelector('#sentence7');
   var sent8 = document.querySelector('#sentence8');
   var sent9 = document.querySelector('#sentence9');
   var sent10 = document.querySelector('#sentence10');
   var sent11 = document.querySelector('#sentence11');
   var sent12 = document.querySelector('#sentence12');
   var intro = document.querySelector('#intro');
   word1.disabled = true;
   word2.disabled = true;
   word3.disabled = true;
   word4.disabled = true;
   word5.disabled = true;
   word6.disabled = true;
   morphae_button.disabled = true; 
   x.style.display = 'block';
   mwv1.style.display = 'block';
   mwv2.style.display = 'block';
   mwv3.style.display = 'block';
   mwv4.style.display = 'block';
   mwv5.style.display = 'block';
   mwv6.style.display = 'block';
   mwv7.style.display = 'block';
   mwv8.style.display = 'block';
   mwv9.style.display = 'block';
   mwv10.style.display = 'block';
   mwv11.style.display = 'block';
   mwv12.style.display = 'block';
   hint.style.opacity = '0';
   hint2.style.opacity = '0';
   hint3.style.opacity = '0';
   intro.style.webkitFilter = "grayscale(0)";
   intro.style.filter = "grayscale(0)";
   sent11.innerHTML = "HAVE YOU HEARD OF";
   sent12.innerHTML = "STRUCTURAL";
   word6.innerHTML = "COLOUR";
   sent9.innerHTML = "IT'S A COLOUR";
   sent10.innerHTML = "BASED COMPLETELY ON";
   word5.innerHTML = "STRUCTURE";
   sent7.innerHTML = "WE USE FLAVOBACTERIA THAT";
   sent8.innerHTML = "PRESENT STRUCTURAL COLOUR";
   word4.innerHTML = "NATURALLY";
   sent5.innerHTML = "AND ENGINEER THEM";
   sent6.innerHTML = "TO BE TURNED INTO A";
   word3.innerHTML = "BIOMATERIAL";
   sent3.innerHTML = "THAT CAN REPLACE CHEMICAL DYES";
   sent4.innerHTML = "AND IS IN ITS ENTIRETY";
   word2.innerHTML = "SUSTAINABLE";
   sent1.innerHTML = "LET'S RE-IMAGINE COLOUR";
   sent2.innerHTML = "IT'S DO OR DYE";
   word1.innerHTML = " ";
   word1.style.backgroundColor = "transparent";
   this_word.innerHTML = "COLOUR";
   this_word.style.left = "-5vw";
   is.innerHTML = "FOR";
   is.style.left = "10vw";
   temporary.innerHTML = "CHANGE";
   var timer = setInterval(function () {
       if (op >= 1){
           clearInterval(timer);
       }
       x.style.opacity = op;
       x.style.filter = 'alpha(opacity=' + op * 100 + ")";
       mwv1.style.opacity = op;
       mwv1.style.filter = 'alpha(opacity' + op*100 + ")";
       mwv2.style.opacity = op;
       mwv2.style.filter = 'alpha(opacity' + op*100 + ")";
       mwv3.style.opacity = op;
       mwv3.style.filter = 'alpha(opacity' + op*100 + ")";
       mwv4.style.opacity = op;
       mwv4.style.filter = 'alpha(opacity' + op*100 + ")";
       mwv5.style.opacity = op;
       mwv5.style.filter = 'alpha(opacity' + op*100 + ")";
       mwv6.style.opacity = op;
       mwv6.style.filter = 'alpha(opacity' + op*100 + ")";
       mwv7.style.opacity = op;
       mwv7.style.filter = 'alpha(opacity' + op*100 + ")";
       mwv8.style.opacity = op;
       mwv8.style.filter = 'alpha(opacity' + op*100 + ")";
       mwv9.style.opacity = op;
       mwv9.style.filter = 'alpha(opacity' + op*100 + ")";
       mwv10.style.opacity = op;
       mwv10.style.filter = 'alpha(opacity' + op*100 + ")";
       mwv11.style.opacity = op;
       mwv11.style.filter = 'alpha(opacity' + op*100 + ")";
       mwv12.style.opacity = op;
       mwv12.style.filter = 'alpha(opacity' + op*100 + ")";
       op += op * 0.1;
   }, 10);

} 

   </script>

<script> 

 var controller = new ScrollMagic.Controller();
 // Fade in

var fadeInTimeline = new TimelineMax(); var fadeInFrom = TweenMax.from("#opacity", 1, { 

   autoAlpha: 0

}); var fadeInTo = TweenMax.to("#opacity", 1, { 

   autoAlpha: 1

}); fadeInTimeline 

   .add(fadeInFrom)
   .add(fadeInTo);

new ScrollMagic.Scene({ 

       triggerElement: "#slidein2",
       offset: -5300,
   })
   .setTween(fadeInTimeline)
   .duration(400)
   //.reverse(false)
   //.addIndicators() // add indicators (requires plugin)
   .addTo(controller);
   var fadeInTimeline2 = new TimelineMax();
   var fadeInFrom2 = TweenMax.from("#opacity2", 1, {
       autoAlpha: 0
   });
   var fadeInTo2 = TweenMax.to("#opacity2", 1, {
       autoAlpha: 1
   });
   fadeInTimeline2
       .add(fadeInFrom2)
       .add(fadeInTo2);
    
   new ScrollMagic.Scene({
           triggerElement: "#slidein2",
           offset: -4200,
       })
       .setTween(fadeInTimeline2)
       .duration(400)
       //.reverse(false)
       //.addIndicators() // add indicators (requires plugin)
       .addTo(controller);
       var fadeInTimeline3 = new TimelineMax();
       var fadeInFrom3 = TweenMax.from("#opacity3", 1, {
           autoAlpha: 0
       });
       var fadeInTo3 = TweenMax.to("#opacity3", 1, {
           autoAlpha: 1
       });
       fadeInTimeline3
           .add(fadeInFrom3)
           .add(fadeInTo3);
        
       new ScrollMagic.Scene({
               triggerElement: "#slidein2",
               offset: -3100,
           })
           .setTween(fadeInTimeline3)
           .duration(400)
           //.reverse(false)
           //.addIndicators() // add indicators (requires plugin)
           .addTo(controller);
           var fadeInTimeline4 = new TimelineMax();
           var fadeInFrom4 = TweenMax.from("#opacity4", 1, {
               autoAlpha: 0
           });
           var fadeInTo4 = TweenMax.to("#opacity4", 1, {
               autoAlpha: 1
           });
           fadeInTimeline4
               .add(fadeInFrom4)
               .add(fadeInTo4);
            
           new ScrollMagic.Scene({
                   triggerElement: "#slidein2",
                   offset: -2300,
               })
               .setTween(fadeInTimeline4)
               .duration(400)
               //.reverse(false)
               //.addIndicators() // add indicators (requires plugin)
               .addTo(controller);
               var fadeInTimeline5 = new TimelineMax();
               var fadeInFrom5 = TweenMax.from("#opacity5", 1, {
                   autoAlpha: 0
               });
               var fadeInTo5 = TweenMax.to("#opacity5", 1, {
                   autoAlpha: 1
               });
               fadeInTimeline5
                   .add(fadeInFrom5)
                   .add(fadeInTo5);
                
               new ScrollMagic.Scene({
                       triggerElement: "#slidein2",
                       offset: -1350,
                   })
                   .setTween(fadeInTimeline5)
                   .duration(400)
                   //.reverse(false)
                   //.addIndicators() // add indicators (requires plugin)
                   .addTo(controller);
                   var fadeInTimeline6 = new TimelineMax();
                   var fadeInFrom6 = TweenMax.from("#opacity6", 1, {
                       autoAlpha: 0
                   });
                   var fadeInTo6 = TweenMax.to("#opacity6", 1, {
                       autoAlpha: 1
                   });
                   fadeInTimeline6
                       .add(fadeInFrom6)
                       .add(fadeInTo6);
                    
                   new ScrollMagic.Scene({
                           triggerElement: "#slidein2",
                           offset: -250,
                       })
                       .setTween(fadeInTimeline6)
                       .duration(400)
                       //.reverse(false)
                       //.addIndicators() // add indicators (requires plugin)
                       .addTo(controller); 
                       var fadeInTimeline7 = new TimelineMax();
                       var fadeInFrom7 = TweenMax.from("#morphae", 1, {
                           autoAlpha: 0
                       });
                       var fadeInTo7 = TweenMax.to("#morphae", 1, {
                           autoAlpha: 1
                       });
                       fadeInTimeline7
                           .add(fadeInFrom7)
                           .add(fadeInTo7);
                        
                       new ScrollMagic.Scene({
                               triggerElement: "#slidein2",
                               offset: -300,
                           })
                           .setTween(fadeInTimeline7)
                           .duration(400)
                           //.reverse(false)
                           //.addIndicators() // add indicators (requires plugin)
                           .addTo(controller);

</script>


</body> </html> Template:Athens/Loader

取自“https://hmoegirl.com/index.php?title=Widget:新样式&oldid=59174”