Skip to content

Commit

Permalink
better support for non in/out animations and ios performance
Browse files Browse the repository at this point in the history
  • Loading branch information
Jordan Schroter committed Jan 28, 2013
1 parent cb30f91 commit e37e756
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 83 deletions.
4 changes: 2 additions & 2 deletions assests/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ body {
background: #282828;
color: #eee;
font-family: 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
font-size: 14px;
}

Expand Down Expand Up @@ -225,7 +224,7 @@ a:hover {
vertical-align: middle;
display: table-cell;
text-align: center;
visibility: hidden;
/*visibility: hidden;*/
}

.deps {
Expand Down Expand Up @@ -369,4 +368,5 @@ label.checkbox {
padding: 4px 0;
margin-left: 12px;
white-space: nowrap;
vertical-align: top;
}
148 changes: 74 additions & 74 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,81 +16,80 @@
<div class="decal"></div>
<div class="jumbotron">
<div class="container">
<h1 class="glow in">textillate.js</h1>
<p data-in-effect="bounceInDown">
A simple plugin for CSS3 text animations.
</p>
<a href="https://github.com/jschr/textillate" class="btn fade in">Download on Github</a>
</div>
</div>
<div class="decal"></div>
<div class="container fade in">
<div class="about">
<div class="grid grid-pad">
<section class="col-1-3">
<h2>About</h2>
<p>Textillate.js combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text.</p>
</section>
<section class="col-1-3">
<h2>Usage</h2>
<p>Simply include textillate.js and it's dependencies in your project to start creating unqiue effects.</p>
</section>
<section class="col-1-3">
<h2>Credits</h2>
<p>Textillate.js is built on top of the simple, yet amazingly powerful <a href="http://daneden.me/animate">animate.css</a> and <a href="http://letteringjs.com">lettering.js</a> libraries.</p>
</section>
</div>
</div>
<h1 class="glow in tlt">textillate.js</h1>
<p class="tlt" data-in-effect="bounceInDown">
A simple plugin for CSS3 text animations.
</p>
<a href="https://github.com/jschr/textillate" class="btn fade in">Download on Github</a>
</div>
</div>
<div class="decal"></div>
<div class="container fade in">
<div class="about">
<div class="grid grid-pad">
<section class="col-1-1">
<h2>Examples</h2>
<div class="grid grid-pad">

</div>
<section class="col-1-3">
<h2>About</h2>
<p>Textillate.js combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text.</p>
</section>
</div>
<div class="grid grid-pad">
<section class="col-1-1">
<h2>Playground</h2>
<div class="playground grid">
<div class="col-1-1 viewport">
<div class="tlt">Grumpy wizards make toxic brew for the evil Queen and Jack.</div>
</div>
<div class="col-1-1 controls" style="padding-right: 0">
<form class="grid grid-pad">
<div class="control col-1-2">
<label>In Animation</label>
<select data-key="effect" data-type="in" style="width: 50%"></select>
<label class="inline checkbox"><input type="checkbox" data-key="sync" data-type="in" /> Sync</label>
<label class="inline checkbox"><input type="checkbox" data-key="shuffle" data-type="in" /> Shuffle</label>
</div>
<div class="control col-1-2">
<label>Out Animation</label>
<select data-key="effect" data-type="out" style="width: 50%"></select>
<label class="inline checkbox"><input type="checkbox" data-key="sync" data-type="out" /> Sync</label>
<label class="inline checkbox"><input type="checkbox" data-key="shuffle" data-type="out" checked="checked" /> Shuffle</label>
</div>
</form>
</div>
</div>
<section class="col-1-3">
<h2>Usage</h2>
<p>Simply include textillate.js and it's dependencies in your project to start creating unqiue effects.</p>
</section>
</div>
<div class="grid grid-pad">
<section class="col-1-1 deps">
<h2>Dependencies</h2>
<p>Textillate.js depends on the following libraries: </p>
<div>
<ul>
<li><a href="http://jquery.com/">jQuery</a></li>
<li><a href="http://daneden.me/animate/">animate.css</a>, by Daniel Eden</li>
<li><a href="http://letteringjs.com/">lettering.js</a>, by Dave Rupert</li>
</ul>
</div>
<section class="col-1-3">
<h2>Credits</h2>
<p>Textillate.js is built on top of the simple, yet amazingly powerful <a href="http://daneden.me/animate">animate.css</a> and <a href="http://letteringjs.com">lettering.js</a> libraries.</p>
</section>
</div>
</div>
</div>
<div class="grid grid-pad">
<section class="col-1-1">
<h2>Examples</h2>
<div class="grid grid-pad">

</div>
</section>
</div>
<div class="grid grid-pad">
<section class="col-1-1">
<h2>Playground</h2>
<div class="playground grid">
<div class="col-1-1 viewport">
<div class="tlt">Grumpy wizards make toxic brew for the evil Queen and Jack.</div>
</div>
<div class="col-1-1 controls" style="padding-right: 0">
<form class="grid grid-pad">
<div class="control col-1-2">
<label>In Animation</label>
<select data-key="effect" data-type="in" style="width: 50%"></select>
<label class="inline checkbox"><input type="checkbox" data-key="sync" data-type="in" /> Sync</label>
<label class="inline checkbox"><input type="checkbox" data-key="shuffle" data-type="in" /> Shuffle</label>
</div>
<div class="control col-1-2">
<label>Out Animation</label>
<select data-key="effect" data-type="out" style="width: 50%"></select>
<label class="inline checkbox"><input type="checkbox" data-key="sync" data-type="out" /> Sync</label>
<label class="inline checkbox"><input type="checkbox" data-key="shuffle" data-type="out" checked="checked" /> Shuffle</label>
</div>
</form>
</div>
</div>
</section>
</div>
<div class="grid grid-pad">
<section class="col-1-1 deps">
<h2>Dependencies</h2>
<p>Textillate.js depends on the following libraries: </p>
<div>
<ul>
<li><a href="http://jquery.com/">jQuery</a></li>
<li><a href="http://daneden.me/animate/">animate.css</a>, by Daniel Eden</li>
<li><a href="http://letteringjs.com/">lettering.js</a>, by Dave Rupert</li>
</ul>
</div>
</section>
</div>
</div>
</body>
</head>
</html>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
Expand All @@ -100,6 +99,7 @@ <h2>Dependencies</h2>
<script>

$(function (){
//return;
var animateClasses = 'flash bounce shake tada swing wobble pulse flip flipInX flipOutX flipInY flipOutY fadeIn fadeInUp fadeInDown fadeInLeft fadeInRight fadeInUpBig fadeInDownBig fadeInLeftBig fadeInRightBig fadeOut fadeOutUp fadeOutDown fadeOutLeft fadeOutRight fadeOutUpBig fadeOutDownBig fadeOutLeftBig fadeOutRightBig bounceIn bounceInDown bounceInUp bounceInLeft bounceInRight bounceOut bounceOutDown bounceOutUp bounceOutLeft bounceOutRight rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight hinge rollIn rollOut';

var $form = $('.playground form')
Expand All @@ -120,17 +120,17 @@ <h2>Dependencies</h2>
};

$.each(animateClasses.split(' '), function (i, value) {
var type = ''
var type = '[data-type]'
, option = '<option value="' + value + '">' + value + '</option>';

if (/Out/.test(value) || value === 'hinge') {
type = 'out';
type = '[data-type="out"]';
} else if (/In/.test(value)) {
type = 'in';
}
type = '[data-type="in"]';
}

if (type) {
$form.find('[data-key="effect"][data-type="' + type + '"]').append(option);
$form.find('[data-key="effect"]' + type).append(option);
}
});

Expand Down
15 changes: 8 additions & 7 deletions jquery.textillate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,12 +119,6 @@
base.start = function (index) {
var $next = base.$texts.find(':nth-child(' + (index || 1) + ')');

if (isInEffect(base.options.in.effect)) {
base.$current.css('visibility', 'hidden');
} else if (isOutEffect(base.options.in.effect)) {
base.$current.css('visibility', 'visible');
}

(function run ($elem) {
var options = $.extend({}, base.options, getData($elem));

Expand All @@ -133,7 +127,14 @@
.lettering('words');

base.$current.find('[class^="word"]')
.css('display', 'inline-block')
.css({
'display': 'inline-block',
// fix for poor ios performance
'-webkit-transform': 'translate3d(0,0,0)',
'-moz-transform': 'translate3d(0,0,0)',
'-o-transform': 'translate3d(0,0,0)',
'transform': 'translate3d(0,0,0)'
})
.each(function () { $(this).lettering() });

var $chars = base.$current.find('[class^="char"]')
Expand Down

0 comments on commit e37e756

Please sign in to comment.