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

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")
  // 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.

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.
	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.

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").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.

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.
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");
													}
												}
											});
									}
								}
							);
					});
				});
			}

 

Únete a mi Newsletter

Regístrate ahora de manera Gratuita y conviértete en el primero en recibir mis post. SIN SPAM.
Artículos sobre programación, sobre ejemplos para uso dentro de neustras aplicaciones, super útiles, con DEMOS y Ejemplos para Descargar. Suscríbete YA!

Valora este Artículo
Comparte si te ha Gustado
0veces compartido
Artículos Relacionados