Forked from Amruth Pillai's Pen jQuery Text Rotator.
A Pen by Captain Anonymous on CodePen.
<h1> I am <div id="rotate"> <div>awesome.</div> <div>invincible.</div> <div>unbeatable.</div> <div>indestructible.</div> </div> </h1> |
Forked from Amruth Pillai's Pen jQuery Text Rotator.
A Pen by Captain Anonymous on CodePen.
(function($){ | |
$.fn.extend({ | |
rotaterator: function(options) { | |
var defaults = { | |
fadeSpeed: 100, | |
pauseSpeed: 1000 | |
, | |
child:null | |
}; | |
var options = $.extend(defaults, options); | |
return this.each(function() { | |
var o =options; | |
var obj = $(this); | |
var items = $(obj.children(), obj); | |
items.each(function() {$(this).hide();}) | |
if(!o.child){var next = $(obj).children(':first'); | |
}else{var next = o.child; | |
} | |
$(next).fadeIn(o.fadeSpeed, function() { | |
$(next).delay(o.pauseSpeed).fadeOut(o.fadeSpeed, function() { | |
var next = $(this).next(); | |
if (next.length == 0){ | |
next = $(obj).children(':first'); | |
} | |
$(obj).rotaterator({child : next, fadeSpeed : o.fadeSpeed, pauseSpeed : o.pauseSpeed}); | |
}) | |
}); | |
}); | |
} | |
}); | |
})(jQuery); | |
$(document).ready(function() { | |
$('#rotate').rotaterator({fadeSpeed:200, pauseSpeed:7500}); | |
}); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
Goal to rotate text snippits on foursquarecamps.com. Not single words though. Might try putting the text snippits in side of separate html files, and then linking them in
index.html
div separators.