JMiur [E]

Rotate3Di es iun plugin para jQuery que permite generar efectos de rotación de cualquier contenido HTML pero que, lamentablemente, no funcionará en las versiones de Internet Explroer anteriores a la 9; de todos modos, vale la pena verlo y tenerlo en cuenta porque es muy original y bastante simple de usar.
En la la página de los desarrolladores podemos ver algunas de las características básicas y los scripts los descargamos desde github.

Para empezar, debemos tener jQuery, siempre antes de </head>:
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js'></script>
y luego, los dos scripts necesarios para el plugin:
<script type='text/javascript' src='URL_jquery-css-transform.js'></script>
<script type'='text/javascript' src='URL_rotate3Di.js'></script>
Estos últimos, también los podemos agregar directamente en la plantilla:
<script type='text/javascript'>
//<![CDATA[
  ... aquí copiamos el contenido del archivo jquery-css-transform.js ...
  ... aquí copiamos el contenido del archivo rotate3Di.js ...
//]]>
</script>
Listo. No hace falta nada más; de ahora en adelante, podemos utilizar las funciones. Lo básico es generar una rotación fija aunque para esto no haría falta falta ningún script, bastaría usar el CSS e incluso, podría hacerse que funcionara en Internet Explorer. De todos modos, la sintaxis sería esta:
$('#nombreID').rotate3Di(grados);
Por ejemplo:
<div id="demo3destatico"> un texto </div>
<script>$('#demo3destatico').rotate3Di(60);</script>
Lo más interesante, claro, es usar alguna clase de animación; en ese caso, las sintaxis es similar pero se le agrega un parámetro extra:
$('#nombreID').rotate3Di(grados, duración);
donde:

grados es un valor positivo o negativo (180, -180) 0 una palabra clave como flip, unflip o toggle
duracion indica el tiempo del efecto y es un valor en microsegundos o bien una palabra clave como slow,'normal o fast

y para que esto tenga cierta lógica, llamamos a esa función con un evento click; por ejemplo:
<div id="demo3dclick"> un texto </div>
<script>$('#demo3dclick').click(function () {$(this).rotate3Di('-=180', 1000);});</script>

Algo similar podríamos hacer agregando ese evento click en una clase y de esa manera, todos los elementos con esa clase tendrían el mismo efecto:
<span class="demo3dclase">UNO</span>
<span class="demo3dclase">DOS</span>
<span class="demo3dclase">TRES</span>

<script>$('.demo3dclase').click(function () {$(this).rotate3Di('toggle', 1000);});</script>
Un ejemplo más.

Esta es una variación de un menú o barra de navegación que muestran en la página de referencia y que es bastante más complejo pero da muchas posibilidades:

<style>
  #nav-list-example { /* usaremos una lista */
    height: 128px;
    margin: 0;
    padding: 0;
    width: 600px;
  }
  #nav-list-example li { /* cada item de la lista */
    float: left;
    list-style-type: none;
    height: 128px;
    margin:0 10px;
    padding:0;
    position: relative;
    width: 128px;
  }
  #nav-list-example li div { /* el contenido */
    height: 128px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 128px;
  }
  #nav-list-example li div.back { /* el contenido visible con el efecto hover */
    background-color: #ABC;
    color: #FFF;
    left: -999em;
    text-align: center;
  }
  #nav-list-example li div.back p { /* los textos del contenido */
    -moz-border-radius: 10px;
    background-color: #89A;
    border: 2px solid #FFF;
    margin: 10px; 
    font-size: 15px;
    line-height: 1;
    padding: 10px;
  }
</style>

<ul id="nav-list-example">
  <!-- item 1 -->
  <li>
    <!-- cada item visible de la lista es una imagen de 128x128 -->
    <div class="front"> <img src="URL_imagen1" /> </div>
    <!-- lo que se muestra con el efecto hover es cualquier otro contenido -->
    <div class="back">
      <p> Pellentesque id nulla mattis libero venenatis massa nunc. </p>
    </div>
  </li>
  <!-- item 2 -->
  <li>
    <div class="front"> <img src="URL_imagen2"/> </div>
    <div class="back">
      <p style="font-size: 80px;"> A </p>
    </div>
  </li>
  <!-- item 3 -->
  <li>
    <div class="front"> <img src="URL_imagen3"/> </div>
    <div class="back">
      <p style="font-size:11px">Quisque luctus iaculis ante, in commodo enim tempus non. In dapibus. . Vivamus iaculis, tortor non.</p>
    </div>
  </li>
  <!-- item 4 -->
  <li>
  <div class="front"> <img src="URL_imagen4"/></div>
    <div class="back">
      <img src="URL_deotraimagen"/>
    </div>
  </li>
</ul>

<script type="text/javascript">
$(document).ready(function () {
  $('#nav-list-example li div.back').hide().css('left', 0);
  function mySideChange(front) {
    if (front) {
      $(this).parent().find('div.front').show();
      $(this).parent().find('div.back').hide();
    } else {
      $(this).parent().find('div.front').hide();
      $(this).parent().find('div.back').show();
    }
  }
  $('#nav-list-example li').hover(
    function () {
      $(this).find('div').stop().rotate3Di('flip', 250, {direction: 'clockwise', sideChange: mySideChange});
    }, 
    function () {
      $(this).find('div').stop().rotate3Di('unflip', 500, {sideChange: mySideChange});
    }
  );
});
</script>

8 comentarios:

Graciela  

Guau Guau qué bonito!

Veo Veo ¿qué vés? cambios en las entradas similares :P

Responder
JMiur  

Uno tiene derecho a divertirse :D

Responder
Adrián J. Messina  

@JMiur
Y me resisto y me resisto a nos hagas conocer que método has utilizado para estas entradas relacionadas.
Pero esperaré a que seamos muchos... Jaja.

Un abrazo.

Responder
JMiur  

Esta pensado que así sea como parte de una serie y la primera es la publicada hoy que habla sobre JSON.

Responder
Graciela  

A divertirse, Sí! así que tiene que ver con el culebrón...mire mire usted :D

Responder
Adrián J. Messina  

¡La estoy leyendo y aprendiendo al respecto, sigamos con las clases!

Responder
Ramon Martinez i Travessa  

Hola
Tengo un pequeño problema, quiero utilizar Jquery en Blogger y no se si es compatible. Podeis echarme una mano? Gracias
Teneis un magnifico Blog con cantidad de recursos

Responder
JMiur  

Si lo que preguntas es si puedes usarlo en Blogger, la respuesta es si.
Si usas otras librerías ... ahí habría que ver; por ejemplo si tienes Prototype no puedes usar JQuery y visceversa.

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