Widget:新样式
<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;
}
- content {
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;
}
.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>
<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>
COLOUR IS GIVING WAY TO NEW
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