Line 43: | Line 43: | ||
color:#ff6427; | color:#ff6427; | ||
} | } | ||
− | [data-typer]:after { | + | [data-typer]:after,[data-later]:after { |
content:""; | content:""; | ||
display: inline-block; | display: inline-block; | ||
Line 109: | Line 109: | ||
<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='"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="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> | ||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet"> | <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet"> | ||
<script> | <script> | ||
Line 118: | Line 119: | ||
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 (cht > e.dataset.typer.length)return; | ||
if(e.dataset.typer[cht]!="<") | if(e.dataset.typer[cht]!="<") | ||
Line 124: | Line 124: | ||
else e.innerHTML=e.dataset.typer.substring(0, cht+=3); | else e.innerHTML=e.dataset.typer.substring(0, cht+=3); | ||
setTimeout(typeItt, ~~(Math.random() * (pauseMax - pauseMin + 1) + pauseMin)); | 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); | + | },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); | ||
}); | }); | ||
− | setTimeout(function(){qs("#Header").style.opacity = "1";qs("div.JC").style.cssText += 'background-color:#FFF !important'; qsa(".JC #content-container>div h1, .JC #content-container>div b").forEach(function(e){e.style.color="#FFF"});setTimeout(function(){qsa(".JC #content-container>div h1, .JC #content-container>div b").forEach(function(e){e.style.display="none"});},1000)},(178+71)*65 + (2 * 1500)); | + | setTimeout(function(){qs("#Header").style.opacity = "1";qs("div.JC").style.cssText += 'background-color:#FFF !important'; qsa(".JC #content-container>div h1, .JC #content-container>div b").forEach(function(e){e.style.color="#FFF"});setTimeout(function(){qsa(".JC #content-container>div h1, .JC #content-container>div b").forEach(function(e){e.style.display="none"});function typeIt() { |
+ | if (ch > qs("[data-later]").dataset.later.length)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)); | ||
+ | }},1000);},(178+71)*65 + (2 * 1500)); | ||
},500); | },500); | ||
</script> | </script> |
Revision as of 21:32, 31 October 2017