Ciao dovresti utilizzare JQuery, un codice base potrebbe essere:
Codice HTML:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
function Cascade(delay){
// Clear the existing elements as
// we're doing this muliple times.
$('#cascade').html('');
// Initiate an array
var items = ['Testo1','Testo2','Testo3',];
// Loop through it with jQuery.each()
$(items).each(function(i, html){
// Create a new DIV.
item = $('<div></div>');
// Give it a class for styling
$(item).addClass('item');
// Add our html code from the array.
$(item).html(html);
// Make it so it doesn't display
// when it's added to the DOM.
$(item).css({ //CSS a caso, solo per farti capire
'display': 'none',
'font-size': '1em',
'padding-top': '5%',
})
// Tell jQuery to delay the fadeIn by i * delay,
// (no. times loop has iterated) * (delay in ms)
$(item).delay(i * delay).fadeIn();
$('#cascade').append(item);
});
}
</script>
Una volta scritto questo script dovrai passargli il tempo di "attesa" nel tuo html e determinare lo spazio dove dovrā apparire:
Codice HTML:
<button onclick="doCascade(150)">
<!-- All'interno della parentesi passi il parametro che determinerā il tempo di scorrimento -->
<span>Schiaccia per far apparire</span>
</button>
<div id="cascade">
</div>
In questo modo dovrebbe andare, essendo un codice "lungo" se non capisci qualcosa dimmelo ed evito di spiegarlo tutto casomai