Morton 26 de diciembre de 2010 a las 07.41
   Imprimir artículo
elWebmaster.com

jQuery: Gran efecto animado para mostrar citas en tu sitio


jquerywideSi tu intención es mostrar citas célebres de autores reconocidos en tu sitio, pero quieres hacerlo con estilo, este efecto realizado en jQuery es justo lo que estás buscando.

Fuente original del artículo: Marcofolio.net
Traducción realizada por
elWebmaster.com

Haz clic en este enlace para ver una demostración del efecto >>

Comencemos con el esqueleto del efecto, es decir, el HTML:

[HTML]

‘‘

’’

[/HTML]

Toma nota de las clases e IDs usadas, ya que habrá que mencionarlas luego en el CSS y JavaScript. A la cita, por otro lado, se le brindará el contenido a través de jQuery.

Se prefirió utilizar la comilla simple en lugar de la doble comilla, ya que al aumentarse el tamaño, los espacios entre sí utilizando una comilla doble hubiesen sido gigantescos. Pero utilizando la comilla simple y un poco de CSS, podemos lograr que una comilla esté cercana a la otra.

[CSS]
.quote { display:none; float:left; height:69px; }
.quotemark { display:none; float:left;
font:bold 300px Helvetica; letter-spacing:-35px; line-height:300px; }
[/CSS]

Como puedes ver aquí, configuramos el espacio entre caracteres a un valor negativo para ubicar las comillas más juntas.

Finalmente, queda el jQuery. Primero, definimos algunas variables para cambiar facilmente el comportamiento del script:

[JAVASCRIPT]
var quoteSpeed = 500;

var quoteContainerSpeed = 1000;

var showQuoteSpeed = 5000;

var cleanScreenSpeed = 500;

var quoteBoxWidth = “300px”;

var quotes = [ {
“quote” : “Las computadoras son buenas siguiendo instrucciones, pero no lo son
leyendo tu mente.”,
“author” : “- Donald Knuth”
}, {
“quote” : “Copiar y pegar
es un error de diseño.”,
“author” : “- David Parnas”
}, {
“quote” : “Si resaltas todo,
nada estará resaltado.”,
“author” : “- Art Webb”
}, {
“quote” : “Primero, resuelve el problema. Luego, escribe el código.”,
“author” : “- John Johnson”
}
];

var currentQuoteIndex = 4;
[/JAVASCRIPT]

Como puedes ver, los valores pueden cambiarse fácilmente. También podemos agregar comillas a la variable de comillas.

Ahora que el documento está listo, necesitamos comenzar la animación. Esto está colocado en una llamada al método por separado, ya que tendremos que volver a usarlo luego.

[JAVASCRIPT]
// Document ready
$(document).ready(function()
{
startAnimation();
});

/* Starts the animation */
var startAnimation = function() {
setTimeout(function() {
showLeftQuote();
}, quoteSpeed);
}
[/JAVASCRIPT]

Ahora encadenaremos llamadas a funciones, con el objetivo de hacer que el script funcione. Como puedes ver, llamaremos a la función showLeftQuote luego del tiempo configurado. Al encadenar funciones luego de un tiempo determinado, podemos ejecutar la función en el momento indicado.

[JAVASCRIPT]
var showLeftQuote = function() {
$(“.leftquote”).show();

setTimeout(function() {
showRightQuote();
}, quoteSpeed);
};

var showRightQuote = function() {
$(“.rightquote”).show();

setTimeout(function() {
showQuoteContainer();
}, quoteSpeed);
};
[/JAVASCRIPT]

Ya tenemos las comillas izquierdas, y las derechas visualizándose. Ahora nos queda expandir la caja.

[JAVASCRIPT]
var showQuoteContainer = function() {
$(“

“)
.html(quotes[currentQuoteIndex].quote)
.css({ “display” : “none”})
.appendTo($(“.quote”));

$(“

“)
.addClass(“author”)
.html(quotes[currentQuoteIndex].author)
.css({ “display” : “none”})
.appendTo($(“.quote”));

$(“.quote”)
.show()
.animate({ width : quoteBoxWidth }, quoteContainerSpeed, function() {
showQuote();
});
}
[/JAVASCRIPT]

Tambien inyectamos el contenedor de la cita con el actual texto de índice. Expandimos el ancho de la caja de cita, y luego cuando la animación haya terminado, revelamos la cita.

[JAVASCRIPT]
var showQuote = function() {
$(“.quote”).children().fadeIn();

setTimeout(function() {
clearQuote();
}, showQuoteSpeed);
}
[/JAVASCRIPT]

Sólo un simple efecto de fundido, y tanto la cita como el autor se mostrarán. El último paso de este bucle es despejar la cita actual, y comenzar nuevamente.

[JAVASCRIPT]
var clearQuote = function() {
// Determine the curren quote index
if(currentQuoteIndex == quotes.length – 1) {
currentQuoteIndex = 0;
}
else {
currentQuoteIndex++;
}

// Fade out the quotation marks
$(“.quotemark”).fadeOut();

$(“.quote”)
.empty()
.css({ width : “0px” });

setTimeout(function() {
startAnimation();
}, cleanScreenSpeed);
});
}
[/JAVASCRIPT]

Como ya hemos configurado currentQuoteIndex, este bucle entero comenzará de nuevo con la siguiente cita.

Y eso es todo. Recuerda probarlo en varios navegadores, ya que las fuentes se renderizan distinto dependiendo del navegador.

Haz clic en este enlace para ver una demostración del efecto >>

Fuente original del artículo: Marcofolio.net
Traducción realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder