184 lines
5.3 KiB
HTML
184 lines
5.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Typed.js - Type your heart out</title>
|
|
<script src="lib/typed.min.js" type="text/javascript"></script>
|
|
<script src="assets/demos.js"></script>
|
|
<link href="assets/demos.css" rel="stylesheet"/>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
|
|
<script>hljs.initHighlightingOnLoad();</script>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="wrap">
|
|
<h1 class="title">Typed.js</h1>
|
|
|
|
<div class="links">
|
|
<a href="https://github.com/mattboldt/typed.js">GitHub</a> |
|
|
<a href="http://www.mattboldt.com/typed.js/docs">Documentation</a> |
|
|
<a href="http://www.mattboldt.com/demos/typed-js">View original demo</a> |
|
|
<a href="http://www.mattboldt.com">View mattboldt.com</a> |
|
|
<a href="http://www.twitter.com/atmattb">Complain to Matt about how awful this is</a>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<h2 id="basic">Basic Demo</h2>
|
|
<div class="type-wrap">
|
|
<div id="typed-strings">
|
|
<span>Typed.js^10 is a <strong>JavaScript</strong> library.</span>
|
|
<p>It <em>types</em> out sentences.</p>
|
|
<p>And then deletes them.</p>
|
|
<p>Try it out!</p>
|
|
</div>
|
|
<span id="typed" style="white-space:pre;"></span>
|
|
</div>
|
|
<button class="toggle">Toggle</button>
|
|
<button class="start">Start</button>
|
|
<button class="stop">Stop</button>
|
|
<button class="reset">Reset</button>
|
|
<button class="destroy">Destroy</button>
|
|
<button class="loop">Toggle Loop</button>
|
|
|
|
<pre>
|
|
<code class="javascript">
|
|
var typed = new Typed("#typed", {
|
|
stringsElement: '#typed-strings',
|
|
typeSpeed: 0,
|
|
backSpeed: 0,
|
|
backDelay: 500,
|
|
startDelay: 1000,
|
|
loop: false,
|
|
onComplete: function(self) { prettyLog('onCmplete ' + self) },
|
|
preStringTyped: function(pos, self) { prettyLog('preStringTyped ' + pos + ' ' + self); },
|
|
onStringTyped: function(pos, self) { prettyLog('onStringTyped ' + pos + ' ' + self) },
|
|
onLastStringBackspaced: function(self) { prettyLog('onLastStringBackspaced ' + self) },
|
|
onTypingPaused: function(pos, self) { prettyLog('onTypingPaused ' + pos + ' ' + self) },
|
|
onTypingResumed: function(pos, self) { prettyLog('onTypingResumed ' + pos + ' ' + self) },
|
|
onReset: function(self) { prettyLog('onReset ' + self) },
|
|
onStop: function(pos, self) { prettyLog('onStop ' + pos + ' ' + self) },
|
|
onStart: function(pos, self) { prettyLog('onStart ' + pos + ' ' + self) },
|
|
onDestroy: function(self) { prettyLog('onDestroy ' + self) }
|
|
});
|
|
</code>
|
|
</pre>
|
|
|
|
|
|
<hr>
|
|
|
|
<h2 id="fade">Fade Out</h2>
|
|
<div class="type-wrap">
|
|
<span id="typed2" style="white-space:pre;"></span>
|
|
</div>
|
|
<button class="loop2">Toggle Loop</button>
|
|
|
|
<pre>
|
|
<code class="javascript">
|
|
var typed2 = new Typed('#typed2', {
|
|
strings: ['Some <i>strings</i> with', 'Some <strong>HTML</strong>', 'Chars &times; &copy;'],
|
|
typeSpeed: 0,
|
|
backSpeed: 0,
|
|
fadeOut: true,
|
|
loop: true
|
|
});
|
|
</code>
|
|
</pre>
|
|
|
|
<hr>
|
|
|
|
<h2 id="smartBack">Smart Backspace</h2>
|
|
<div class="type-wrap">
|
|
<span id="typed3"></span>
|
|
</div>
|
|
|
|
<pre>
|
|
<code class="javascript">
|
|
var typed3 = new Typed('#typed3', {
|
|
strings: ['My strings are: <i>strings</i> with', 'My strings are: <strong>HTML</strong>', 'My strings are: Chars &times; &copy;'],
|
|
typeSpeed: 0,
|
|
backSpeed: 0,
|
|
smartBackspace: true, // this is a default
|
|
loop: true
|
|
});
|
|
</code>
|
|
</pre>
|
|
|
|
<hr>
|
|
|
|
<h2 id="input">In an input</h2>
|
|
<div class="type-wrap">
|
|
<input id="typed4" type="text" style="padding: 10px;">
|
|
</div>
|
|
|
|
<pre>
|
|
<code class="javascript">
|
|
var typed4 = new Typed('#typed4', {
|
|
strings: ['Some strings without', 'Some HTML', 'Chars'],
|
|
typeSpeed: 0,
|
|
backSpeed: 0,
|
|
attr: 'placeholder',
|
|
bindInputFocusEvents: true,
|
|
loop: true
|
|
});
|
|
</code>
|
|
</pre>
|
|
|
|
<hr>
|
|
|
|
<h2 id="shuffle">Shuffled</h2>
|
|
<div class="type-wrap">
|
|
<span id="typed5" style="white-space:pre;"></span>
|
|
</div>
|
|
|
|
<pre>
|
|
<code class="javascript">
|
|
var typed5 = new Typed('#typed5', {
|
|
strings: ['1 Some <i>strings</i> with', '2 Some <strong>HTML</strong>', '3 Chars &times; &copy;'],
|
|
typeSpeed: 0,
|
|
backSpeed: 0,
|
|
cursorChar: '_',
|
|
shuffle: true,
|
|
smartBackspace: false,
|
|
loop: true
|
|
});
|
|
</code>
|
|
</pre>
|
|
|
|
<hr>
|
|
|
|
<h2 id="bulk">Bulk Typing</h2>
|
|
<div class="type-wrap" style="height: 50px;">
|
|
<span id="typed6" style="white-space:pre;"></span>
|
|
</div>
|
|
|
|
<pre>
|
|
<code class="javascript">
|
|
var typed6 = new Typed('#typed6', {
|
|
strings: ['npm install^1000\n `installing components...` ^1000\n `Fetching from source...`'],
|
|
typeSpeed: 40,
|
|
backSpeed: 0,
|
|
loop: true
|
|
});
|
|
</code>
|
|
</pre>
|
|
|
|
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
var _gaq = _gaq || [];
|
|
_gaq.push(['_setAccount', 'UA-11539016-1']);
|
|
_gaq.push(['_trackPageview']);
|
|
|
|
(function() {
|
|
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
|
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
|
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
|
})();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|