DropText

by JamesKyle

HTML

<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.compatibility.js"></script>
<div class="dt-container">
    <span class="drop-text hide">DropText.</span>
    <span class="drop-text hide">It's</span>
    <span class="drop-text hide">loads</span>
    <span class="drop-text hide">of</span>
    <span class="drop-text hide">fun!</span>
</div>

CSS

body {
   font-family: 'Gotham Rounded', 'Helvetica Neue', Helvetica, Arial;
}

.dt-container {
    width: 800px;
    height: 50px;
    font-size: 50px;
    line-height: 50px;
    margin: 0px auto;
    overflow: hidden;
    text-align: center;
    
}
span.drop-text {
    position: relative;
    display: inline-block;
    
}

span.drop-text.hide {
    top: -100%;
    width: 0px;
}

JavaScript

$(document).ready(function droptext() {
    
    $('.dt-container .drop-text.hide:first').animate({
        top: 0%, 
        width: auto
    }, 300, 'bounceout', function() {
        $(this).removeClass('hide');
    });
    
    var dropreveal = function() {
        $('.dt-container .drop-text.hide:first').removeClass('hide');
    };
    
    //Every 300 ms run the dropreveal function
    
});