Textualizer: Efectos en textos con jQuery

Textualizer es un plugin para jQuery con el que se pueden generar transiciones entre distintos textos de manera bastante extraña, cambiando las letras de lugar con efectos diversos.

Su uso es muy sencillo, basta agregar el script que puede descargarse desde la página del autor ya sea en su versión minimizada como completa y agregarlo antes de </head>

Luego, para usarlo debemos agregar un contenedor al que identificamos mediante su ID, allí donde quisiéramos que se mostrara; por ejemplo:

<div id="demo"></div>

y llamamos a la función con las opciones que se nos ocurran:

<script>
  var list = [un txto', 'otro texto, 'último texto'];  // la lista de textos a mostrar
  var txt = $('#demo');  // el ID del contenedor
  var options = {
    duration: 1000, // el tiempo que el texto permanecerá visible
    rearrangeDuration: 1000, // ella duración del efecto
    effect: 'random', // el efecto que puede ser fadeIn, slideLeft, slideTop o random
    centered: true // si queremos que se centre
  }
  txt.textualizer(list, options); // enviamos los datos
  txt.textualizer('start'); // y lo ejecutamos
</script>

Como cualquier otra etiqueta, podemos definir su estilo; por ejemplo:

<style>
  #demo {
    color: #FFF;
    font-family: Georgia;
    font-size: 20px;
    height:140px;
    width: 500px;
  }
</style>

Eventualmente, tres funciones más nos permitirían controlarlo:

.textualizer('pause') pausaria la animación
.textualizer('stop') la detendría por completo
.textualizer('destroy') la elimininaría

CSS Shapes

#circle { 
  background: red; 
  border-radius: 70px;
  height: 100px;
  width: 100px;
}
#oval1 {
  background: yellow; 
  border-radius: 100px / 50px;
  height: 100px; 
  width: 200px; 
}
#oval2 {
  background: SandyBrown; 
  border-radius: 50px / 100px;
  height: 160px; 
  width: 80px; 
}

#trapezium1 {
  border-right: 40px solid transparent;
  border-bottom: 80px solid Aquamarine;
  border-left: 40px solid transparent;
  height: 0; 
  width: 80px;
}
#trapezium2 {
   border-top: 80px solid Coral;
   border-right: 40px solid transparent;
   border-left: 40px solid transparent;
   height: 0; 
   width: 80px;
}
#parallelogram {
  background: pink;
  height: 75px;
  width: 130px; 
  -moz-transform: skew(20deg); 
  -webkit-transform: skew(20deg); 
  -o-transform: skew(20deg);
  transform: skew(20deg);
}

#up-triangle {
   border-right: 60px solid transparent; 
   border-bottom: 80px solid green; 
   border-left: 60px solid transparent; 
   height: 0; 
   width: 0; 
}
#down-triangle { 
   border-top: 80px solid pink;
   border-right: 60px solid transparent; 
   border-left: 60px solid transparent; 
   height: 0;
   width: 0; 
}
#left-triangle {
   border-top: 50px solid transparent;
   border-right: 100px solid orange;
   border-bottom: 50px solid transparent;
   height: 0;
   width: 0;
}
#right-triangle {
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
   border-left: 100px solid red;
   height: 0;
   width: 0;
}

#octagon {
  background: DarkTurquoise;
  height: 100px; 
  width: 100px; 
}
#octagon:before {
  border-bottom: 30px solid DarkTurquoise;
  border-right: 30px solid #101921; /* el color del fondo */
  border-left: 30px solid #101921; /* el color del fondo */
  content:"";
  height: 0;
  position: absolute; 
  width: 40px;
}
#octagon:after {
   border-top: 30px solid DarkTurquoise; 
   border-right: 30px solid #101921; /* el color del fondo */
   border-left: 30px solid #101921; /* el color del fondo */
   content:"";
   height: 0;
   margin: 70px 0 0 0;
   position: absolute; 
   width: 40px;
}

#diamond {
   background: SkyBlue;
   height: 80px; 
   width: 80px; 
   -moz-transform: rotate(-45deg);
   -webkit-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
   -moz-transform-origin: 0 100%;
   -webkit-transform-origin: 0 100%;
   -ms-transform-origin: 0 100%;
   -o-transform-origin: 0 100%;
   transform-origin: 0 100%;
}

#twelve-point-star {
  background: orange;
  height: 100px;
  position: absolute;
  width: 100px;
}
#twelve-point-star:before {
  background: orange;
  content:"";
  height: 100px;
  position: absolute;
  width: 100px;
  -moz-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  transform: rotate(30deg);
}
#twelve-point-star:after {
  background: orange;
  content:"";
  height: 100px;
  position: absolute;
  width: 100px;
  -moz-transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  transform: rotate(-30deg);
}

#six-point-star {
  border-bottom: 80px solid red;
  border-right: 50px solid transparent; 
  border-left: 50px solid transparent; 
  position: absolute;
  height: 0; 
  width: 0; 
}
#six-point-star:after {
  border-top: 80px solid red;
  border-right: 50px solid transparent; 
  border-left: 50px solid transparent; 
  content:"";
  height: 0; 
  margin: 30px 0 0 -50px;
  position: absolute;
  width: 0; 
}

#speech-bubble {
  background: Thistle;
  border-radius: 10px;
  height: 80px;
  position: absolute;
  width: 120px;
}
#speech-bubble:before {
  border-top: 13px solid transparent;
  border-right: 26px solid Thistle;
  border-bottom: 13px solid transparent;
  content:"";
  height: 0;
  margin: 13px 0 0 -25px;
  position: absolute;
  width: 0;
}

#pacman {
  border-top: 60px solid yellow;
  border-right: 60px solid transparent;
  border-bottom: 60px solid yellow;
  border-left: 60px solid yellow;
  border-radius: 60px;
  height: 0px;
  width: 0px;
}

#heart { 
  position: relative;
}
#heart:before, #heart:after {
  background: red;
  border-radius: 50px 50px 0 0;
  content: "";
  height: 115px;
  left: 70px;
  position: absolute;
  top: 0;
  width: 70px;
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -moz-transform-origin: 0 100%;
  -webkit-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%;
}
#heart:after { 
 left: 0; 
  -moz-transform: rotate(45deg); 
  -webkit-transform: rotate(45deg); 
  -ms-transform: rotate(45deg); 
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -moz-transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin :100% 100%;
}

REFERENCIAS:CSS3 Shapes

Un script para manejar listas

Aunque este script tal vez no tenga demasiado uso en Blogger, no deja de ser una alternativa interesante, bastante fácil de usar y realmente potente dado su escaso tamaño. Se trata de List.js y no requiere librerías extras.

Una vez insertada en un sitio, nos permite transformar listas (UL LI) de tal modo que pueda buscarse en ellas de modo dinámico, filtrarlas, ordenarlas e incluso editarlas, agregando o borrando items. Obviamente, en Blogger, la parte de edición carece de sentido porque no podríamos guardar esos cambios pero, el resto de las opciones pueden ser aplicadas sin inconvenientes.

Descargamos el archivo, lo alojamos en algún servidor como DropBox o Google Sites y luego, lo agregamos a la plantilla:

<script src='URL_list.min.js' type='text/javascript'></script>

Para usarlo, sólo necesitamos un DIV al que identificaremos con un ID y adentro, agregaremos una lista cuya clase será list y donde cada item puede contener cualquier tipo de etiqueta que también deberemos identificar con una clase que será la que nos sirva para, por ejemplo, ordenarlas.

Un ejemplo:

<div id="miprimerejemplo">
  <span class="sort" rel="nombre"> NOMBRE </span>
  <span class="sort" rel="apellido"> APELLIDO </span>
  <ul class="list">
    <li>
      <span class="nombre"> texto 1 </span>
      <span class="apellido"> texto 2 </span>
    </li>
    <li>
      <span class="nombre"> texto 3 </span>
      <span class="apellido"> texto 4 </span>
    </li>
    .......
  </ul>
</div>

Si debajo del HTML llamamos a la función:

<script>
  var opciones = {valueNames: [ "nombre","apellido" ]};
  var featureList = new List("miprimerejemplo", opciones);
</script>

tendremos una lista que podrá ser ordenada haciendo click en los textos NOMBRE o APELLIDO.

Las características gráficas son las que se nos ocurra, no hay limitaciones al respecto:

NUMNOMBREHEXE

• 1aqua#00FFFF
• 2cornsilk#FFF8DC
• 3azure#F0FFFF
• 4bisque#FFE4C4
• 5blue#0000FF
• 6aliceblue#F0F8FF
• 7antiquewhite#FAEBD7
• 8black#000000
• 9blueviolet#8A2BE2
• 10brown#A52A2A
• 11cyan#00FFFF
• 12blanchedalmond#FFEBCD
• 13coral#FF7F50
• 14chartreuse#7FFF00
• 15aquamarine#7FFFD4
• 16burlywood#DEB887
• 17cadetblue#5F9EA0
• 18chocolate#D2691E
• 19cornflowerblue#6495ED
• 20crimson#DC143C
• 21beige#F5F5DC

Un poco más espectacular es la forma de buscar en una lista ya que se hace de manera dinámica, a medida que vamos ingresando el texto, la lista se va filtrando.

Es similar al ejemplo anterior, acá, lo haremos sobre una lista que contiene algunas entradas del blog:

<div id="otralista">
  <span>buscar</span> <input class="search" />
  <ul class="list">
    <li><a class="orden" href="URL_1"> título 1</a></li>
    <li><a class="orden" href="URL_2"> título 2</a></li>
    <li><a class="orden" href="URL_3"> título 3</a></li>
    ......
  </ul>
</div>
<script>
  var opciones = {valueNames: [ "orden" ]};
  var featureList = new List("otralista", opciones);
</script>

Ver/Ocultar el ejemplo

buscar

• Yahoo! WebPlayer Beta: Audio y video
• Circus: Cinco íconos para divertirse
• jCodeCollector: Guardar códigos de modo ordenado
• liteAccordion: Un acordeón para jQuery
• Columnas con CSS: Mosaico de entradas
• Usar CSS para crear etiquetas repetitivas
• El presidente más grande del mundo
• c64 YOURSELF
• Traducciones de textos con el API de Google
• Columnas con CSS: Introducción
• Blogger: La nueva interfaz será obligatoria
• Imágenes y CSS: Todo depende del navegador
• Lúmen
• Si todo falla: Hay que borrar la caché del navegad...
• Navegación con círculos
• El retorno del Lightbox de Blogger
• Jugando con las voces de Google
• Videos fluidos sin librerías
• Google Plus Icons
• Cómo crear una ventana modal propia (final )
• CSSWarp: Curvas al extremo
• Las posiciones absolutas son relativas a "algo"
• Alinear el texto y el avatar en los comentarios
• The bridge
• Picons Social Icon Pack
• La propiedad text-overflow
• Cómo crear una ventana modal propia (3)
• Jugando a superponer contenidos
• Aubade
• hiperurl: Un enlace para múltpes direcciones
• Twitvid: Alojar imagenes y videos sin problemas
• Transiciones sin usar :hover
• Cómo crear una ventana modal propia (2)
• Ryan Larkin
• Eliminar el nuevo LightBox de Blogger
• Los pixeles son unidades indivisibles
• Cómo crear una ventana modal propia (1)
• Mejorar la indexación del blog
• Pop-Up sólo con CSS
• T-Shirts para diseñadores web
• HTML aleatorio con randomtext.me
• Videos de tamaños fluidos con jQuery
• Condicionar widgets según etiquetas
• Proteger Facebook y Twitter con Bitdefender
• Invention of love
• Cinco y un par de dias
• Google Panda al ataque

jFlip: Una vuelta de hoja

jFlip es un plugin de jQuery que genera una galería de imágenes con un singular efecto donde los cambios se ven como si se diera vuelta una página de un libro.

De todos los que he visto similares, es uno de los más simples ya que sólo requiere agregar el script y ejecutar la función, aplicándola sobre listas simples, pudiéndose agregar varias en una misma página.

Lamentablemente, como este tipo de efecto se realiza con etiquetas canvas, en Ias versiones viejas de Internet Explorer hay problemas y proponen usar algún script adicional como ExplorerCanvas peo, no veo que funcione bien así que acá, lo pasaré por alto.

El plugin lo descargamos desde la página del autor, ya sea en su versión full como minimizada y lo agregamos comos siempre, antes de </head>

Luego, el HTML no tiene misterio alguno, colocamos una lista con un ID y las imágenes a mostrar:

<ul id="jflipDEMO">
  <li><img src="URL_IMAGEN_1" /></li>
  <li><img src="URL_IMAGEN_2" /></li>
  <li><img src="URL_IMAGEN_3" /></li>
  <!-- seguimos poniendo cuantas imágenes se nos ocurra -->
</ul>

Y lo ejecutamos de este modo:

<script>
  $("#jflipDEMO").jFlip(300,300,{background:"#903941",cornersTop:true,scale:"fit"});
</script>

Allí es donde podemos establecer algunas opciones; en este caso:

300,300 son el ancho y alto del contenedor (por defecto 300x300)
background es el color de fondo si la imagen es más chica (por defecto es verde)
cornersTop indica si los enlaces para "dar vuelta las hojas" se verán arriba (true) o abajo (false)
scale tiene tres valores posibles:
noresize no hará nada, las imágenes se mostrarán tal cual son
fit ajusta su tamaño para que "entren" en el contenedor
fill re-dimensiona las imágenes para mantener la proporción del aspecto del contenedor

Otro ejemplo:

$("#jflipDEMO").jFlip(350,350,{background:"#903941",cornersTop:false,scale:"fill"});

Trois petits points