Html Best Codes

Falling text rotator

Written by @kerixa 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 www.htmlbestcodes.com coded by: Kerixa Inc. -->
<!-- this script got from www.htmlbestcodes.com-Coded by: Krishna Eydat -->
<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="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://www.htmlbestcodes.com/javascripts/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><div><a target="_blank" href="http://www.htmlbestcodes.com/"><span style="font-size: 8pt; text-decoration: none">HTML Best Codes</span></a></div>
</body>
</html><a target='_blank' href='www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Falling text rotator

Code Snippet:

Example:

About @kerixa

TRENDING POST

VISITORS

Create an Account

Login

Recover Account

Message Received!

Edit Code

Falling text rotator

Code Snippet:

Example:

About @kerixa

Let's stay in touch

TRENDING POST

VISITORS