Falling text rotator
Written by 25 February 2014
Very nice text rotator that falls text parts down by a nice effect. Useful for heading and big size text in the fantastic web pages.
Code Snippet:
<!-- this script is provided by https://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<html>
<head>
<style type="text/css">
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: #713800;
text-shadow: 2px 2px #FDE0A6, 3px 3px #FDE0A6, 4px 4px #FDE0A6, 5px 5px #FDE0A6, 6px 6px #FDE0A6;
}
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;
}
</style>
<head>
<body>
<ul id="headline" class="fallingtextrotator" style="height:2em">
<li>HTML Best Codes</li>
<li>Free For Everyone</li>
<li>Useful & Beautiful</li>
<li>Try Yourself!</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://htmlbestcodes.com/files/jquery.lettering-0.6.1.min.js"></script>
<script type="text/javascript">
(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<wordgroup[curli].length; 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()
})
}
})(jQuery)
</script>
<script>
jQuery(function(){ // on DOM load
$('#headline').fallingtextrotator({
pause: 3000,
cycles: 2,
ontextchange:function(msgindex, msg, eachchar){
}
})
})
</script>
<br/>
<div style="clear:both"></div>
</body>
</html> <a target='_blank' href='https://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>
Example:
Let's stay in touch
Get the latest and greatest javascript codes directly to your mail
TRENDING POST
VISITORS
Online Users:
12
Recent Members:
Muzamiru, TheDewalt, sahjahan, fk khan, Proper
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!