Skip to content

WhiteFangs/textroll

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 

Textroll

Textroll is a small javascript module to animate text replacement with a rolling effect for each character.

The characters "roll" through the set of characters they belong to until they reach the character by which they are replaced in the new text.

Example

An image is worth a thousands words, so a gif probably does worth more:

The transition works especially well on replacement of text with the same beginning:

The 'progressive' option allows you to make a train-station-board-like effect on the text change:

Install

Simply add the textroll.js script file to your page

<script src="./textroll.js"></script>

Usage

Simply call the replace function with the element containing the text to replace and the new text.

// #myElement contains the text to replace
var element = document.querySelector("#myElement");
// textroll.replace replaces the text inside the element with animation
textroll.replace(element, "New text inside the element"); 

Options

You can initialize textroll with options, here are the default values for the available options:

var defaultOptions = {
	'interval' : 100, // milliseconds between each iterations of replacement
	'progressive' : false, // if true, character replacement expands with time from first character to whole text
	'alphabet' : 'abcdefghijklmnopqrstuvwxyz', // string of successive characters to add
	'numbers' : '0123456789', // string of successive characters to add
	'punctuation' : '"\'(-),?;.:!', // string of successive characters to add
	'specials' : '&#~{[|`_\\^@]=}+°<>/§*%¨$£¤', // string of successive characters to add
	'addCorpora' : {'corpusName' : ''}, // add new corpus, object with key: corpus name, value: strings of successive characters,
	'spaceCorpus' : 'alphabet', // string defining which corpus contains space character
	'changeCase' : 'end' // 'beginning' or 'end' for applying case change
}

// use init to override default options with your own
textroll.init({
	'interval' : 500, 
	'progressive' : true,
	'spaceCorpus' : 'punctuation',
	'addCorpora': {'cedilla' : 'çş'}
	'changeCase' : 'beginning'
});

About

A small javascript module to animate text replacement by rolling through the characters until reaching the new one

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published