Demo: BLAST – Texto Animado usando Javascript

Bueno chicos vamos a poner en practica lo aprendido en el articulo, solo hay que darle click en el boton INICIAR EJEMPLO de cada ejemplo para ver como funciona el ejemplo a continuación cada uno de los ejemplos en funcionamiento.

CODIGO BASE PARA TODOS LOS EJEMPLOS;

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="/js/jquery.blast.js" type="text/javascript"></script>
<script src="/js/jquery.velocity.min.js" type="text/javascript"></script>
<script src="/js/velocity.ui.js" type="text/javascript"></script>

<div>
Mozilla Foundation es una organización sin ánimo de lucro dedicada a la creación de software libre. Tiene como misión "mantener la elección y la innovación en Internet". La fundación es conocida por crear el navegador Mozilla Firefox.
</div>

Ejemplo 01: Implementación Básica

$("div")
  // Blast the text apart by word.
  .blast({ delimiter: "word" })
  // Fade the words into view using Velocity.js.
  .velocity("transition.fadeIn", {
    display: null,
    duration: 1250,
    stagger: 40,
    delay: 400
  });

Ejemplo 02: Búsqueda

Se resaltara las coincidencias en el texto. Ingresa un fragmento de texto a buscar y depues dale click en el boton BUSCAR.

	var delimiter,$generatedElements;
	delimiter = $.trim($("#txt").val()) || "Mozilla";
	$generatedElements = $("div").blast( { search: delimiter } );
	/* Fade in a background-color for search results. */
		$generatedElements
			.css({
                backgroundColor: "rgba(223, 231, 236, 0)",
                transition: "color 400ms"
            })
            .velocity(
            	{
                	backgroundColorAlpha: 1
                }, {
                	duration: 400
                })
			.filter(":even")
				.css("color", "#0c5d99")
				.end()
			.filter(":odd")
				.css("color", "#dd1f7b");

Ejemplo 03: Animación Tipográfica

Este es un efecto bien interesante y llamativo ya que combina efectos parecidos a los de Power Point, para que funcione la demo solo dale click sobre el botón INICIAR ANIMACIÓN.

$("div").eq(0).blast()
				.velocity("fadeOut", { duration: 350, stagger: 30, drag: true, backwards: true, display: null, complete: function() {
						$("div").eq(0).find(".blast")
							.velocity("fadeIn", { delay: 500, stagger: 30, drag: true })
							.velocity("transition.slideDownIn", { delay: 1000, stagger: 20, drag: true, display: "inline-block", complete: function() {
									$("li").eq(0).blast(false);
									$("#btnUndo").trigger("click");
								}
							});
					}
				})

Ejemplo 04: Yuxtaposición(corrigiendo)

Este es un efecto muy llamativo por mostrar en pantalla las letras encontradas en el párrafo, superpuestas, osea encima de el texto con efecto como si estuvieran volando, muy chevere, para que funcione la demo solo dale click sobre el botón INICIAR ANIMACIÓN.

var phraseLetters = (prompt("Ingresa solo tu Primer Nombre:").toLowerCase().replace(/\s/g, "") || "blast").split(""),
				letterMatchCount = 0;

			$("div")
				.blast({ delimiter: "character" })
				.each(function () {
					var element = this;

					$.each(phraseLetters, function (i, letter) {
						if (element.innerHTML === letter) {
							phraseLetters[i] = false;
							letterMatchCount++;

							$(element)
								.attr("juxtaposition-demo-index", i)
								.css({
									position: "fixed",
									color: "rgb(0, 125, 255)"
								})
								.velocity({ fontSize: "45px" }, { duration: 350 });

							return false;
						}

						if (letterMatchCount === phraseLetters.length) {
							return false;
						}
					});
				});

			if (letterMatchCount !== phraseLetters.length) {
				alert("Lo Siento no se ha podido igualar las letras de tu nombre.");
			} else {
				var fontSizeOriginal = $("div").css("font-size"),
					documentWidth = document.body.offsetWidth,
					documentHeight = document.body.clientHeight;

				$.each(phraseLetters, function(i, letter) {
					$("div").find("[juxtaposition-demo-index=" + i + "]").each(function () {
						var $this = $(this),
							offset = $this.offset();

						$this
							.css("display", "inline-block")
							.delay(i * 350)
							.velocity(
								{
									translateX: documentWidth/2 - offset.left - (25 * phraseLetters.length) + (i * 45),
									translateY: 300 - offset.top
								}, {
									duration: 750
								}
							)
							.delay(2250)
							.velocity(
								{
									translateX: 0,
									translateY: 0
								}, {
									complete: function() {
										$this
											.css({
												display: "inline",
												position: "static",
												color: "inherit"
											})
											.velocity({ fontSize: fontSizeOriginal }, {
												duration: 1000,
												complete: function() {
													if (i === phraseLetters.length - 1) {
														$("#btnUndo").trigger("click");
													}
												}
											});
									}
								}
							);
					});
				});
			}