Difference between revisions of "Team:Judd UK/Pages/Home"

 
(7 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
<div data-wiki="false" data-templated="false">
+
<div id="intro" style="height:calc(66.66vw + 130px);index:100;position:absolute;top:0;left:0;background:inherit;transition:opacity .5s;">
−
    <video id="video" preload="auto" width="1200" height="869" class="center" autoplay>
+
<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>
−
                        <source src="https://static.igem.org/mediawiki/igem.org/4/4b/Judd_UK_Animation.webm" type="video/webm">
+
<h1 data-typer="Almost <b>30%</b> of the global population suffers from iron deficiency anaemia."data-delay="11000"></h1>
−
                        Your browser does not support the video tag.
+
<h1 data-later="Our project, ioniron, aims to tackle this problem." style="display:none"></h1>
−
                        </video>
+
</div>
−
     <h2>Introducing the Iron Home Testing Kit</h2>
+
<style id="homestyles">
−
     <h2>About Our School</h2>
+
.JC #content-container{
−
     <p>The Judd School is a state school situated in the south east of England in West Kent. It has over 1,000 students with around 250 in the senior school. It’s from the senior school or sixth form that the team of 15 pupils was selected. This year is the first year Judd have ever entered a team into the IGEM competition. In addition to this, we are the first state school from Britain to complete what is required for the competition and one of only two British high schools to enter in 2017. As much as this is daunting, the team and two supporting staff, were extremely excited by the opportunities that IGEM provides and have gained valuable experience from participating.
+
visibility:visible!important;}
−
     </p>
+
.JC #content-index{
 +
display:none!important}
 +
.JC #content-body{margin:0px;}
 +
div.JC{
 +
transition:background-color 1s ease-in;
 +
background-color:#111!important;
 +
}
 +
#Header{
 +
opacity:0;
 +
transition:opacity 1s ease;
 +
}
 +
#Footer{
 +
opacity:0
 +
}
 +
#intro>h1,#intro>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;
 +
}
 +
#intro>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>
 +
<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() {
 +
     qs("#Header").style.opacity = "1";
 +
qs("#Footer").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";
  
−
     <h2>Our Goal</h2>
+
        typeIt();
−
    <p>
+
     }, 1000);
−
      The goal of our iGEM project is to create a home testing kit for detecting iron levels, to warn people with abnormal concentrations of this essential mineral. Over 2 billion people worldwide in both MEDCs and LEDCs are affected by anaemia; mainly infants and pregnant women. Iron deficiency symptoms include lethargy, heart conditions, pale skill and even reduced cognitive ability, so an easy way to test whether one has abnormal amounts of it would be greatly beneficial.
+
}, (178 + 71) * 65 + (2 * 1500));
−
    </p>
+
},500);
−
    </div>
+
</script>
 +
<div id="afterintro" style="opacity:0;transition:opacity .5s;">
 +
<div id="slides">
 +
        <img class="slide showing" src="https://static.igem.org/mediawiki/2017/9/9c/Judd_UK_slideshow1.jpg"/>
 +
        <img class="slide" src="https://static.igem.org/mediawiki/2017/9/97/Judd_UK_slideshow2.jpg"/>
 +
        <img class="slide" src="https://static.igem.org/mediawiki/2017/9/94/Judd_UK_slideshow3.jpg"/>
 +
        <img class="slide" src="https://static.igem.org/mediawiki/2017/6/6d/Judd_UK_slideshow4.jpg"/>
 +
        <img class="slide" src="https://static.igem.org/mediawiki/2017/4/48/Judd_UK_slideshow5.jpg"/>
 +
        <img class="slide" src="https://static.igem.org/mediawiki/2017/0/09/Judd_UK_slideshow6.jpg"/>
 +
        <img class="slide" src="https://static.igem.org/mediawiki/2017/c/c5/Judd_UK_slideshow7.jpg"/>
 +
        <img class="slide" src="https://static.igem.org/mediawiki/2017/a/a7/Judd_UK_slideshow8.jpg"/>
 +
        <img class="slide" src="https://static.igem.org/mediawiki/2017/8/8d/Judd_UK_slideshow9.jpg"/>
 +
</div>
 +
</div>
 +
</div>

Latest revision as of 22:14, 1 November 2017

<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> <h1 data-typer="Almost 30% of the global population suffers from iron deficiency anaemia."data-delay="11000"></h1>

<style id="homestyles"> .JC #content-container{ visibility:visible!important;} .JC #content-index{ display:none!important} .JC #content-body{margin:0px;} div.JC{ transition:background-color 1s ease-in; background-color:#111!important; }

  1. Header{

opacity:0; transition:opacity 1s ease; }

  1. Footer{

opacity:0 }

  1. intro>h1,#intro>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; }

  1. intro>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> 

<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() { 

   qs("#Header").style.opacity = "1";

qs("#Footer").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> 

       <img class="slide showing" src="Judd_UK_slideshow1.jpg"/>
       <img class="slide" src="Judd_UK_slideshow2.jpg"/>
       <img class="slide" src="Judd_UK_slideshow3.jpg"/>
       <img class="slide" src="Judd_UK_slideshow4.jpg"/>
       <img class="slide" src="Judd_UK_slideshow5.jpg"/>
       <img class="slide" src="Judd_UK_slideshow6.jpg"/>
       <img class="slide" src="Judd_UK_slideshow7.jpg"/>
       <img class="slide" src="Judd_UK_slideshow8.jpg"/>
       <img class="slide" src="Judd_UK_slideshow9.jpg"/>

</div>