Create A Text Flow View Using jQuery And Canvas - textflow
| File Size: | 11.2 KB |
|---|---|
| Views Total: | 1504 |
| 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.











