// Falling Text rotator- by JavaScript Kit (
[You must be registered and logged in to see this link.]// Date created: Sept 11th, 2013
// Dependencies: jQuery 1.8+, Lettering.js
[You must be registered and logged in to see this link.]// Visit JavaScript Kit at
[You must be registered and logged in to see this link.] for full source code
(function($){
var defaults = {pause:2000, ontextchange:function(msgindex, msg, $eachchar){}, cycles:1}
var transitionsupport = typeof $(document.documentElement).css('transition') != 'undefined'
$.fn.fallingtextrotator = function(options){
return this.each(function(){
var s = $.extend({}, defaults, options)
var $t = $(this),
wordgroup = [], // array holding collection of either words or chars (depending on setting)
curli = 0,
cyclescount = {cur:0, max:0}
var $lis = $t.find('>li').each(function(i){
var $this = $(this)
.data('wrapperinfo', {wrapitem:i, transduration:$(this).css('transitionDuration'), currenttransition:0, wordcount:0})
.lettering('words').children('span').lettering().end()
wordgroup.push( $this.find('span[class*="char"]') )
$this.data('wrapperinfo').wordcount = wordgroup[i].length
})
cyclescount.max = $lis.length * s.cycles // get number of literations before rotator should stop
$t.on('transitionend webkitTransitionEnd', function(e){
var $target = $(e.target),
$targetParent = $target.offsetParent()
if (/transform/i.test(e.originalEvent.propertyName) && $targetParent.hasClass('dropdown')){
$targetParent.data('wrapperinfo').currenttransition += 1
if ($targetParent.data('wrapperinfo').currenttransition == $targetParent.data('wrapperinfo').wordcount){
$targetParent.data('wrapperinfo').currenttransition = 0
wordgroup[curli].css({transitionDelay:'0ms'})
$targetParent.css({opacity:0, transitionDuration:'0ms'}).removeClass('dropdown')
s.ontextchange( curli, $targetParent.text(), wordgroup[curli] )
curli = (curli < wordgroup.length-1)? curli + 1 : 0
setTimeout(function(){rotatetext()}, 50)
}
}
})
function dropword(){
if (transitionsupport && !window.opera){
for (var i=0; i
var delay = Math.round( Math.random() * 1000 ) +'ms'
wordgroup[curli].eq(i).css('transitionDelay', delay )
}
$lis.eq(curli).addClass('dropdown')
}
else{
$lis.eq(curli).css({opacity:0})
curli = (curli < wordgroup.length-1)? curli + 1 : 0
rotatetext()
}
}
function rotatetext(){
var $curli = $lis.eq(curli)
$curli.css({opacity:1, transitionDuration:$curli.data('wrapperinfo').transduration})
if (s.cycles==0 || cyclescount.cur++ < cyclescount.max-1){
setTimeout(function(){
dropword()
}, s.pause)
}
}
rotatetext()
}) // end this.each()
}
})(jQuery)ul.fallingtextrotator{
font-family: 'Orbitron', sans-serif; /* font style. Default uses Google fonts */
text-shadow: 2px 2px #C0F5A9, 3px 3px #C0F5A9, 4px 4px #C0F5A9, 5px 5px #C0F5A9, 6px 6px #C0F5A9;
font-size: 48px; /* font size of text */
color: #217C23;
letter-spacing: 10px;
font-weight: 800;
text-transform: uppercase;
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
ul.fallingtextrotator > li{
position: absolute;
opacity: 0;
top: 0;
left: 0;
-moz-transition: all 0.3s ease-in; /* change 0.3s to reflect desired duration of effect on entire sentence (ie: fade in/out) */
-webkit-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
ul.fallingtextrotator > li:nth-of-type(even){
color:
[You must be registered and logged in to see this link.];
text-shadow: 2px 2px
[You must be registered and logged in to see this link.], 3px 3px
[You must be registered and logged in to see this link.], 4px 4px
[You must be registered and logged in to see this link.], 5px 5px
[You must be registered and logged in to see this link.], 6px 6px
[You must be registered and logged in to see this link.];
}
ul.fallingtextrotator > li span[class*="char"]{
display: inline-block;
}
ul.fallingtextrotator > li.dropdown span[class*="char"]{
opacity: 0;
-moz-transform: translateY(300px) rotateZ(120deg); /* drop down and rotate */
-webkit-transform: translateY(300px) rotateZ(120deg);
transform: translateY(300px) rotateZ(120deg);
-moz-transition: all 0.3s ease-in; /* change 0.3s to reflect desired duration of each word/letter dropping down */
-webkit-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}/* Lettering.JS 0.6.1 by Dave Rupert -
[You must be registered and logged in to see this link.] */
(function($){function injector(t,splitter,klass,after){var a=t.text().split(splitter),inject='';if(a.length){$(a).each(function(i,item){inject+='
'+item+''+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";injector($(this).children("br").replaceWith(r).end(),r,'line','')})}};$.fn.lettering=function(method){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))}$.error('Method '+method+' does not exist on jQuery.lettering');return this}})(jQuery);