Create A Text Flow View Using jQuery And Canvas - textflow

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

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.