Create A Text Flow View Using jQuery And Canvas - textflow
File Size: | 11.2 KB |
---|---|
Views Total: | 1453 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

textflow is a simple yet fully configurable jQuery plugin used to create a text flow view that animates an array of text on an HTML5 canvas
element.
How to use it:
1. Create a container for the text flow view.
<div id="textflow"></div>
2. Style the container in the CSS.
#textflow { width: 100%; background: #fff; border-top: 1px solid #333; border-bottom: 1px solid #333; }
3. Call the function 'textFlow' on the container and specify an array of text you want to animate.
$('#textflow').textFlow({ texts: ['Add', 'your', 'own', 'texts', 'here'] });
4. Config the text flow view with the following options.
$('#textflow').textFlow({ width: '100%', height: '200px', top: 0, left: 0, maxTexts: 15, marginTop: 25, marginBottom: 0, texts: ['Add', 'your', 'own', 'texts', 'here'], color: '#000', background: 'transparent', font: 'sans-serif' });
5. API methods.
var myTextflow = $('#textflow').textFlow({ // options here }); // Stop textflow myTextflow.stopTextFlow(); // Start textflow myTextflow.startTextFlow();
This awesome jQuery plugin is developed by mhaze4. For more Advanced Usages, please check the demo page or visit the official website.