Revision as of 21:59, 1 November 2017

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">

 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=""/>
       <img class="slide" src=""/>
       <img class="slide" src=""/>
       <img class="slide" src=""/>
       <img class="slide" src=""/>
       <img class="slide" src=""/>
       <img class="slide" src=""/>
       <img class="slide" src=""/>
       <img class="slide" src=""/>

Hey

</div>

@@ Line 1: / Line 1: @@
 <div id="intro" style="height:calc(66.66vw + 130px);index:100;position:absolute;top:0;left:0;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="Over <b>30%</b> of the global population suffers from iron deficiency anaemia."data-delay="11000"></h1>
+<h1 data-typer="Almost <b>30%</b> of the global population suffers from iron deficiency anaemia."data-delay="11000"></h1>
 <h1 data-later="Our project, ioniron, aims to tackle this problem." style="display:none"></h1>
 </div>

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

Revision as of 21:59, 1 November 2017

Hey