Respecto a lo segundo, hice un ejemplo rápido para ver cómo se podría lograr :) Me pareció interesante.
Código HTML:
Ver original<!doctype html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){
//configuraciones
var _elem = $('.animar-entrada'); //usar selector CSS para determinar los elementos a los que se aplica el efecto
var _velocidad = 400; //duración de la animación
var _demora = 200; //pausa entre cada letra
//..
_elem.each(function(){
//acciones para cada elemento seleccionado
var $esto = $(this);
var arr_letras = $esto.text().split(''); //dividir el texto letra por letra
$esto.html(''); //vaciar el html del elemento
for (var i=0; i
<arr_letras.length; i++){ //encerrar cada letra en un <span> con clase especial, solo para identificarla
arr_letras[i] = $('
<span class="jq-letra">' + arr_letras[i] + '
</span>').hide(); //crear el elemento y ocultarlo
$esto.append(arr_letras[i]); //agregar elemento al texto
arr_letras[i].delay( i * _demora ).fadeIn(_velocidad); //mostrar letra con efecto
}
});
});
<h1 class="animar-entrada">Soy un texto
</h1> <h2 class="animar-entrada">Yo tambi
én tengo la entrada animada
</h2>
El script es sencillo, aunque tal vez un poco absorbe CPU, así que yo no usaría textos demasiado largos, sin mencionar que es un poco molesto leer de esa forma.
Jugá con los valores de velocidad y demora para lograr otros efectos.