example/views/layout.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Randext — A programable, random letter animation effect to display text messages</title>
<meta name="description"
content="Randext — UMD and ES Module :: A programable, random letter animation effect to display text messages">
<meta author="Simon Gattner">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="static/css/style.css" />
</head>
<body class="development">
<header>
<section>
<h1>
<span data-randext>Randext</span>
<span data-randext-async="1800">Randext</span>
<span data-randext-async="4500">Randext</span>
<span data-randext-async="3600">Randext</span>
<span data-randext-async="2700" data-randext-endless="true">Randext</span>
<span data-randext-async="3600">Randext</span>
<span data-randext-async="5400">Randext</span>
</h1>
<h2>
A programable,
<span data-randext>random letter animation effect</span>
to display
<span data-randext>text messages</span>
</h2>
<pre>
<code class="nohighlight">
// <span data-randext>{{ "Randext ES Module and UMD Module available" | escape }}</span>
<span data-randext>{{ "import Randext from 'randext';" | escape }}</span>
<span data-randext>{{ "const randext = new Randext({" | escape }}</span>
<span data-randext>{{ "element: document.querySelect(\"[data-randext]\")," | escape }}</span>
<span data-randext>{{ "ignore: '-_,;:./()[]{}<>\\\'\"`#$%&@€!?'," | escape }}</span>
<span data-randext>{{ "interval: 50," | escape }}</span>
<span data-randext>{{ "callback: null," | escape }}</span>
<span data-randext>{{ "});" | escape }}</span>
<span data-randext>{{ "randext.start();" | escape }}</span>
</code>
</pre>
</section>
</header>
<main>
{% block content %}
{% endblock %}
</main>
<footer>
<ul>
<li><a data-randext-async="7200" title="Github" href="https://github.com/exiguus/js.randext">git</a></li>
<li><a data-randext-async="7200" title="NPM JS" href="https://www.npmjs.com/package/randext">npm</a></li>
<li><a data-randext-async="7200" title="JSDOC" href="https://exiguus.github.io/js.randext/jsdoc/index.html">docs</a></li>
<li><a data-randext-async="7200" title="Coverage es6 lcov-report"
href="https://exiguus.github.io/js.randext/jsdoc/coverage/index.html">coverage</a></li>
<li><a data-randext-async="7200" title="License MIT" href="https://github.com/exiguus/js.randext/blob/master/LICENSE">MIT license</a></li>
</ul>
<p>
<a href="https://github.com/exiguus/js.randext"
title="Randext — A programable, random letter animation effect to display text messages">
<span class="logo">
<svg aria-hidden="true" data-icon="javascript" role="img" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512" class="javascript">
<path fill="currentColor"
d="M0 32v448h448V32H0zm243.8 349.4c0 43.6-25.6 63.5-62.9 63.5-33.7 0-53.2-17.4-63.2-38.5l34.3-20.7c6.6 11.7 12.6 21.6 27.1 21.6 13.8 0 22.6-5.4 22.6-26.5V237.7h42.1v143.7zm99.6 63.5c-39.1 0-64.4-18.6-76.7-43l34.3-19.8c9 14.7 20.8 25.6 41.5 25.6 17.4 0 28.6-8.7 28.6-20.8 0-14.4-11.4-19.5-30.7-28l-10.5-4.5c-30.4-12.9-50.5-29.2-50.5-63.5 0-31.6 24.1-55.6 61.6-55.6 26.8 0 46 9.3 59.8 33.7L368 290c-7.2-12.9-15-18-27.1-18-12.3 0-20.1 7.8-20.1 18 0 12.6 7.8 17.7 25.9 25.6l10.5 4.5c35.8 15.3 55.9 31 55.9 66.2 0 37.8-29.8 58.6-69.7 58.6z">
</path>
</svg>
</span>
<span data-randext-async="18000">Randext</span>
</a>
</p>
</footer>
<script src="static/js/js.randext/randext.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script src="static/js/index.js" async></script>
</body>
</html>