Skip to content

Commit b068c75

Browse files
Lukeas14Lukeas14
committed
Adding animateText js and min files
1 parent 0d851db commit b068c75

File tree

2 files changed

+321
-0
lines changed

2 files changed

+321
-0
lines changed

‎animateText.js

Lines changed: 306 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,306 @@
1+
/*
2+
3+
animateText.js
4+
5+
jQuery plugin for animating text.
6+
7+
Version: 1.0
8+
Github: https://github.com/Lukeas14/animateText.js
9+
Author: Justin Lucas ([email protected])
10+
Copyright (c) 2012 Justin Lucas
11+
Licensed under MIT License (https://github.com/jquery/jquery/blob/master/MIT-LICENSE.txt)
12+
13+
*/
14+
15+
;(function($, window, document, undefined){
16+
17+
function AnimateText(element, options){
18+
var self = this;
19+
20+
this.$element = $(element);
21+
this.textObjects = options.textObjects;
22+
this.lastTextObject;
23+
this.repeated = 0;
24+
25+
//Default options
26+
this.defaults = {
27+
repeat: true,
28+
element: {
29+
css: {
30+
position: 'relative',
31+
margin: 0,
32+
padding: 0,
33+
width: function(){
34+
return $(this).parent().width();
35+
},
36+
height: function(){
37+
return $(this).parent().height();
38+
},
39+
'list-style': 'none'
40+
}
41+
},
42+
textObject: {
43+
css: {
44+
position: 'absolute',
45+
margin: 0,
46+
padding: 0
47+
},
48+
offset: 0,
49+
animation: 'explode'
50+
},
51+
position: {
52+
duration: 1000,
53+
easing: 'linear'
54+
}
55+
};
56+
57+
//Merge default options with user options
58+
this.options = $.extend(true, {}, this.defaults, options);
59+
60+
//Default animations
61+
this.animations = {
62+
"right_to_left": {
63+
positions: {
64+
start: {
65+
right: 0,
66+
opacity: 0,
67+
top: '50%'
68+
},
69+
0: {
70+
right: '75%',
71+
opacity: 1,
72+
duration:600
73+
},
74+
1: {
75+
duration:600
76+
},
77+
2: {
78+
opacity: 0,
79+
duration:600
80+
}
81+
}
82+
},
83+
"left_to_right": {
84+
positions: {
85+
start: {
86+
right: '100%',
87+
opacity: 0,
88+
'text-align': 'right',
89+
top: '50%',
90+
},
91+
0: {
92+
right: '25%',
93+
opacity: 1,
94+
duration: 600
95+
},
96+
1: {
97+
duration: 600
98+
},
99+
2: {
100+
opacity: 0,
101+
duration: 600
102+
}
103+
}
104+
},
105+
"explode": {
106+
positions: {
107+
start: {
108+
top: '30%',
109+
width: '100%',
110+
opacity: 0,
111+
'font-size': '10px',
112+
'text-align': 'center'
113+
},
114+
0: {
115+
opacity:1,
116+
duration:0
117+
},
118+
1: {
119+
top: '0%',
120+
'font-size': '150px',
121+
opacity: 0,
122+
duration: 1000
123+
}
124+
}
125+
},
126+
"implode": {
127+
positions: {
128+
start: {
129+
width: '100%',
130+
opacity:0,
131+
top: '0%',
132+
'font-size': '150px',
133+
'text-align': 'center'
134+
},
135+
0: {
136+
top: '30%',
137+
'font-size': '40px',
138+
opacity: 1,
139+
duration: 1000
140+
}
141+
}
142+
}
143+
};
144+
//Merge default animations with user animations
145+
$.extend(true, this.animations, this.options.animations);
146+
147+
this.init();
148+
}
149+
150+
AnimateText.prototype = {
151+
152+
init: function(){
153+
var self = this;
154+
155+
//Hide ul element and set css
156+
this.$element.hide().css(this.options.element.css);
157+
158+
this.loadAnimations();
159+
this.loadTextObjects(function(){
160+
self.$element.show();
161+
self.startAnimation();
162+
});
163+
},
164+
165+
loadAnimations: function(){
166+
var self = this;
167+
168+
$.each(this.animations, function(animationId, animation){
169+
animation.duration = 0;
170+
171+
$.each(animation.positions, function(positionId, position){
172+
if(positionId !== "start"){
173+
if(typeof(position.duration) !== "number" || position.duration < 0){
174+
position.duration = self.options.position.duration;
175+
}
176+
177+
if(typeof(position.easing) === "undefined"){
178+
position.easing = self.options.position.easing;
179+
}
180+
181+
animation.duration += position.duration;
182+
}
183+
});
184+
});
185+
},
186+
187+
loadTextObjects: function(callback){
188+
var self = this;
189+
190+
totalDuration = 0;
191+
192+
$.each(this.textObjects, function(textObjectId, textObject){
193+
var textObjectDuration = 0;
194+
195+
textObject.id = textObjectId;
196+
197+
//Set text object element
198+
textObject.$element = self.$element.children("li:eq(" + textObjectId + ")");
199+
200+
//Make sure text object element exists
201+
if(!textObject.$element.length){
202+
return;
203+
}
204+
205+
textObject.$element.css(self.options.textObject.css).attr('id', textObject.id);
206+
207+
//Check for valid animation type
208+
if(typeof(textObject.animation) === "undefined" || (typeof(textObject.animation) === "string" && !textObject.animation in self.animations)){
209+
textObject.animation = self.options.textObject.animation;
210+
}
211+
212+
//Check for valid time offset
213+
if(typeof(textObject.offset) !== "number" || textObject.offset < 0){
214+
textObject.offset = self.options.textObject.offset;
215+
}
216+
217+
if(typeof(textObject.duration) !== "number" || textObject.duration < 0){
218+
textObject.duration = 0;
219+
}
220+
221+
textObject.positions = $.extend(true, {}, self.animations[textObject.animation].positions, textObject.positions);
222+
223+
$.each(textObject.positions, function(positionId, position){
224+
if(positionId !== "start"){
225+
if(typeof(textObject.duration) === "number" && textObject.duration > 0){
226+
position.duration = (position.duration / self.animations[textObject.animation].duration) * textObject.duration;
227+
}
228+
else{
229+
textObjectDuration += position.duration;
230+
}
231+
}
232+
});
233+
234+
if(textObjectDuration > 0){
235+
textObject.duration = textObjectDuration;
236+
}
237+
238+
//Calculate text object duration
239+
if((textObject.offset + textObject.duration) > totalDuration){
240+
totalDuration = (textObject.offset + textObject.duration);
241+
self.lastTextObject = textObject.id;
242+
}
243+
244+
textObject.status = 'ready';
245+
});
246+
247+
callback();
248+
},
249+
250+
startAnimation: function(){
251+
var self = this;
252+
253+
$.each(this.textObjects, function(textObjectId, textObject){
254+
//Set textObject to its start position
255+
textObject.$element.css(self.animations[textObject.animation].positions.start);
256+
257+
setTimeout(function(){
258+
self.animateTextObject(textObject.id, 0);
259+
}, textObject.offset);
260+
});
261+
},
262+
263+
stopAnimation: function(){
264+
this.$element.children("li").stop();
265+
},
266+
267+
animateTextObject: function(textObjectId, animationPosition){
268+
var self = this,
269+
textObject = this.textObjects[textObjectId],
270+
animation = this.animations[textObject.animation];
271+
272+
textObject.$element.animate(
273+
textObject.positions[animationPosition],
274+
textObject.positions[animationPosition].duration,
275+
textObject.positions.easing,
276+
function(){
277+
//Does this animation have another position? If so animate it.
278+
if(typeof(textObject.positions[(animationPosition + 1)]) !== "undefined"){
279+
self.animateTextObject(textObject.id, (animationPosition + 1));
280+
}
281+
//Is this the last text object in the group?
282+
else if(textObject.id === self.lastTextObject){
283+
self.stopAnimation();
284+
285+
//Repeat animations if repeat option is set to true or we're still under the set repeat limit
286+
if(self.options.repeat === true || (typeof(self.options.repeat) === "number" && self.repeated < self.options.repeat)){
287+
self.stopAnimation();
288+
self.startAnimation();
289+
self.repeated++;
290+
}
291+
else{
292+
self.stopAnimation();
293+
}
294+
}
295+
}
296+
);
297+
}
298+
};
299+
300+
$.fn.animateText = function(options){
301+
return this.each(function(){
302+
new AnimateText(this, options);
303+
});
304+
};
305+
306+
})( jQuery );

‎animateText.min.js

Lines changed: 15 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)