added lib_textillate
This commit is contained in:
Messerbill
commit
5248bfd044
2
.gitattributes
vendored
Normal file
2
.gitattributes
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
index.html linguist-vendored
|
||||
assets/* linguist-vendored
|
||||
3
autoload.inc
Normal file
3
autoload.inc
Normal file
@ -0,0 +1,3 @@
|
||||
<?php
|
||||
\SYSTEM\autoload::registerFolder(dirname(__FILE__),'LIB');
|
||||
\LIB\lib_controll::register('\LIB\lib_textillate');
|
||||
19
lib/LICENSE
Normal file
19
lib/LICENSE
Normal file
@ -0,0 +1,19 @@
|
||||
Copyright (C) 2014 Jordan Schroter
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
158
lib/README.md
Normal file
158
lib/README.md
Normal file
@ -0,0 +1,158 @@
|
||||
#Textillate.js v0.4.0 [](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
|
||||
|
||||
Let's start with the basic markup:
|
||||
|
||||
```html
|
||||
<h1 class="tlt">My Title</h1>
|
||||
```
|
||||
|
||||
And your JavaScript should look like this:
|
||||
|
||||
```js
|
||||
$(function () {
|
||||
$('.tlt').textillate();
|
||||
})
|
||||
```
|
||||
|
||||
This will animate using the default options. To change the defaults, you can either use the html data api:
|
||||
|
||||
```html
|
||||
<h1 class="tlt" data-in-effect="rollIn">Title</h1>
|
||||
```
|
||||
|
||||
or pass in options on initialization (see full list of options below):
|
||||
|
||||
```js
|
||||
$('.tlt').textillate({ in: { effect: 'rollIn' } });
|
||||
```
|
||||
|
||||
You can also tell textillate.js to animate a list with the following markup:
|
||||
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
|
||||
```js
|
||||
$('.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:
|
||||
|
||||
* [jQuery](http://jquery.com/download/)
|
||||
* [lettering.js](https://github.com/davatron5000/Lettering.js)
|
||||
* [animate.css](https://github.com/daneden/animate.css)
|
||||
|
||||
|
||||
##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
|
||||
// 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 in animation ends
|
||||
* `end.tlt` - triggered when textillate ends
|
||||
|
||||
```js
|
||||
$('.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
|
||||
* [textillate.js + bounce.js](http://codepen.io/jschr/pen/GaJCi)
|
||||
3263
lib/assets/animate.css
vendored
Normal file
3263
lib/assets/animate.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
43
lib/assets/jquery.fittext.js
Normal file
43
lib/assets/jquery.fittext.js
Normal file
@ -0,0 +1,43 @@
|
||||
/*global jQuery */
|
||||
/*!
|
||||
* FitText.js 1.1
|
||||
*
|
||||
* Copyright 2011, Dave Rupert http://daverupert.com
|
||||
* Released under the WTFPL license
|
||||
* http://sam.zoy.org/wtfpl/
|
||||
*
|
||||
* Date: Thu May 05 14:23:00 2011 -0600
|
||||
*/
|
||||
|
||||
(function( $ ){
|
||||
|
||||
$.fn.fitText = function( kompressor, options ) {
|
||||
|
||||
// Setup options
|
||||
var compressor = kompressor || 1,
|
||||
settings = $.extend({
|
||||
'minFontSize' : Number.NEGATIVE_INFINITY,
|
||||
'maxFontSize' : Number.POSITIVE_INFINITY
|
||||
}, options);
|
||||
|
||||
return this.each(function(){
|
||||
|
||||
// Store the object
|
||||
var $this = $(this);
|
||||
|
||||
// Resizer() resizes items based on the object width divided by the compressor * 10
|
||||
var resizer = function () {
|
||||
$this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
|
||||
};
|
||||
|
||||
// Call once to set.
|
||||
resizer();
|
||||
|
||||
// Call on resize. Opera debounces their resize by default.
|
||||
$(window).on('resize', resizer);
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
})( jQuery );
|
||||
66
lib/assets/jquery.lettering.js
Normal file
66
lib/assets/jquery.lettering.js
Normal file
@ -0,0 +1,66 @@
|
||||
/*global jQuery */
|
||||
/*!
|
||||
* Lettering.JS 0.6.1
|
||||
*
|
||||
* Copyright 2010, Dave Rupert http://daverupert.com
|
||||
* Released under the WTFPL license
|
||||
* http://sam.zoy.org/wtfpl/
|
||||
*
|
||||
* Thanks to Paul Irish - http://paulirish.com - for the feedback.
|
||||
*
|
||||
* Date: Mon Sep 20 17:14:00 2010 -0600
|
||||
*/
|
||||
(function($){
|
||||
function injector(t, splitter, klass, after) {
|
||||
var a = t.text().split(splitter), inject = '';
|
||||
if (a.length) {
|
||||
$(a).each(function(i, item) {
|
||||
inject += '<span class="'+klass+(i+1)+'">'+item+'</span>'+after;
|
||||
});
|
||||
t.empty().append(inject);
|
||||
}
|
||||
}
|
||||
|
||||
var methods = {
|
||||
init : function() {
|
||||
|
||||
return this.each(function() {
|
||||
injector($(this), '', 'char', '');
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
words : function() {
|
||||
|
||||
return this.each(function() {
|
||||
injector($(this), ' ', 'word', ' ');
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
lines : function() {
|
||||
|
||||
return this.each(function() {
|
||||
var r = "eefec303079ad17405c889e092e105b0";
|
||||
// Because it's hard to split a <br/> tag consistently across browsers,
|
||||
// (*ahem* IE *ahem*), we replaces all <br/> instances with an md5 hash
|
||||
// (of the word "split"). If you're trying to use this plugin on that
|
||||
// md5 hash string, it will fail because you're being ridiculous.
|
||||
injector($(this).children("br").replaceWith(r).end(), r, 'line', '');
|
||||
});
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.lettering = function( method ) {
|
||||
// Method calling logic
|
||||
if ( method && methods[method] ) {
|
||||
return methods[ method ].apply( this, [].slice.call( arguments, 1 ));
|
||||
} else if ( method === 'letters' || ! method ) {
|
||||
return methods.init.apply( this, [].slice.call( arguments, 0 ) ); // always pass an array
|
||||
}
|
||||
$.error( 'Method ' + method + ' does not exist on jQuery.lettering' );
|
||||
return this;
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
398
lib/assets/style.css
Normal file
398
lib/assets/style.css
Normal file
@ -0,0 +1,398 @@
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: #282828;
|
||||
color: #eee;
|
||||
font-family: 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 10px 0;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.8em;
|
||||
font-weight: 200;
|
||||
color: #888;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #00aaee;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #0077a2;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.decal {
|
||||
height: 2px;
|
||||
background-color: #000;
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 940px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* EFFECTS
|
||||
***************/
|
||||
|
||||
.glow {
|
||||
text-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
||||
-webkit-transition: text-shadow 1s linear;
|
||||
-moz-transition: text-shadow 1s linear;
|
||||
-o-transition: text-shadow 1s linear;
|
||||
transition: text-shadow 1s linear;
|
||||
}
|
||||
|
||||
.glow.in {
|
||||
text-shadow:
|
||||
0.025em 0.025em 0.025em rgba(0, 0, 0, 0.8),
|
||||
0 0 0.5em rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.fade {
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 1s linear;
|
||||
-moz-transition: opacity 1s linear;
|
||||
-o-transition: opacity 1s linear;
|
||||
transition: opacity 1s linear;
|
||||
}
|
||||
|
||||
.fade.in {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* BUTTONS
|
||||
***************/
|
||||
|
||||
.btn {
|
||||
color: #fff;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
font-weight: 200;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
border-radius: 0.5em;
|
||||
padding: 0.8em 1.2em;
|
||||
background-color: #ED303C;
|
||||
background-image: -moz-linear-gradient(top, #ED303C, #8D121A);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ED303C), to(#8D121A));
|
||||
background-image: -webkit-linear-gradient(top, #ED303C, #8D121A);
|
||||
background-image: -o-linear-gradient(top, #ED303C, #8D121A);
|
||||
background-image: linear-gradient(to bottom, #ED303C, #8D121A);
|
||||
background-repeat: repeat-x;
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
|
||||
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
|
||||
}
|
||||
|
||||
.btn:hover,
|
||||
.btn-primary:active,
|
||||
.btn-primary.active,
|
||||
.btn-primary.disabled,
|
||||
.btn-primary[disabled] {
|
||||
text-decoration: none;
|
||||
color: #ddd;
|
||||
background-color: #8D121A;
|
||||
background-position: 0 -15px;
|
||||
-webkit-transition: background-position 0.1s linear;
|
||||
-moz-transition: background-position 0.1s linear;
|
||||
-o-transition: background-position 0.1s linear;
|
||||
transition: background-position 0.1s linear;
|
||||
}
|
||||
|
||||
.btn.active,
|
||||
.btn:active {
|
||||
background-image: none;
|
||||
outline: 0;
|
||||
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* MARKETING
|
||||
***************/
|
||||
|
||||
.jumbotron {
|
||||
position: relative;
|
||||
padding: 3em 0;
|
||||
text-align: center;
|
||||
background: #242424;
|
||||
}
|
||||
|
||||
.jumbotron h1 {
|
||||
color: #fff;
|
||||
font-family: Rokkitt;
|
||||
font-size: 13em;
|
||||
font-weight: 200;
|
||||
text-shadow: 0.025em 0.025em 0.025em rgba(0, 0, 0, 0.8);
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.jumbotron h1 .char11 {
|
||||
color: #ED303C;
|
||||
}
|
||||
|
||||
.jumbotron p {
|
||||
margin-top: -1em;
|
||||
letter-spacing: 0.15em;
|
||||
color: #ccc;
|
||||
font-size: 1.25em;
|
||||
font-weight: 200;
|
||||
text-shadow: 0.1em 0.1em 0.1em rgba(0, 0, 0, 0.8);
|
||||
visibility: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.jumbotron .btn {
|
||||
margin-top: 2em;
|
||||
margin-bottom: 2em;
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
.about {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.about p {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.playground {
|
||||
background: #242424;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.playground .controls {
|
||||
margin-bottom: 0;
|
||||
background: #282828;
|
||||
border-radius: 0 0 4px 4px;
|
||||
border: 1px solid #0c0c0c;
|
||||
border-top: 1px solid #333;
|
||||
}
|
||||
|
||||
.playground .controls form {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.playground .controls select {
|
||||
width: 48%;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.playground .controls select {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.playground .viewport {
|
||||
display: table;
|
||||
min-height: 10em;
|
||||
padding: 20px;
|
||||
border-radius: 4px 4px 0 0;
|
||||
border: 1px solid #0c0c0c;
|
||||
overflow: hidden;
|
||||
-webkit-box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.5);
|
||||
-moz-box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.playground .viewport .tlt {
|
||||
color: #fff;
|
||||
font-size: 1.5em;
|
||||
font-weight: 200;
|
||||
letter-spacing: 1px;
|
||||
padding: 20px 0;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
display: table-cell;
|
||||
text-align: center;
|
||||
/*visibility: hidden;*/
|
||||
}
|
||||
|
||||
.deps {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.deps ul {
|
||||
list-style-type: square;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.deps ul li {
|
||||
line-height: 1.5em
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
/* GRID
|
||||
***************/
|
||||
|
||||
.grid:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
[class*='col-'] {
|
||||
float: left;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.grid [class*='col-']:last-of-type {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.col-1-1 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.col-2-3 {
|
||||
width: 66.66%;
|
||||
}
|
||||
|
||||
.col-1-3 {
|
||||
width: 33.33%;
|
||||
}
|
||||
|
||||
.col-1-2 {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.col-1-4 {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.col-3-4 {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.col-4-5 {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.col-1-6 {
|
||||
width: 16.66%;
|
||||
}
|
||||
|
||||
.col-1-8 {
|
||||
width: 12.5%;
|
||||
}
|
||||
|
||||
.grid-pad {
|
||||
padding-left: 20px
|
||||
}
|
||||
|
||||
.grid-pad [class*='col-'] {
|
||||
padding-top: 20px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.grid-pad [class*='col-']:last-of-type {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
[class*='col-'] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* FORM
|
||||
*********/
|
||||
|
||||
form .control {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
select,
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
height: 30px;
|
||||
padding: 4px 6px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #555555;
|
||||
vertical-align: middle;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
background-color: #ddd;
|
||||
border: 1px solid #ccc;
|
||||
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
|
||||
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
|
||||
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
|
||||
transition: border linear 0.2s, box-shadow linear 0.2s;
|
||||
}
|
||||
|
||||
input[type="text"]:focus {
|
||||
background-color: #fff;
|
||||
border-color: #8D121A;
|
||||
outline: 0;
|
||||
-webkit-box-shadow: inset 0 1px 1px #8D121A, 0 0 8px #ED303C;
|
||||
-moz-box-shadow: inset 0 1px 1px #8D121A, 0 0 8px #ED303C;
|
||||
box-shadow: inset 0 1px 1px #8D121A, 0 0 8px #ED303C;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
label.inline {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
label.checkbox {
|
||||
padding: 4px 0;
|
||||
margin-right: 10px;
|
||||
white-space: nowrap;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* CODE
|
||||
**************/
|
||||
|
||||
pre code {
|
||||
background: transparent;
|
||||
}
|
||||
30
lib/bower.json
Normal file
30
lib/bower.json
Normal file
@ -0,0 +1,30 @@
|
||||
{
|
||||
"name": "textillate",
|
||||
"version": "0.4.0",
|
||||
"homepage": "https://github.com/jschr/textillate",
|
||||
"authors": [
|
||||
"Jordan Schroter <jordan.schroter@gmail.com>"
|
||||
],
|
||||
"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"
|
||||
}
|
||||
}
|
||||
232
lib/index.html
vendored
Normal file
232
lib/index.html
vendored
Normal file
@ -0,0 +1,232 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Textillate.js</title>
|
||||
<link href="assets/animate.css" rel="stylesheet">
|
||||
<link href="assets/style.css" rel="stylesheet">
|
||||
<link href='http://fonts.googleapis.com/css?family=Rokkitt' rel='stylesheet' type='text/css'>
|
||||
<body>
|
||||
<div class="decal"></div>
|
||||
<div class="jumbotron">
|
||||
<div class="container">
|
||||
<h1 class="glow in tlt">textillate.js</h1>
|
||||
<p class="tlt" data-in-effect="bounceInDown">
|
||||
A simple plugin for CSS3 text animations.
|
||||
</p>
|
||||
<div>
|
||||
<a href="https://github.com/jschr/textillate" class="btn fade in">Download on Github</a>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
class="twitter-share-button"
|
||||
href="https://twitter.com/share"
|
||||
data-text="Textillate.js - A simple plugin for CSS3 text animations"
|
||||
data-url="http://textillate.js.org"
|
||||
data-via="_jschr">
|
||||
Tweet
|
||||
</a>
|
||||
<iframe
|
||||
src="https://ghbtns.com/github-btn.html?user=jschr&repo=textillate&type=star&count=true&v=2"
|
||||
frameborder="0"
|
||||
scrolling="0"
|
||||
width="100px"
|
||||
height="20px">
|
||||
</iframe>
|
||||
<iframe
|
||||
src="https://ghbtns.com/github-btn.html?user=jschr&repo=textillate&type=fork&count=true"
|
||||
frameborder="0"
|
||||
scrolling="0"
|
||||
width="90px"
|
||||
height="20px">
|
||||
</iframe>
|
||||
</div>
|
||||
</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>
|
||||
<!--<div class="grid grid-pad">
|
||||
<section class="col-1-1">
|
||||
<h2>Examples</h2>
|
||||
<pre><code class="xml"><span id="example">Some Text</span></code></pre>
|
||||
<pre><code class="javascript">$('#example').textillate()</code></pre>
|
||||
</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">
|
||||
<ul class="texts" style="display: none">
|
||||
<li>Grumpy wizards make toxic brew for the evil Queen and Jack.</li>
|
||||
<li>The quick brown fox jumps over the lazy dog.</li>
|
||||
</ul>
|
||||
</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"></select>
|
||||
<select data-key="type" data-type="in">
|
||||
<option value="">sequence</option>
|
||||
<option value="reverse">reverse</option>
|
||||
<option value="sync">sync</option>
|
||||
<option value="shuffle">shuffle</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="control col-1-2">
|
||||
<label>Out Animation</label>
|
||||
<select data-key="effect" data-type="out"></select>
|
||||
<select data-key="type" data-type="out">
|
||||
<option value="">sequence</option>
|
||||
<option value="reverse">reverse</option>
|
||||
<option value="sync">sync</option>
|
||||
<option selected="selected" value="shuffle">shuffle</option>
|
||||
</select>
|
||||
</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>
|
||||
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
|
||||
<script src="assets/jquery.fittext.js"></script>
|
||||
<script src="assets/jquery.lettering.js"></script>
|
||||
<script src="http://yandex.st/highlightjs/7.3/highlight.min.js"></script>
|
||||
<script src="jquery.textillate.js"></script>
|
||||
<script>hljs.initHighlightingOnLoad();</script>
|
||||
<script>
|
||||
$(function (){
|
||||
var log = function (msg) {
|
||||
return function () {
|
||||
if (console) console.log(msg);
|
||||
}
|
||||
}
|
||||
$('code').each(function () {
|
||||
var $this = $(this);
|
||||
$this.text($this.html());
|
||||
})
|
||||
|
||||
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')
|
||||
, $viewport = $('.playground .viewport');
|
||||
|
||||
var getFormData = function () {
|
||||
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')
|
||||
, type = $this.data('type');
|
||||
|
||||
data[type][key] = $this.val();
|
||||
});
|
||||
|
||||
$form.find('[data-key="type"]').each(function () {
|
||||
var $this = $(this)
|
||||
, key = $this.data('key')
|
||||
, type = $this.data('type')
|
||||
, val = $this.val();
|
||||
|
||||
data[type].shuffle = (val === 'shuffle');
|
||||
data[type].reverse = (val === 'reverse');
|
||||
data[type].sync = (val === 'sync');
|
||||
});
|
||||
|
||||
return data;
|
||||
};
|
||||
|
||||
$.each(animateClasses.split(' '), function (i, value) {
|
||||
var type = '[data-type]'
|
||||
, option = '<option value="' + value + '">' + value + '</option>';
|
||||
|
||||
if (/Out/.test(value) || value === 'hinge') {
|
||||
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"][data-type="in"]').val('fadeInLeftBig');
|
||||
$form.find('[data-key="effect"][data-type="out"]').val('hinge');
|
||||
|
||||
$('.jumbotron h1')
|
||||
.fitText(0.5)
|
||||
.textillate({ in: { effect: 'flipInY' }});
|
||||
|
||||
$('.jumbotron p')
|
||||
.fitText(3.2, { maxFontSize: 18 })
|
||||
.textillate({ initialDelay: 1000, in: { delay: 3, shuffle: true } });
|
||||
|
||||
setTimeout(function () {
|
||||
$('.fade').addClass('in');
|
||||
}, 250);
|
||||
|
||||
setTimeout(function () {
|
||||
$('h1.glow').removeClass('in');
|
||||
}, 2000);
|
||||
|
||||
var $tlt = $viewport.find('.tlt')
|
||||
.on('start.tlt', log('start.tlt triggered.'))
|
||||
.on('inAnimationBegin.tlt', log('inAnimationBegin.tlt triggered.'))
|
||||
.on('inAnimationEnd.tlt', log('inAnimationEnd.tlt triggered.'))
|
||||
.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);
|
||||
}).trigger('change');
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
<script>
|
||||
window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,"script","twitter-wjs"));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
287
lib/jquery.textillate.js
Normal file
287
lib/jquery.textillate.js
Normal file
@ -0,0 +1,287 @@
|
||||
/*
|
||||
* textillate.js
|
||||
* http://jschr.github.com/textillate
|
||||
* MIT licensed
|
||||
*
|
||||
* Copyright (C) 2012-2013 Jordan Schroter
|
||||
*/
|
||||
|
||||
(function ($) {
|
||||
"use strict";
|
||||
|
||||
function isInEffect (effect) {
|
||||
return /In/.test(effect) || $.inArray(effect, $.fn.textillate.defaults.inEffects) >= 0;
|
||||
};
|
||||
|
||||
function isOutEffect (effect) {
|
||||
return /Out/.test(effect) || $.inArray(effect, $.fn.textillate.defaults.outEffects) >= 0;
|
||||
};
|
||||
|
||||
|
||||
function stringToBoolean(str) {
|
||||
if (str !== "true" && str !== "false") return str;
|
||||
return (str === "true");
|
||||
};
|
||||
|
||||
// custom get data api method
|
||||
function getData (node) {
|
||||
var attrs = node.attributes || []
|
||||
, data = {};
|
||||
|
||||
if (!attrs.length) return data;
|
||||
|
||||
$.each(attrs, function (i, attr) {
|
||||
var nodeName = attr.nodeName.replace(/delayscale/, 'delayScale');
|
||||
if (/^data-in-*/.test(nodeName)) {
|
||||
data.in = data.in || {};
|
||||
data.in[nodeName.replace(/data-in-/, '')] = stringToBoolean(attr.nodeValue);
|
||||
} else if (/^data-out-*/.test(nodeName)) {
|
||||
data.out = data.out || {};
|
||||
data.out[nodeName.replace(/data-out-/, '')] =stringToBoolean(attr.nodeValue);
|
||||
} else if (/^data-*/.test(nodeName)) {
|
||||
data[nodeName.replace(/data-/, '')] = stringToBoolean(attr.nodeValue);
|
||||
}
|
||||
})
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
function shuffle (o) {
|
||||
for (var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
|
||||
return o;
|
||||
}
|
||||
|
||||
function animate ($t, effect, cb) {
|
||||
$t.addClass('animated ' + effect)
|
||||
.css('visibility', 'visible')
|
||||
.show();
|
||||
|
||||
$t.one('animationend webkitAnimationEnd oAnimationEnd', function () {
|
||||
$t.removeClass('animated ' + effect);
|
||||
cb && cb();
|
||||
});
|
||||
}
|
||||
|
||||
function animateTokens ($tokens, options, cb) {
|
||||
var that = this
|
||||
, count = $tokens.length;
|
||||
|
||||
if (!count) {
|
||||
cb && cb();
|
||||
return;
|
||||
}
|
||||
|
||||
if (options.shuffle) $tokens = shuffle($tokens);
|
||||
if (options.reverse) $tokens = $tokens.toArray().reverse();
|
||||
|
||||
$.each($tokens, function (i, t) {
|
||||
var $token = $(t);
|
||||
|
||||
function complete () {
|
||||
if (isInEffect(options.effect)) {
|
||||
$token.css('visibility', 'visible');
|
||||
} else if (isOutEffect(options.effect)) {
|
||||
$token.css('visibility', 'hidden');
|
||||
}
|
||||
count -= 1;
|
||||
if (!count && cb) cb();
|
||||
}
|
||||
|
||||
var delay = options.sync ? options.delay : options.delay * i * options.delayScale;
|
||||
|
||||
$token.text() ?
|
||||
setTimeout(function () { animate($token, options.effect, complete) }, delay) :
|
||||
complete();
|
||||
});
|
||||
};
|
||||
|
||||
var Textillate = function (element, options) {
|
||||
var base = this
|
||||
, $element = $(element);
|
||||
|
||||
base.init = function () {
|
||||
base.$texts = $element.find(options.selector);
|
||||
|
||||
if (!base.$texts.length) {
|
||||
base.$texts = $('<ul class="texts"><li>' + $element.html() + '</li></ul>');
|
||||
$element.html(base.$texts);
|
||||
}
|
||||
|
||||
base.$texts.hide();
|
||||
|
||||
base.$current = $('<span>')
|
||||
.html(base.$texts.find(':first-child').html())
|
||||
.prependTo($element);
|
||||
|
||||
if (isInEffect(options.in.effect)) {
|
||||
base.$current.css('visibility', 'hidden');
|
||||
} else if (isOutEffect(options.out.effect)) {
|
||||
base.$current.css('visibility', 'visible');
|
||||
}
|
||||
|
||||
base.setOptions(options);
|
||||
|
||||
base.timeoutRun = null;
|
||||
|
||||
setTimeout(function () {
|
||||
base.options.autoStart && base.start();
|
||||
}, base.options.initialDelay)
|
||||
};
|
||||
|
||||
base.setOptions = function (options) {
|
||||
base.options = options;
|
||||
};
|
||||
|
||||
base.triggerEvent = function (name) {
|
||||
var e = $.Event(name + '.tlt');
|
||||
$element.trigger(e, base);
|
||||
return e;
|
||||
};
|
||||
|
||||
base.in = function (index, cb) {
|
||||
index = index || 0;
|
||||
|
||||
var $elem = base.$texts.find(':nth-child(' + ((index||0) + 1) + ')')
|
||||
, options = $.extend(true, {}, base.options, $elem.length ? getData($elem[0]) : {})
|
||||
, $tokens;
|
||||
|
||||
$elem.addClass('current');
|
||||
|
||||
base.triggerEvent('inAnimationBegin');
|
||||
|
||||
base.$current
|
||||
.html($elem.html())
|
||||
.lettering('words');
|
||||
|
||||
// split words to individual characters if token type is set to 'char'
|
||||
if (base.options.type == "char") {
|
||||
base.$current.find('[class^="word"]')
|
||||
.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() });
|
||||
}
|
||||
|
||||
$tokens = base.$current
|
||||
.find('[class^="' + base.options.type + '"]')
|
||||
.css('display', 'inline-block');
|
||||
|
||||
if (isInEffect(options.in.effect)) {
|
||||
$tokens.css('visibility', 'hidden');
|
||||
} else if (isOutEffect(options.in.effect)) {
|
||||
$tokens.css('visibility', 'visible');
|
||||
}
|
||||
|
||||
base.currentIndex = index;
|
||||
|
||||
animateTokens($tokens, options.in, function () {
|
||||
base.triggerEvent('inAnimationEnd');
|
||||
if (options.in.callback) options.in.callback();
|
||||
if (cb) cb(base);
|
||||
});
|
||||
};
|
||||
|
||||
base.out = function (cb) {
|
||||
var $elem = base.$texts.find(':nth-child(' + ((base.currentIndex||0) + 1) + ')')
|
||||
, $tokens = base.$current.find('[class^="' + base.options.type + '"]')
|
||||
, options = $.extend(true, {}, base.options, $elem.length ? getData($elem[0]) : {})
|
||||
|
||||
base.triggerEvent('outAnimationBegin');
|
||||
|
||||
animateTokens($tokens, options.out, function () {
|
||||
$elem.removeClass('current');
|
||||
base.triggerEvent('outAnimationEnd');
|
||||
if (options.out.callback) options.out.callback();
|
||||
if (cb) cb(base);
|
||||
});
|
||||
};
|
||||
|
||||
base.start = function (index) {
|
||||
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));
|
||||
}, base.options.initialDelay);
|
||||
};
|
||||
|
||||
base.stop = function () {
|
||||
if (base.timeoutRun) {
|
||||
clearInterval(base.timeoutRun);
|
||||
base.timeoutRun = null;
|
||||
}
|
||||
};
|
||||
|
||||
base.init();
|
||||
}
|
||||
|
||||
$.fn.textillate = function (settings, args) {
|
||||
return this.each(function () {
|
||||
var $this = $(this)
|
||||
, data = $this.data('textillate')
|
||||
, options = $.extend(true, {}, $.fn.textillate.defaults, getData(this), typeof settings == 'object' && settings);
|
||||
|
||||
if (!data) {
|
||||
$this.data('textillate', (data = new Textillate(this, options)));
|
||||
} else if (typeof settings == 'string') {
|
||||
data[settings].apply(data, [].concat(args));
|
||||
} else {
|
||||
data.setOptions.call(data, options);
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
$.fn.textillate.defaults = {
|
||||
selector: '.texts',
|
||||
loop: false,
|
||||
minDisplayTime: 2000,
|
||||
initialDelay: 0,
|
||||
in: {
|
||||
effect: 'fadeInLeftBig',
|
||||
delayScale: 1.5,
|
||||
delay: 50,
|
||||
sync: false,
|
||||
reverse: false,
|
||||
shuffle: false,
|
||||
callback: function () {}
|
||||
},
|
||||
out: {
|
||||
effect: 'hinge',
|
||||
delayScale: 1.5,
|
||||
delay: 50,
|
||||
sync: false,
|
||||
reverse: false,
|
||||
shuffle: false,
|
||||
callback: function () {}
|
||||
},
|
||||
autoStart: true,
|
||||
inEffects: [],
|
||||
outEffects: [ 'hinge' ],
|
||||
callback: function () {},
|
||||
type: 'char'
|
||||
};
|
||||
|
||||
}(jQuery));
|
||||
10
lib_textillate.php
Normal file
10
lib_textillate.php
Normal file
@ -0,0 +1,10 @@
|
||||
<?php
|
||||
namespace LIB;
|
||||
class lib_textillate extends \LIB\lib_js{
|
||||
public static function get_class(){
|
||||
return self::class;}
|
||||
public static function js_path(){
|
||||
return \SYSTEM\WEBPATH(new \SYSTEM\PLIB(),'tablesorter/lib/jquery.textillate.js');}
|
||||
public static function version(){
|
||||
return '<a href="https://github.com/jschr/textillate" target="_blank">https://github.com/jschr/textillate</a> (commit: e34a9938c5)';}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user