diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..7a1537b --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +.idea +node_modules diff --git a/README.md b/README.md index b083dca..fe03320 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,10 @@ -#Textillate.js v0.4.0 [![JS.ORG](https://img.shields.io/badge/js.org-textillate-ffb400.svg?style=flat-square)](http://js.org) +# Textillate.js v0.4.1 [![JS.ORG](https://img.shields.io/badge/js.org-textillate-ffb400.svg?style=flat-square)](http://js.org) See a live demo [here](http://textillate.js.org/). Textillate.js combines some awesome libraries to provide an easy-to-use plugin for applying CSS3 animations to any text. -##Usage +## Usage Let's start with the basic markup: @@ -37,7 +37,7 @@ You can also tell textillate.js to animate a list with the following markup: ```html

@@ -49,7 +49,7 @@ $('.tlt').textillate(); Notice that you can control the animation parameters on each text (`
  • `) using the data api. -##Dependencies +## Dependencies To start using textillate.js, you will need the following: * [jQuery](http://jquery.com/download/) @@ -57,60 +57,60 @@ To start using textillate.js, you will need the following: * [animate.css](https://github.com/daneden/animate.css) -##Options +## Options ```js $('.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 + // (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 + + // 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 + + // randomize the character sequence // (note that shuffle doesn't make sense with sync = true) shuffle: false, - // reverse the character sequence + // 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', @@ -122,7 +122,7 @@ $('.tlt').textillate({ callback: function () {} }, - // callback that executes once textillate has finished + // callback that executes once textillate has finished callback: function () {}, // set the type of token to animate (available types: 'char' and 'word') @@ -130,7 +130,7 @@ $('.tlt').textillate({ }); ``` -##Events +## Events Textillate triggers the following events: @@ -138,7 +138,7 @@ Textillate triggers the following events: * `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 in animation ends +* `outAnimationEnd.tlt` - triggered when the out animation ends * `end.tlt` - triggered when textillate ends ```js @@ -147,12 +147,12 @@ $('.tlt').on('inAnimationBegin.tlt', function () { }); ``` -##Methods +## 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 +## Code Samples * [textillate.js + bounce.js](http://codepen.io/jschr/pen/GaJCi) diff --git a/bower.json b/bower.json index c24572f..745c6ff 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "textillate", - "version": "0.4.0", + "version": "0.4.1", "homepage": "https://github.com/jschr/textillate", "authors": [ "Jordan Schroter " diff --git a/index.html b/index.html index 2cd55e1..475b86e 100644 --- a/index.html +++ b/index.html @@ -19,26 +19,26 @@

    textillate.js

    Download on Github
    -    - -
    @@ -76,8 +76,8 @@

    Playground

    @@ -147,12 +147,12 @@

    Dependencies

    , $viewport = $('.playground .viewport'); var getFormData = function () { - var data = { - loop: true, - in: { callback: log('in callback called.') }, + var data = { + loop: true, + in: { callback: log('in callback called.') }, out: { callback: log('out callback called.') } }; - + $form.find('[data-key="effect"]').each(function () { var $this = $(this) , key = $this.data('key') @@ -183,10 +183,10 @@

    Dependencies

    type = '[data-type="out"]'; } else if (/In/.test(value)) { type = '[data-type="in"]'; - } + } if (type) { - $form.find('[data-key="effect"]' + type).append(option); + $form.find('[data-key="effect"]' + type).append(option); } }); @@ -196,7 +196,7 @@

    Dependencies

    $('.jumbotron h1') .fitText(0.5) .textillate({ in: { effect: 'flipInY' }}); - + $('.jumbotron p') .fitText(3.2, { maxFontSize: 18 }) .textillate({ initialDelay: 1000, in: { delay: 3, shuffle: true } }); @@ -216,7 +216,7 @@

    Dependencies

    .on('outAnimationBegin.tlt', log('outAnimationBegin.tlt triggered.')) .on('outAnimationEnd.tlt', log('outAnimationEnd.tlt triggered.')) .on('end.tlt', log('end.tlt')); - + $form.on('change', function () { var obj = getFormData(); $tlt.textillate(obj); diff --git a/jquery.textillate.js b/jquery.textillate.js index 23943a9..e81fe8e 100644 --- a/jquery.textillate.js +++ b/jquery.textillate.js @@ -56,7 +56,7 @@ .css('visibility', 'visible') .show(); - $t.one('animationend webkitAnimationEnd oAnimationEnd', function () { + $t.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () { $t.removeClass('animated ' + effect); cb && cb(); }); @@ -148,6 +148,7 @@ $elem.addClass('current'); base.triggerEvent('inAnimationBegin'); + $element.attr('data-active', $elem.data('id')); base.$current .html($elem.html()) @@ -196,6 +197,7 @@ animateTokens($tokens, options.out, function () { $elem.removeClass('current'); base.triggerEvent('outAnimationEnd'); + $element.removeAttr('data-active'); if (options.out.callback) options.out.callback(); if (cb) cb(base); }); @@ -205,26 +207,26 @@ setTimeout(function () { base.triggerEvent('start'); - (function run (index) { - base.in(index, function () { - var length = base.$texts.children().length; - - index += 1; - - if (!base.options.loop && index >= length) { - if (base.options.callback) base.options.callback(); - base.triggerEvent('end'); - } else { - index = index % length; - - base.timeoutRun = setTimeout(function () { - base.out(function () { - run(index) - }); - }, base.options.minDisplayTime); - } - }); - }(index || 0)); + (function run (index) { + base.in(index, function () { + var length = base.$texts.children().length; + + index += 1; + + if (!base.options.loop && index >= length) { + if (base.options.callback) base.options.callback(); + base.triggerEvent('end'); + } else { + index = index % length; + + base.timeoutRun = setTimeout(function () { + base.out(function () { + run(index) + }); + }, base.options.minDisplayTime); + } + }); + }(index || 0)); }, base.options.initialDelay); }; diff --git a/package.json b/package.json new file mode 100644 index 0000000..745c6ff --- /dev/null +++ b/package.json @@ -0,0 +1,30 @@ +{ + "name": "textillate", + "version": "0.4.1", + "homepage": "https://github.com/jschr/textillate", + "authors": [ + "Jordan Schroter " + ], + "description": "A simple plugin for CSS3 text animations", + "main": "jquery.textillate.js", + "keywords": [ + "textillate", + "css3", + "animation", + "text", + "lettering" + ], + "license": "MIT", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ], + "dependencies": { + "jquery": ">= 1.6.2", + "letteringjs": ">= 0.6.1", + "animate.css": ">= 3.0.0" + } +}