Line 46: | Line 46: | ||
</div> | </div> | ||
<div id="content-body"> | <div id="content-body"> | ||
− | |||
<style> | <style> | ||
.JC{ | .JC{ | ||
Line 94: | Line 93: | ||
<h1 data-typer="Every year <b>142500</b> people die of anaemia."></h1> | <h1 data-typer="Every year <b>142500</b> people die of anaemia."></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"> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
</div> | </div> | ||
Line 156: | Line 132: | ||
</script> | </script> | ||
</div> | </div> | ||
+ | <script> | ||
+ | $("[data-typer]").attr("data-typer", function(i, txt) { | ||
+ | |||
+ | var $typer = $(this), | ||
+ | tot = txt.length, | ||
+ | pauseMax = 200, | ||
+ | pauseMin = 40, | ||
+ | ch = 0; | ||
+ | |||
+ | (function typeIt() { | ||
+ | if (ch > tot) return; | ||
+ | if(txt[ch]!="<") | ||
+ | $typer.html(txt.substring(0, ch++)); | ||
+ | else $typer.html(txt.substring(0, ch+=3)); | ||
+ | setTimeout(typeIt, ~~(Math.random() * (pauseMax - pauseMin + 1) + pauseMin)); | ||
+ | }()); | ||
+ | |||
+ | }); | ||
+ | </script> | ||
</html> | </html> |
Revision as of 03:51, 30 October 2017