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

 
(33 intermediate revisions by 2 users not shown)
Line 11: Line 11:
 
-->
 
-->
 
<div class="JC">
 
<div class="JC">
−
     <style>
+
      
−
.JC #content-container{
+
−
visibility:visible!important;}
+
−
.JC #content-index{
+
−
display:none!important}
+
−
.JC{
+
−
background-color:#111!important;
+
−
}
+
−
div.JC{
+
−
transition:background-color 1s ease-in;
+
−
}
+
−
#Header{
+
−
opacity:0;
+
−
transition:opacity 1s ease;
+
−
}
+
−
#Footer{
+
−
opacity:0
+
−
}
+
−
div>h1,div>h1>b{
+
−
text-align:left;
+
−
border:none!important;
+
−
font-size:40px!important;
+
−
line-height:68.1167px!important;
+
−
font-family:'Open Sans'!important;
+
−
color:#bbb;
+
−
margin:0!important;
+
−
transition:color 1s ease-in;
+
−
}
+
−
div>h1>b{
+
−
font-weight:400!important;
+
−
color:#ff6427;
+
−
}
+
−
[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{
+
−
width:0;
+
−
animation:none;
+
−
-webkit-animation:none;
+
−
}
+
−
@keyframes caretPulsate {
+
−
  0%  {opacity:1;}
+
−
  50%  {opacity:1;}
+
−
  60%  {opacity:0;}
+
−
  100% {opacity:0;}
+
−
}
+
−
@-webkit-keyframes caretPulsate {
+
−
  0%  {opacity:1;}
+
−
  50%  {opacity:1;}
+
−
  60%  {opacity:0;}
+
−
  100% {opacity:0;}
+
−
}
+
−
</style>
+
 
     <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 107: Line 50:
 
         <div id="content-body">
 
         <div id="content-body">
 
<div>
 
<div>
−
<h1 data-typer='"Iron deficiency affects more people than any other condition, constituting a public health condition of epidemic proportions" - WHO' data-delay="0"></h1>
+
  <div id="intro" style="height:100%;z-index:100;position:absolute;background:inherit;transition:opacity .5s;">
−
<h1 data-typer="Over <b>30%</b> of the global population suffers from iron deficiency anaemia."data-delay="11000"></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-later="Here's what we're doing about it:" style="display:none"></h1>
+
    <h1 data-typer="Over <b>30%</b> of the global population suffers from iron deficiency anaemia."data-delay="11000"></h1>
−
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">  
+
    <h1 data-later="Here's what we're doing about it" style="display:none"></h1>
−
<script>
+
  </div>
−
setTimeout(function(){
+
  <style id="homestyles">
−
qsa = document.querySelectorAll.bind(document);
+
    .JC #content-container{
−
  var pauseMax = 80,
+
    visibility:visible!important;}
−
    pauseMin = 40,
+
    .JC #content-index{
−
    cht = 0;
+
    display:none!important}
−
qsa("[data-typer]").forEach(
+
    div.JC{
−
function(e,i){setTimeout(function typeItt() {
+
    transition:background-color 1s ease-in;
−
    if (cht > e.dataset.typer.length)return;
+
    background-color:#111!important;
−
    if(e.dataset.typer[cht]!="<")
+
    }
−
    e.innerHTML = e.dataset.typer.substring(0, cht++);
+
    #Header{
−
    else e.innerHTML=e.dataset.typer.substring(0, cht+=3);
+
    opacity:0;
−
    setTimeout(typeItt, ~~(Math.random() * (pauseMax - pauseMin + 1) + pauseMin));
+
    transition:opacity 1s ease;
−
},e.dataset.delay);
+
    }
−
if(qsa("[data-typer]").length > i+1)
+
    #Footer{
−
  setTimeout(function(){
+
    opacity:0
−
    e.removeAttribute("data-typer");
+
    }
−
    cht=0
+
    #intro>h1,#intro>h1>b{
−
},qsa("[data-typer]")[i+1].dataset.delay-10);
+
    text-align:left;
−
});
+
    border:none!important;
−
var ch=0;
+
    font-size:40px!important;
−
function typeIt() {
+
    line-height:68.1167px!important;
−
            console.log("here");
+
    font-family:'Open Sans'!important;
−
            if (ch > qs("[data-later]").dataset.later.length) return;
+
    color:#bbb;
−
            if (qs("[data-later]").dataset.later[ch] != "<")
+
    margin:0!important;
−
                qs("[data-later]").innerHTML = qs("[data-later]").dataset.later.substring(0, ch++);
+
    transition:color 1s ease-in;
−
            else qs("[data-later]").innerHTML = qs("[data-later]").dataset.later.substring(0, ch += 3);
+
    }
−
            setTimeout(typeIt, ~~ (Math.random() * (pauseMax - pauseMin + 1) + pauseMin));
+
    #intro>h1>b{
−
        }
+
    font-weight:400!important;
−
setTimeout(function() {
+
    color:#ff6427;
−
    qs("#Header").style.opacity = "1";
+
    }
−
    qs("div.JC").style.cssText += 'background-color:#FFF !important';
+
    [data-typer]:after,[data-later]:after {
−
    qsa(".JC #content-container>div h1, .JC #content-container>div b").forEach(function(e) {
+
    content:"";
−
        e.style.color = "#FFF"
+
    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{
 +
    width:0;
 +
    animation:none;
 +
    -webkit-animation:none;
 +
    }
 +
    @keyframes caretPulsate {
 +
    0%  {opacity:1;}
 +
    50% {opacity:1;}
 +
    60%  {opacity:0;}
 +
    100% {opacity:0;}
 +
    }
 +
    @-webkit-keyframes caretPulsate {
 +
    0%  {opacity:1;}
 +
    50%  {opacity:1;}
 +
    60%  {opacity:0;}
 +
    100% {opacity:0;}
 +
    }
 +
  </style>
 +
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400" rel="stylesheet">
 +
  <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() {
 
     setTimeout(function() {
−
         qsa(".JC #content-container>div h1, .JC #content-container>div b").forEach(function(e) {
+
        qs("#Header").style.opacity = "1";
−
             e.style.display = "none"
+
        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"
 
         });
 
         });
−
         qs("[data-later]").style.cssText = "display:inline!important;color:#111";
+
         setTimeout(function() {
−
 
+
            qsa(".JC #intro h1:not([data-later]), .JC #intro h1:not([data-later]) b").forEach(function(e) {
−
        typeIt();
+
                e.style.display = "none"
−
    }, 1000);
+
            });
−
}, (178 + 71) * 65 + (2 * 1500));
+
            qs("[data-later]").style.cssText = "display:inline!important;color:#2764ff";
−
},500);
+
   
−
</script>
+
            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