Difference between revisions of "Team:Judd UK/berhfudf"

 
(97 intermediate revisions by 2 users not shown)
Line 11: Line 11:
 
-->
 
-->
 
<div class="JC">
 
<div class="JC">
 +
   
 
     <script src="/Template:Judd_UK/pagelist?action=raw&ctype=text/javascript" async></script>
 
     <script src="/Template:Judd_UK/pagelist?action=raw&ctype=text/javascript" async></script>
 
     <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 46: Line 49:
 
         </div>
 
         </div>
 
         <div id="content-body">
 
         <div id="content-body">
−
<div data-wiki="false">
+
<div>
−
<style>
+
  <div id="intro" style="height:100%;z-index:100;position:absolute;background:inherit;transition:opacity .5s;">
−
.JC #content-container{
+
    <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>
−
visibility:visible;}
+
    <h1 data-typer="Over <b>30%</b> of the global population suffers from iron deficiency anaemia."data-delay="11000"></h1>
−
.JC #content-index{
+
    <h1 data-later="Here's what we're doing about it" style="display:none"></h1>
−
display:none}
+
  </div>
−
.JC{
+
  <style id="homestyles">
−
background-color:#111!important;
+
    .JC #content-container{
−
}
+
    visibility:visible!important;}
−
#Header{
+
    .JC #content-index{
−
opacity:0
+
    display:none!important}
−
}
+
    div.JC{
−
#Footer{
+
    transition:background-color 1s ease-in;
−
opacity:0
+
    background-color:#111!important;
−
}
+
    }
−
div>h1,div>h1>b{
+
    #Header{
−
text-align:left;
+
    opacity:0;
−
border:none!important;
+
    transition:opacity 1s ease;
−
font-size:50px!important;
+
    }
−
line-height:68.1167px!important;
+
    #Footer{
−
font-family:'Open Sans'!important;
+
    opacity:0
−
color:#bbb;
+
    }
−
margin:0!important;
+
    #intro>h1,#intro>h1>b{
−
}
+
    text-align:left;
−
div>h1>b{
+
    border:none!important;
−
font-weight:400!important;
+
    font-size:40px!important;
−
color:#ff6427;
+
    line-height:68.1167px!important;
−
}
+
    font-family:'Open Sans'!important;
−
[data-typer]:after {
+
    color:#bbb;
−
  content:"";
+
    margin:0!important;
−
  display: inline-block;
+
    transition:color 1s ease-in;
−
  vertical-align: middle;
+
    }
−
  width:1px;
+
    #intro>h1>b{
−
  height:1em;
+
    font-weight:400!important;
−
  background: #bbb;
+
    color:#ff6427;
−
          animation: caretPulsate 1s linear infinite;  
+
    }
−
  -webkit-animation: caretPulsate 1s linear infinite;  
+
    [data-typer]:after,[data-later]:after {
−
}
+
    content:"";
−
@keyframes caretPulsate {
+
    display: inline-block;
−
  0%  {opacity:1;}
+
    vertical-align: middle;
−
  50%  {opacity:1;}
+
    width:1px;
−
  60%  {opacity:0;}
+
    height:1em;
−
  100% {opacity:0;}
+
    background: #bbb;
−
}
+
    animation: caretPulsate 1s linear infinite;  
−
@-webkit-keyframes caretPulsate {
+
    -webkit-animation: caretPulsate 1s linear infinite;  
−
  0%  {opacity:1;}
+
    }
−
  50%  {opacity:1;}
+
    [data-typer]~[data-typer]:after{
−
  60%  {opacity:0;}
+
    width:0;
−
  100% {opacity:0;}
+
    animation:none;
−
}
+
    -webkit-animation:none;
−
</style>
+
    }
−
<h1 data-typer="More than <b>2 million</b> people suffer from anaemia." data-delay="0"></h1>
+
    @keyframes caretPulsate {
−
<h1 data-typer="<b>142500</b> of them will not see the end of this year."data-delay="4740"></h1>
+
    0%  {opacity:1;}
−
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">  
+
    50%  {opacity:1;}
−
<script>
+
    60%  {opacity:0;}
−
  var pauseMax = 80,
+
    100% {opacity:0;}
−
    pauseMin = 40,
+
    }
−
    ch = 0, cht = 0;
+
    @-webkit-keyframes caretPulsate {
−
(function typeIt() {
+
    0%  {opacity:1;}
−
    if (ch > qsa("[data-typer]")[0].dataset.typer.length)return;
+
    50%  {opacity:1;}
−
     if(qsa("[data-typer]")[0].dataset.typer[ch]!="<"){
+
    60%  {opacity:0;}
−
     qsa("[data-typer]")[0].innerHTML = qsa("[data-typer]")[0].dataset.typer.substring(0, ch++);
+
    100% {opacity:0;}
−
    console.log(qsa("[data-typer]")[0].innerHTML);}
+
    }
−
    else {qsa("[data-typer]")[0].innerHTML=qsa("[data-typer]")[0].dataset.typer.substring(0, ch+=3);qsa("[data-typer]")[0].innerHTML};
+
  </style>
−
    setTimeout(typeIt(), ~~(Math.random() * (pauseMax - pauseMin + 1) + pauseMin));
+
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400" rel="stylesheet">
−
}());
+
  <script>
−
</script>
+
    setTimeout(function(){
−
 
+
    qsa = document.querySelectorAll.bind(document);
−
 
+
      var pauseMax = 80,
 +
        pauseMin = 40,
 +
        cht = 0;
 +
    qsa("[data-typer]").forEach(
 +
    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);
 +
     if(qsa("[data-typer]").length > i+1)
 +
      setTimeout(function(){
 +
        e.removeAttribute("data-typer");
 +
        cht=0
 +
     },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() {
 +
        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) {
 +
            e.style.color = "#FFF"
 +
        });
 +
        setTimeout(function() {
 +
            qsa(".JC #intro h1:not([data-later]), .JC #intro h1:not([data-later]) b").forEach(function(e) {
 +
                e.style.display = "none"
 +
            });
 +
            qs("[data-later]").style.cssText = "display:inline!important;color:#2764ff";
 +
   
 +
            typeIt();
 +
        }, 1000);
 +
    }, (178 + 71) * 65 + (2 * 1500));
 +
    },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>
−
    </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

Contents

Designed by Aleksandur Murfitt