195 lines
9.7 KiB
HTML
195 lines
9.7 KiB
HTML
<!DOCTYPE html>
|
|
<!--[if IE 7]><html class="ie ie7" lang="en"><![endif]-->
|
|
<!--[if IE 8]><html class="ie ie8" lang="en"><![endif]-->
|
|
<!--[if IE 9]><html class="ie ie9" lang="en"><![endif]-->
|
|
|
|
<!--[if gte IE 10 | !IE ]><!-->
|
|
<html lang="en">
|
|
<!--<![endif]-->
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
|
|
<meta name="description" content="The Text Plugin for KUTE.js enables string manipulation.">
|
|
<meta name="keywords" content="kute,kute.js,animation,javascript animation,tweening engine,animation engine,text plugin,Javascript,Native Javascript,vanilla javascript,jQuery">
|
|
<meta name="author" content="dnp_theme">
|
|
<link rel="shortcut icon" href="./assets/img/favicon.png">
|
|
<!-- TO DO -->
|
|
|
|
<title>KUTE.js Text Plugin | Javascript Animation Engine</title>
|
|
|
|
<!-- RESET CSS -->
|
|
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
|
|
|
|
<!-- DEMO KUTE CSS -->
|
|
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
|
|
|
|
<!-- Ion Icons -->
|
|
<link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
|
|
|
|
<!-- Synthax highlighter -->
|
|
<link href="./assets/css/prism.css" rel="stylesheet">
|
|
|
|
<!-- Polyfill -->
|
|
<script src="./assets/js/minifill.js">
|
|
</script>
|
|
<!--[if lt IE 9]>
|
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
|
<![endif]-->
|
|
|
|
<!-- legacy browsers support via polyfill, you must remove the above when used
|
|
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
|
|
<style>
|
|
.text-example {
|
|
margin: 0 0 20px;
|
|
font-size: 28px
|
|
}
|
|
|
|
.red {
|
|
color: red
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="site-wrapper">
|
|
|
|
<div class="navbar-wrapper">
|
|
<div class="content-wrap">
|
|
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
|
<ul class="nav">
|
|
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
|
|
<ul class="subnav">
|
|
<li><a href="features.html">Feature Overview</a></li>
|
|
<li><a href="properties.html">Supported Properties</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="btn-group active">
|
|
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
|
|
<ul class="subnav">
|
|
<li><a href="examples.html">Core Engine</a></li>
|
|
<li><a href="css.html">CSS Plugin </a></li>
|
|
<li><a href="svg.html">SVG Plugin </a></li>
|
|
<li class="active"><a href="text.html">Text Plugin </a></li>
|
|
<li><a href="attr.html">Attributes Plugin </a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="btn-group">
|
|
<a href="#" data-function="toggle">API <span class="caret"></span></a>
|
|
<ul class="subnav">
|
|
<li><a href="start.html">Getting Started</a></li>
|
|
<li><a href="api.html">Public Methods</a></li>
|
|
<li><a href="options.html">Tween Options</a></li>
|
|
<li><a href="easing.html">Easing Functions</a></li>
|
|
<li><a href="extend.html">Extend Guide</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="about.html">About</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-wrap">
|
|
<h2>Text Plugin</h2>
|
|
<p>The KUTE.js Text Plugin extends the core engine and enables animation for text elements in two ways: either incrementing or decreasing a number in a given string or writing a string character by
|
|
character with a very cool effect.</p>
|
|
|
|
<pre><code class="language-javascript">// basic synthax for number increments
|
|
var myNumberTween = KUTE.to('selector', {number: 1500}); // this assumes it will start from current number or from 0
|
|
|
|
// OR text writing character by character
|
|
var myTextTween = KUTE.to('selector', {text: 'A text string with other <span>substring</span> should do.'});
|
|
</code></pre>
|
|
|
|
<p>The effects of these two properties are very popular, but pay attention to the fact that every 16 miliseconds the browser has to parse the HTML structure around your target elements so caution is
|
|
advised. With other words, try to limit the number of simultaneus text animations.</p>
|
|
|
|
<h3>Number Incrementing/Decreasing</h3>
|
|
<p>In the first example, let's animate a number, approximatelly as written above:</p>
|
|
<div class="featurettes">
|
|
<p class="text-example">Total number of lines: <span id="numText">0</span></p>
|
|
|
|
<div class="example-buttons">
|
|
<a id="numBtn" class="btn btn-orange" href="javascript:void(0)">Start</a>
|
|
</div>
|
|
</div>
|
|
<p>The button action will toggle the <code>valuesEnd</code> value for the <code>number</code> property, because tweening a number to itself would produce no effect.</p>
|
|
|
|
<h3>Writing Text</h3>
|
|
<p>This feature come with a additional tween option called <kbd>textChars</kbd> for the scrambling text character:</p>
|
|
<ul>
|
|
<li><code>alpha</code> use lowercase alphabetical characters, the default value</li>
|
|
<li><code>upper</code> use UPPERCASE alphabetical characters</li>
|
|
<li><code>numeric</code> use numerical characters</li>
|
|
<li><code>symbols</code> use symbols such as #, $, %, etc.</li>
|
|
<li><code>all</code> use all alpha numeric and symbols.</li>
|
|
<li><code>YOUR CUSTOM STRING</code> use your own custom characters; eg: <code>'KUTE.JS IS #AWESOME'</code>.</li>
|
|
</ul>
|
|
<div class="featurettes">
|
|
<p class="text-example" id="headText">Click the Start button on the right.</p>
|
|
|
|
<div class="example-buttons">
|
|
<a id="headBtn" class="btn btn-blue" href="javascript:void(0)">Start</a>
|
|
</div>
|
|
</div>
|
|
<p>Keep in mind that the <code>yoyo</code> feature will NOT un-write / delete character by character the string, but will write the previous text instead.</p>
|
|
|
|
<h3>Combining Both</h3>
|
|
<div class="featurettes">
|
|
<div class="columns">
|
|
<div class="col2" style="width: 80px">
|
|
<p class="text-example" id="comNum">0</p>
|
|
</div>
|
|
<div class="col2" style="text-align: left">
|
|
<p class="text-example" id="comText">Clicks so far?</p>
|
|
</div>
|
|
</div>
|
|
<div class="example-buttons">
|
|
<a id="comBtn" class="btn btn-olive" href="javascript:void(0)">Start</a>
|
|
</div>
|
|
</div>
|
|
<p>In this example we've used the <code>textChars</code> option with <code>symbols</code> and <code>all</code> values respectively, but combining the two text properties and some other KUTE.js
|
|
features can really spice up some content. Have fun!</p>
|
|
|
|
<ul id="share" class="nav">
|
|
<li>Share </li>
|
|
<li class="hidden-xs"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook"><span class="ion-social-facebook-outline icon"></span></a></li>
|
|
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=Spread the word about %23KUTEJS animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter"><span class="icon ion-social-twitter-outline"></span></a></li>
|
|
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- FOOTER -->
|
|
<footer>
|
|
<div class="content-wrap">
|
|
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
|
|
<p>© 2007 - 2016 · <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
</div>
|
|
<!-- /.site-wrapper -->
|
|
|
|
|
|
|
|
<!-- JavaScript
|
|
================================================== -->
|
|
<!-- Placed at the end of the document so the pages load faster -->
|
|
|
|
<!-- highlighter -->
|
|
<script src="./assets/js/prism.js" type="text/javascript"></script>
|
|
|
|
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
|
|
<script src="./src/kute.min.js"></script>
|
|
<!-- KUTE.js core -->
|
|
<script src="./src/kute-text.min.js"></script>
|
|
<!-- KUTE.js Text Plugin -->
|
|
<script src="./assets/js/scripts.js"></script>
|
|
<!-- global scripts stuff -->
|
|
<script src="./assets/js/text.js"></script>
|
|
<!-- css plugin examples -->
|
|
</body>
|
|
|
|
</html>
|