165 lines
5.7 KiB
Plaintext
165 lines
5.7 KiB
Plaintext
|
|
/* ===========================================================
|
||
|
|
* jquery-simple-text-rotator.js v1
|
||
|
|
* ===========================================================
|
||
|
|
* Copyright 2013 Pete Rojwongsuriya.
|
||
|
|
* http://www.thepetedesign.com
|
||
|
|
*
|
||
|
|
* A very simple and light weight jQuery plugin that
|
||
|
|
* allows you to rotate multiple text without changing
|
||
|
|
* the layout
|
||
|
|
* https://github.com/peachananr/simple-text-rotator
|
||
|
|
*
|
||
|
|
* ========================================================== */
|
||
|
|
|
||
|
|
!function($){
|
||
|
|
|
||
|
|
var defaults = {
|
||
|
|
animation: "dissolve",
|
||
|
|
separator: ",",
|
||
|
|
speed: 2000
|
||
|
|
};
|
||
|
|
|
||
|
|
$.fn.textrotator = function(options){
|
||
|
|
var settings = $.extend({}, defaults, options);
|
||
|
|
|
||
|
|
return this.each(function(){
|
||
|
|
var el = $(this)
|
||
|
|
var array = [];
|
||
|
|
$.each(el.text().split(settings.separator), function(key, value) {
|
||
|
|
array.push(value);
|
||
|
|
});
|
||
|
|
el.text(array[0]);
|
||
|
|
|
||
|
|
// animation option
|
||
|
|
var rotate = function() {
|
||
|
|
switch (settings.animation) {
|
||
|
|
case 'dissolve':
|
||
|
|
el.animate({
|
||
|
|
textShadowBlur:20,
|
||
|
|
opacity: 0
|
||
|
|
}, 500 , function() {
|
||
|
|
index = $.inArray(el.text(), array)
|
||
|
|
if((index + 1) == array.length) index = -1
|
||
|
|
el.text(array[index + 1]).animate({
|
||
|
|
textShadowBlur:0,
|
||
|
|
opacity: 1
|
||
|
|
}, 500 );
|
||
|
|
});
|
||
|
|
break;
|
||
|
|
|
||
|
|
case 'flip':
|
||
|
|
if(el.find(".back").length > 0) {
|
||
|
|
el.html(el.find(".back").html())
|
||
|
|
}
|
||
|
|
|
||
|
|
var initial = el.text()
|
||
|
|
var index = $.inArray(initial, array)
|
||
|
|
if((index + 1) == array.length) index = -1
|
||
|
|
|
||
|
|
el.html("");
|
||
|
|
$("<span class='front'>" + initial + "</span>").appendTo(el);
|
||
|
|
$("<span class='back'>" + array[index + 1] + "</span>").appendTo(el);
|
||
|
|
el.wrapInner("<span class='rotating' />").find(".rotating").hide().addClass("flip").show().css({
|
||
|
|
"-webkit-transform": " rotateY(-180deg)",
|
||
|
|
"-moz-transform": " rotateY(-180deg)",
|
||
|
|
"-o-transform": " rotateY(-180deg)",
|
||
|
|
"transform": " rotateY(-180deg)"
|
||
|
|
})
|
||
|
|
|
||
|
|
break;
|
||
|
|
|
||
|
|
case 'flipUp':
|
||
|
|
if(el.find(".back").length > 0) {
|
||
|
|
el.html(el.find(".back").html())
|
||
|
|
}
|
||
|
|
|
||
|
|
var initial = el.text()
|
||
|
|
var index = $.inArray(initial, array)
|
||
|
|
if((index + 1) == array.length) index = -1
|
||
|
|
|
||
|
|
el.html("");
|
||
|
|
$("<span class='front'>" + initial + "</span>").appendTo(el);
|
||
|
|
$("<span class='back'>" + array[index + 1] + "</span>").appendTo(el);
|
||
|
|
el.wrapInner("<span class='rotating' />").find(".rotating").hide().addClass("flip up").show().css({
|
||
|
|
"-webkit-transform": " rotateX(-180deg)",
|
||
|
|
"-moz-transform": " rotateX(-180deg)",
|
||
|
|
"-o-transform": " rotateX(-180deg)",
|
||
|
|
"transform": " rotateX(-180deg)"
|
||
|
|
})
|
||
|
|
|
||
|
|
break;
|
||
|
|
|
||
|
|
case 'flipCube':
|
||
|
|
if(el.find(".back").length > 0) {
|
||
|
|
el.html(el.find(".back").html())
|
||
|
|
}
|
||
|
|
|
||
|
|
var initial = el.text()
|
||
|
|
var index = $.inArray(initial, array)
|
||
|
|
if((index + 1) == array.length) index = -1
|
||
|
|
|
||
|
|
el.html("");
|
||
|
|
$("<span class='front'>" + initial + "</span>").appendTo(el);
|
||
|
|
$("<span class='back'>" + array[index + 1] + "</span>").appendTo(el);
|
||
|
|
el.wrapInner("<span class='rotating' />").find(".rotating").hide().addClass("flip cube").show().css({
|
||
|
|
"-webkit-transform": " rotateY(180deg)",
|
||
|
|
"-moz-transform": " rotateY(180deg)",
|
||
|
|
"-o-transform": " rotateY(180deg)",
|
||
|
|
"transform": " rotateY(180deg)"
|
||
|
|
})
|
||
|
|
|
||
|
|
break;
|
||
|
|
|
||
|
|
case 'flipCubeUp':
|
||
|
|
if(el.find(".back").length > 0) {
|
||
|
|
el.html(el.find(".back").html())
|
||
|
|
}
|
||
|
|
|
||
|
|
var initial = el.text()
|
||
|
|
var index = $.inArray(initial, array)
|
||
|
|
if((index + 1) == array.length) index = -1
|
||
|
|
|
||
|
|
el.html("");
|
||
|
|
$("<span class='front'>" + initial + "</span>").appendTo(el);
|
||
|
|
$("<span class='back'>" + array[index + 1] + "</span>").appendTo(el);
|
||
|
|
el.wrapInner("<span class='rotating' />").find(".rotating").hide().addClass("flip cube up").show().css({
|
||
|
|
"-webkit-transform": " rotateX(180deg)",
|
||
|
|
"-moz-transform": " rotateX(180deg)",
|
||
|
|
"-o-transform": " rotateX(180deg)",
|
||
|
|
"transform": " rotateX(180deg)"
|
||
|
|
})
|
||
|
|
|
||
|
|
break;
|
||
|
|
|
||
|
|
case 'spin':
|
||
|
|
if(el.find(".rotating").length > 0) {
|
||
|
|
el.html(el.find(".rotating").html())
|
||
|
|
}
|
||
|
|
index = $.inArray(el.text(), array)
|
||
|
|
if((index + 1) == array.length) index = -1
|
||
|
|
|
||
|
|
el.wrapInner("<span class='rotating spin' />").find(".rotating").hide().text(array[index + 1]).show().css({
|
||
|
|
"-webkit-transform": " rotate(0) scale(1)",
|
||
|
|
"-moz-transform": "rotate(0) scale(1)",
|
||
|
|
"-o-transform": "rotate(0) scale(1)",
|
||
|
|
"transform": "rotate(0) scale(1)"
|
||
|
|
})
|
||
|
|
break;
|
||
|
|
|
||
|
|
case 'fade':
|
||
|
|
el.fadeOut(settings.speed, function() {
|
||
|
|
index = $.inArray(el.text(), array)
|
||
|
|
if((index + 1) == array.length) index = -1
|
||
|
|
el.text(array[index + 1]).fadeIn(settings.speed);
|
||
|
|
});
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
setInterval(rotate, settings.speed);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
}(window.jQuery);
|
||
|
|
|
||
|
|
|