Cristalab

jueves, 13 de septiembre de 2012

Cristalab

Obtener el ancho en píxeles de un texto con jQuery
Animación de partículas formando un planeta en After Effects
El MundoReal(tm)

Obtener el ancho en píxeles de un texto con jQuery

Posted: 13 Sep 2012 09:23 AM PDT

He creado este plugin en jQuery para obtener el tamaño de un texto y de esta forma, por ejemplo, recortar el texto después de una cantidad de píxeles para que se ajuste mejor en la estructura de la Web.

Coloca el siguiente código en tu web:

Código :

  (function($){      $.fn.pixelTextWidth = function(){     $('body').append('<span style="display:none" id="charw"></span>');//Creamos un span oculto          var texto = $(this).text();//obtenemos su texto          var ancho = 0;          for(var i = 0; texto.length > i; i++){              if(texto[i] != ' '){//si el texto no es un espacio insertamos en el span el carácter                  $('#charw').text(texto[i]);              }else{//si el texto es un espacio debemos hacer esto porque no los contará                  $('#charw').html('&nbsp;');              }              ancho += $('#charw').width();//Obtenemos el ancho en pixeles del span,     }                                           //por lo tanto obtenemos el del caracter actual          $('#charlen').remove();//borramos el span          return ancho;//retornamos el ancho en pixels      }  })(jQuery);

Lo siguiente nos devolverá el valor del ancho en píxeles:

Código :

 $valor = $('id del texto').pixelTextWidth();

Ejemplo completo

Código :

<html>  <head>  <script src="jquery.js" language="javascript" type="text/javascript"></script>  <script language="javascript">  (function($){      $.fn.pixelTextWidth = function(){     $('body').append('<span style="display:none" id="charw"></span>');          var texto = $(this).text();          var ancho = 0;          for(var i = 0; texto.length > i; i++){              if(texto[i] != ' '){                  $('#charw').text(texto[i]);              }else{                  $('#charw').html('&nbsp;');              }              ancho += $('#charw').width();     }          $('#charlen').remove();          return ancho;      }  })(jQuery);    $(document).ready(function(){          var val = $('#texto').pixelTextWidth();     $('#tam').text(val);  });  </script>  </head>  <body>      <span id="texto">Texto con caracteres de tama&ntilde;os diferentes</span>      <br/>su tama&ntilde;o es de: <span id="tam"></span>px  </body>   </html>

Sugerencias para mejorar el plugin siempre bienvenidas :wink:

Animación de partículas formando un planeta en After Effects

Posted: 20 Aug 2012 06:35 AM PDT

En este videotutorial de After Effects nos introducimos en una dimensión estelar con la creación de esta composición terminada en una implosión esférica y para la que usaremos herramientas, que darán soporte a la simulación de las estrellas y otros elementos adicionales, como nubes y texturas de soporte, que fusionaremos y deformaremos convenientemente para ajustarla al efecto deseado y completaremos con títulos animados de forma simple con un sencillo ajuste preestablecido.

Generaremos una primera capa para componer el diseño de fondo, a través de efectos que simularán estrellas y nubes gaseosas espaciales, con Starburst y que ajustaremos con un desenfoque gausiano y añadiremos detalle con el generador fractal.

Realizaremos una fusión de ambos conjuntos y trabajaremos las opciones de opacidad, junto con el efecto CC Lens para deformar y completar el diseño propuesto, añadiendo unos títulos simples animados.