textillate

WebJar for textillate

License

License

MIT
Categories

Categories

Github Development Tools Version Controls
GroupId

GroupId

org.webjars.bower
ArtifactId

ArtifactId

github-com-jschr-textillate
Last Version

Last Version

0.4.0
Release Date

Release Date

Type

Type

jar
Description

Description

textillate
WebJar for textillate
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/jschr/textillate

Download github-com-jschr-textillate

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.bower/github-com-jschr-textillate/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>github-com-jschr-textillate</artifactId>
    <version>0.4.0</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.bower/github-com-jschr-textillate/
implementation 'org.webjars.bower:github-com-jschr-textillate:0.4.0'
// https://jarcasting.com/artifacts/org.webjars.bower/github-com-jschr-textillate/
implementation ("org.webjars.bower:github-com-jschr-textillate:0.4.0")
'org.webjars.bower:github-com-jschr-textillate:jar:0.4.0'
<dependency org="org.webjars.bower" name="github-com-jschr-textillate" rev="0.4.0">
  <artifact name="github-com-jschr-textillate" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.bower', module='github-com-jschr-textillate', version='0.4.0')
)
libraryDependencies += "org.webjars.bower" % "github-com-jschr-textillate" % "0.4.0"
[org.webjars.bower/github-com-jschr-textillate "0.4.0"]

Dependencies

compile (3)

Group / Artifact Type Version
org.webjars.bower : jquery jar [1.6.2,)
org.webjars.bower » letteringjs jar [0.6.1,)
org.webjars.bower : animate.css jar [3.0.0,)

Project Modules

There are no modules declared in this project.

Textillate.js v0.4.1 JS.ORG

See a live demo here.

Textillate.js combines some awesome libraries to provide an easy-to-use plugin for applying CSS3 animations to any text.

Usage

Let's start with the basic markup:

<h1 class="tlt">My Title</h1>

And your JavaScript should look like this:

$(function () {
	$('.tlt').textillate();
})

This will animate using the default options. To change the defaults, you can either use the html data api:

<h1 class="tlt" data-in-effect="rollIn">Title</h1>

or pass in options on initialization (see full list of options below):

$('.tlt').textillate({ in: { effect: 'rollIn' } });

You can also tell textillate.js to animate a list with the following markup:

<h1 class="tlt">
	<ul class="texts">
		<li data-out-effect="fadeOut" data-out-shuffle="true">Some Title</li>
		<li data-in-effect="fadeIn">Another Title</li>
	</ul>
</h1>
$('.tlt').textillate();

Notice that you can control the animation parameters on each text (<li>) using the data api.

Dependencies

To start using textillate.js, you will need the following:

Options

$('.tlt').textillate({
  // the default selector to use when detecting multiple texts to animate
  selector: '.texts',

  // enable looping
  loop: false,

  // sets the minimum display time for each text before it is replaced
  minDisplayTime: 2000,

  // sets the initial delay before starting the animation
  // (note that depending on the in effect you may need to manually apply
  // visibility: hidden to the element before running this plugin)
  initialDelay: 0,

  // set whether or not to automatically start animating
  autoStart: true,

  // custom set of 'in' effects. This effects whether or not the
  // character is shown/hidden before or after an animation
  inEffects: [],

  // custom set of 'out' effects
  outEffects: [ 'hinge' ],

  // in animation settings
  in: {
  	// set the effect name
    effect: 'fadeInLeftBig',

    // set the delay factor applied to each consecutive character
    delayScale: 1.5,

    // set the delay between each character
    delay: 50,

    // set to true to animate all the characters at the same time
    sync: false,

    // randomize the character sequence
    // (note that shuffle doesn't make sense with sync = true)
    shuffle: false,

    // reverse the character sequence
    // (note that reverse doesn't make sense with sync = true)
    reverse: false,

    // callback that executes once the animation has finished
    callback: function () {}
  },

  // out animation settings.
  out: {
    effect: 'hinge',
    delayScale: 1.5,
    delay: 50,
    sync: false,
    shuffle: false,
    reverse: false,
    callback: function () {}
  },

  // callback that executes once textillate has finished
  callback: function () {},

  // set the type of token to animate (available types: 'char' and 'word')
  type: 'char'
});

Events

Textillate triggers the following events:

  • start.tlt - triggered when textillate starts
  • inAnimationBegin.tlt - triggered when the in animation begins
  • inAnimationEnd.tlt - triggered when the in animation ends
  • outAnimationBegin.tlt - triggered when the out animation begins
  • outAnimationEnd.tlt - triggered when the out animation ends
  • end.tlt - triggered when textillate ends
$('.tlt').on('inAnimationBegin.tlt', function () {
  // do something
});

Methods

  • $element.textillate('start') - Manually start/restart textillate
  • $element.textillate('stop') - Manually pause/stop textillate
  • $element.textillate('in') - Trigger the current text's in animation
  • $element.textillate('out') - Trigger the current text's out animation

Code Samples

Versions

Version
0.4.0