Difference between revisions of "Team:Judd UK/berhfudf"
| (10 intermediate revisions by 2 users not shown) | |||
| Line 15: | Line 15: | ||
<link rel="stylesheet" href="/Template:Judd_UK/Stylesheets/main?action=raw&ctype=text/css"> | <link rel="stylesheet" href="/Template:Judd_UK/Stylesheets/main?action=raw&ctype=text/css"> | ||
<script src="/Template:Judd_UK/Scripts/wiki?action=raw&ctype=text/javascript" async></script> | <script src="/Template:Judd_UK/Scripts/wiki?action=raw&ctype=text/javascript" async></script> | ||
| + | <script src="/Template:Judd_UK/Scripts/BSS?action=raw&ctype=text/javascript" defer></script> | ||
| + | <link rel="stylesheet" href="/Template:Judd_UK/Stylesheets/BSS?action=raw&ctype=text/css"> | ||
<style id="topstyles"></style> | <style id="topstyles"></style> | ||
<div id="loadbar"></div> | <div id="loadbar"></div> | ||
| Line 48: | Line 50: | ||
<div id="content-body"> | <div id="content-body"> | ||
<div> | <div> | ||
| − | <div id="intro" style="height:100%;z-index:100;position:absolute;background:inherit;transition:opacity .5s;"> | + | <div id="intro" style="height:100%;z-index:100;position:absolute;background:inherit;transition:opacity .5s;"> |
| − | <h1 data-typer='"Iron deficiency affects more people than <b>any</b> other condition, constituting a public health condition of epidemic proportions" - <b>WHO</b>' data-delay="0"></h1> | + | <h1 data-typer='"Iron deficiency affects more people than <b>any</b> other condition, constituting a public health condition of epidemic proportions" - <b>WHO</b>' data-delay="0"></h1> |
| − | <h1 data-typer="Over <b>30%</b> of the global population suffers from iron deficiency anaemia."data-delay="11000"></h1> | + | <h1 data-typer="Over <b>30%</b> of the global population suffers from iron deficiency anaemia."data-delay="11000"></h1> |
| − | <h1 data-later="Here's what we're doing about it" style="display:none"></h1> | + | <h1 data-later="Here's what we're doing about it" style="display:none"></h1> |
| − | </div> | + | </div> |
| − | + | <style id="homestyles"> | |
| − | <style id="homestyles"> | + | .JC #content-container{ |
| − | .JC #content-container{ | + | visibility:visible!important;} |
| − | visibility:visible!important;} | + | .JC #content-index{ |
| − | .JC #content-index{ | + | display:none!important} |
| − | display:none!important} | + | div.JC{ |
| − | div.JC{ | + | transition:background-color 1s ease-in; |
| − | transition:background-color 1s ease-in; | + | background-color:#111!important; |
| − | background-color:#111!important; | + | } |
| − | } | + | #Header{ |
| − | #Header{ | + | opacity:0; |
| − | opacity:0; | + | transition:opacity 1s ease; |
| − | transition:opacity 1s ease; | + | } |
| − | } | + | #Footer{ |
| − | #Footer{ | + | opacity:0 |
| − | opacity:0 | + | } |
| − | } | + | #intro>h1,#intro>h1>b{ |
| − | #intro>h1,#intro>h1>b{ | + | text-align:left; |
| − | text-align:left; | + | border:none!important; |
| − | border:none!important; | + | font-size:40px!important; |
| − | font-size:40px!important; | + | line-height:68.1167px!important; |
| − | line-height:68.1167px!important; | + | font-family:'Open Sans'!important; |
| − | font-family:'Open Sans'!important; | + | color:#bbb; |
| − | color:#bbb; | + | margin:0!important; |
| − | margin:0!important; | + | transition:color 1s ease-in; |
| − | transition:color 1s ease-in; | + | } |
| − | } | + | #intro>h1>b{ |
| − | #intro>h1>b{ | + | font-weight:400!important; |
| − | font-weight:400!important; | + | color:#ff6427; |
| − | color:#ff6427; | + | } |
| − | } | + | [data-typer]:after,[data-later]:after { |
| − | [data-typer]:after,[data-later]:after { | + | content:""; |
| − | + | display: inline-block; | |
| − | + | vertical-align: middle; | |
| − | + | width:1px; | |
| − | + | height:1em; | |
| − | + | background: #bbb; | |
| − | + | animation: caretPulsate 1s linear infinite; | |
| − | + | -webkit-animation: caretPulsate 1s linear infinite; | |
| − | + | } | |
| − | } | + | [data-typer]~[data-typer]:after{ |
| − | [data-typer]~[data-typer]:after{ | + | width:0; |
| − | width:0; | + | animation:none; |
| − | animation:none; | + | -webkit-animation:none; |
| − | -webkit-animation:none; | + | } |
| − | } | + | @keyframes caretPulsate { |
| − | @keyframes caretPulsate { | + | 0% {opacity:1;} |
| − | + | 50% {opacity:1;} | |
| − | + | 60% {opacity:0;} | |
| − | + | 100% {opacity:0;} | |
| − | + | } | |
| − | } | + | @-webkit-keyframes caretPulsate { |
| − | @-webkit-keyframes caretPulsate { | + | 0% {opacity:1;} |
| − | + | 50% {opacity:1;} | |
| − | + | 60% {opacity:0;} | |
| − | + | 100% {opacity:0;} | |
| − | + | } | |
| − | } | + | </style> |
| − | </style> | + | <link href="https://fonts.googleapis.com/css?family=Open+Sans:400" rel="stylesheet"> |
| − | + | <script> | |
| − | <script> | + | setTimeout(function(){ |
| − | setTimeout(function(){ | + | qsa = document.querySelectorAll.bind(document); |
| − | qsa = document.querySelectorAll.bind(document); | + | var pauseMax = 80, |
| − | + | pauseMin = 40, | |
| − | + | cht = 0; | |
| − | + | qsa("[data-typer]").forEach( | |
| − | qsa("[data-typer]").forEach( | + | function(e,i){setTimeout(function typeItt() { |
| − | function(e,i){setTimeout(function typeItt() { | + | if (cht > e.dataset.typer.length)return; |
| − | + | if(e.dataset.typer[cht]!="<") | |
| − | + | e.innerHTML = e.dataset.typer.substring(0, cht++); | |
| − | + | else e.innerHTML=e.dataset.typer.substring(0, cht+=3); | |
| − | + | setTimeout(typeItt, ~~(Math.random() * (pauseMax - pauseMin + 1) + pauseMin)); | |
| − | + | },e.dataset.delay); | |
| − | },e.dataset.delay); | + | if(qsa("[data-typer]").length > i+1) |
| − | if(qsa("[data-typer]").length > i+1) | + | setTimeout(function(){ |
| − | + | e.removeAttribute("data-typer"); | |
| − | + | cht=0 | |
| − | + | },qsa("[data-typer]")[i+1].dataset.delay-10); | |
| − | },qsa("[data-typer]")[i+1].dataset.delay-10); | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
}); | }); | ||
| + | var ch=0; | ||
| + | function typeIt() { | ||
| + | if (ch > qs("[data-later]").dataset.later.length){ setTimeout(function(){qs("#intro").style.opacity = "0"; qs("#afterintro").style.opacity="1";setTimeout(function(){qs("#intro").remove(); | ||
| + | makeBSS(".homeshow");},500);},1000); return;} | ||
| + | if (qs("[data-later]").dataset.later[ch] != "<") | ||
| + | qs("[data-later]").innerHTML = qs("[data-later]").dataset.later.substring(0, ch++); | ||
| + | else qs("[data-later]").innerHTML = qs("[data-later]").dataset.later.substring(0, ch += 3); | ||
| + | setTimeout(typeIt, ~~ (Math.random() * (pauseMax - pauseMin + 1) + pauseMin)); | ||
| + | } | ||
setTimeout(function() { | setTimeout(function() { | ||
| + | qs("#Header").style.opacity = "1"; | ||
| + | qs("div.JC").style.cssText += 'background-color:#FFF !important'; | ||
qsa(".JC #intro h1:not([data-later]), .JC #intro h1:not([data-later]) b").forEach(function(e) { | qsa(".JC #intro h1:not([data-later]), .JC #intro h1:not([data-later]) b").forEach(function(e) { | ||
| − | e.style. | + | e.style.color = "#FFF" |
}); | }); | ||
| − | qs("[data-later]").style.cssText = "display:inline!important;color:#2764ff"; | + | setTimeout(function() { |
| − | + | qsa(".JC #intro h1:not([data-later]), .JC #intro h1:not([data-later]) b").forEach(function(e) { | |
| − | + | e.style.display = "none" | |
| − | + | }); | |
| − | }, (178 + 71) * 65 + (2 * 1500)); | + | qs("[data-later]").style.cssText = "display:inline!important;color:#2764ff"; |
| − | },500); | + | |
| − | </script> | + | typeIt(); |
| − | + | }, 1000); | |
| − | <div id="afterintro" style="opacity:0;transition:opacity .5s;"> | + | }, (178 + 71) * 65 + (2 * 1500)); |
| − | <div | + | },500); |
| − | + | </script> | |
| − | + | <div id="afterintro" style="opacity:0;transition:opacity .5s;"> | |
| − | + | <div id="slides"> | |
| − | + | <img class="slide showing" src="https://static.igem.org/mediawiki/2017/7/70/Judd_UK_Team_Photo1.jpeg"/> | |
| + | <img class="slide" src="https://static.igem.org/mediawiki/2017/7/70/Judd_UK_Team_Photo1.jpeg"/> | ||
| + | <img class="slide" src="https://static.igem.org/mediawiki/2017/7/70/Judd_UK_Team_Photo1.jpeg"/> | ||
| + | </div> | ||
| + | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
| − | |||
| − | |||
| − | |||
<footer id="Footer"> | <footer id="Footer"> | ||
<h4>Designed by Aleksandur Murfitt</h4> | <h4>Designed by Aleksandur Murfitt</h4> | ||
Latest revision as of 14:42, 1 November 2017
Home
Project
Contents
