JMiur [E]

Esta es una forma de crear una nube de etiquetas animadas utilizando jQuery publicada por devirtuoso.com y que, tal vez, con algunos cambios, podría aplicarse incluso a las etiquetas de Blogger, cosa que quedará para quien quiera investigar el asunto.

El HTML no es otra cosa que una lista común:
<div id="listaE">
  <ul>
    <li><a href="url_etiqueta_1">etiqueta 1</a></li>
    <li><a href="url_etiqueta_2">etiqueta 2</a></li>
    <li><a href="url_etiqueta_3">etiqueta 3</a></li>
    <!-- continuamos agregando los distintos enlaces -->
  </ul>
</div>
Y el CSS básico:
<style>
  #listaE {
    display:none;
    overflow:hidden;
    position:relative;
    /* dimensionamos el contenedor y lo centramos */
    margin:0 auto;
    padding:20px 40px;
    height:500px;
    width:500px;
  }
  #listaE ul, #listaE li {
    /* eliminamos cualquier propiedad por defecto de la lista */
    list-style:none;
    margin:0;
    padding:0;
  }
  #listaE a {
    position:absolute;
    text-decoration: none;
    /* establecemos color y tipo de fuente del texto */
   color: #FFF;
  }
  #listaE a:hover {
    /* y del efecto hover sobre los enlaces */
    color:#FFF !important;
    opacity: 1 !important;
  }
</style>
Por último, el script en si mismo que ejecutamos cuando se termine de cargar la página:
<script>
$(document).ready(function(){
  var element = $('#listaE a');
  var offset = 0;
  var stepping = 0.03;
  var list = $('#listaE');
  var $list = $(list);
  $list.mousemove(function(e){
    var topOfList = $list.eq(0).offset().top;
    var listHeight = $list.height();
    stepping = (e.clientY ) /  listHeight * 0.2 - 0.1;
  });
  for (var i = element.length - 1; i >= 0; i--){
    element[i].elemAngle = i * Math.PI * 2 / element.length;
  }
  setInterval(render, 20);
  list.show();
  function render(){
    for (var i = element.length - 1; i >= 0; i--){
      var angle = element[i].elemAngle + offset;
      x = 120 + Math.sin(angle) * 30;
      y = 45 + Math.cos(angle) * 30;
      size = Math.round(20 - Math.sin(angle) * 20);
      var elementCenter = $(element[i]).width() / 2;
      var leftValue = (($list.width()/2) * x / 100 - elementCenter) + "px";
      $(element[i]).css("fontSize", size + "pt");
      $(element[i]).css("opacity",size/100);
      $(element[i]).css("zIndex" ,size);
      $(element[i]).css("left" ,leftValue);
      $(element[i]).css("top", y + "%");
    }
    offset += stepping;
  }
});
</script>

12 comentarios:

Rosendo Ramírez Aquino  

Wow facinante me gusto mucho :D

Responder
Potro Sanz  

Hola, donde tengo que poner cada cosa? Especifica por favor, siento molestarte tanto

JMiur  

Como siempre. El CSS y el script antes de &lt/head> y el HTML a donde quieras mostrarlo.

Potro Sanz  

Gracias =D

Potro Sanz  

No me sale pero, gracias de todos modos

Responder
Gem@  

Muy vistosa y por lo que veo funciona mejor que aquella de WP-Cumulus :)

JMiur  

Mejor porque no requiere Flash aunque es un poco engorroso de adaptar.

Responder
ramon martinez i travessa  

En primer lugar desearte un feliz año. Me encuentro con una duda a ver si me la puedes solucionar como siempre acabar ilustrandonos. Quisiera resaltar una de las etiquetas, tanto cambiandole el tamaño como el color. Es esto posible? He probado agregandole atributos al html donde agrego las etquetas sin ningun resultado favorable. Sin mas, gracias por adelantado por tu ayuda y simplemente desearte un año mas de exitos en esta gran web. Saludos

JMiur  

Feliz año, Ramón.

¿Qué etiqueta queires resaltar? ¿Tienes algún ejemplo donde pueda verse la forma en que están colocadas?

Responder
ramon martinez i travessa  

Inestimable amigo:
Gracias por atenderme tan rapidamente. En primer lugar, adjunto la dirección del bloc donde instalé "la nube de etiquetas" para que asi puedas verlo in situ. Se trata de la transcripcion de un conocido poema en lengua catalana. Ginesta (retama) es el nombre de una flor silvestre, se da la circunstancia que tambien, es el nombre de mi hija, bien pues, una buena excusa que, aparte de ser ocasión para el entretenimiento, tambien puede ser un pequeño homenaje a mi hija. La etiqueta que quisiera singularitzar con color y tamaño distinto es precisamente, el título (LA GINESTA) Compredes?
No dudo que me atenderás con tu cordial atencion de siempre, te agradezco pues, de antemano la respuesta. Muchisimas gracias!
Mis más sinceras felicitaciones por la solvencia de tu bloc y el acierto en la selección de los temas que nos ofreces Saludos
ramon

la direccion del bloc es la siguiente: http://ramonades.blogspot.com.es/

JMiur  

En el caso de este sistema es bastante sencillo; como cada línea se escribe manualmente, basta agregarle propiedades de estilo a la etiqueta que en tu caso, sería la etiqueta A.

Por ejemplo, si cambias:

<li><a href="#">La ginesta</a></li>

por:

<li><a href="#" style="color:red;">La ginesta</a></li>

ese texto se verá en color rojo. Basta que vayas agregando las propiedades que quieras en cualquier línea,: fuentes, colores tamaños.

ramon martinez i travessa  

Estimado amigo;
Muchas gracias por tus indicaciones. Como veras si visitas el bloc, la cosa funciona a satisfacción y ha quedado bien.Agradecido como de costumbre, aprovecho la presente para saludarte afectuosamente
Ramon

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR