Word Slider

A fork of the text fading snippet on css-tricks.com

by Victor

HTML

<div class="stage">
    Eat More
    <div class="revolver">
        <span>Pizza</span>
        <span>IceCream</span>
        <span>Cheesecake</span>
        <span>Eggrolls</span>
        <span>Burgers</span>
        <span>Cake</span>
        <span>Cookies</span>
        <span>Subs</span>
    </div>
</div>

<div class="explaination">
    <b>Dead Simple "Revolving Text"</b><br/>
    I saw a few people looking for ways to do it so I decided to throw my hat in the ring. This method probably won't work for every project but it could work for you. I suggest not using it for anything serious. <br/>
    <b>Some Notes</b><br/>
    <ul class="notes">
        <li>The height of the revolving area has to be set. You could probably change this without much trouble.</li>
        <li>There is a strange lag for the first transition.</li>
        <li>It relies on padding at the top and bottom to give it the block effect.</li>
        <li>Cover background...enough said.</li>
        <li>As I said DO NOT use this in production. You will regret it.</li>
    </ul>
</div>

CSS

body {
    background:#2c3e50;
    color:white;
}
.stage {
    font-family:sans-serif;
    font-weight:bolder;
    text-align:center;
    width:100%;
    height:auto;
    padding:60px 0;
    
    background: url(http://lorempixel.com/800/800/food/) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    /*font size is relative to height of container*/
    font-size:80px;
    color:#fff;
    text-shadow:-1px -1px 0 #666;
}
.revolver {
    width:100% !important;
    display: block ;
    text-align:center;
    text-transform: uppercase;
    height:80px;
    line-height: 100%;
    position: relative;
    right: 0;
    overflow:hidden;
}
.revolver span:first-child{
    display:block !important;
}
.revolver span  {
    display:inline-block;
    text-align:center;
    width: 100%;
    padding:0;
    margin:0;
    position: absolute;
    top: 0;
    left: 0;
    background:none;
    display:none;
}

.explaination {
    line-height:1.2;
    text-shadow:1px 1px 0 #34495e;
    font-family:sans-serif;
    font-size:20px;
    max-width:500px;   
    margin:0 auto;
    padding:30px;
}
.notes {
    list-style-type:circle;
}

JavaScript

$(" .revolver span").not(":first-child").css("top","100px").hide(0);
$('.revolver span').show(0);
		setInterval(function() { 
			$('.revolver > span:first')
			.animate({
				"top":"-100px"},
                     400, function(){
                         $(this).hide(0);
                         $(this).animate({"top":"100px"},500);
                     })
				.next()
				.fadeIn(0)
				.animate({
					"top":"0px"},
					500)
				.end()
				.appendTo('.revolver');
			},  3000);