JMiur [E]

oridomi es un script para animar cualquier tipo de contenido, plegándolo con diferentes efectos, como si fueran hojas de papel pero, claro está, esto sólo ocurrirá en navegadores que soporten las nuevas propiedades de CSS3.

Aunque la documentación del script es abundante ya que se explica cada función de modo detallado, lamentablemente, es poco lo que se indica del modo en que debe usarse y las distintas opciones pero veamos lo que dicen.

Para empezar, oriDomi funciona con o sin librerías anexas así que, luego de agregar el script (el minimizado o el normal) que podemos descargar de Github, debemos indicar cual o cuales serán los contenidos a los que se aplicará y esto, lo hacemos estableciendo una clase o un id. Por ejemplo si lo usara en este tipo de contenido:
<div id="ejemplo" class="ejemplo"><img src="una_imagen" /></ldiv>
debajo, pondría lo siguiente:
<script>var domi = new OriDomi(document.getElementById('ejemplo'));</script>
o bien esto si se usan clases en lugar de ids:
var domi = new OriDomi(document.getElementsByClassName('ejemplo')[0]);
aunque es más sencillo usando jQuery
var $domi = $('#ejemplo').oriDomi();
Y si quiera aplciarlo a varios contenidos distintos, sólo debería usar variables diferentes para cada uno:
var $domiUNO = $('#ejemplo').oriDomi();
var $domiOTRO = $('#otro-ejemplo').oriDomi();
Inicializado de ese modo, las opciones serán las que tiene por defecto pero, pueden ser modificadas; por ejemplo:
var $domi = $('#ejemplo').oriDomi({ vPanels: 3, hPanels: 10, perspective: 200, speed: 500, shading: false });
donde:

hPanels es la cantidad de secciones horizontales
vPanels es la cantidad de secciones verticales
speed es la velocidad
perspective es el valor de la perspectiva
shading indica si se agregarán sombras o no

Todo muy lindo pero ¿cómo lo usaría? Ahí, ya depende de lo que uno quiera hacer. Si sólo deseo mostrar ese contenido (imagen, texto, casi cualquier otra cosa simple o más o menos compleja) bastaría llamar a la función correspondiente, por ejemplo, algo así:
$domi.oriDomi('stairs',50,'left');
donde $domi es el nombre de la variable que le asignamos ($domiUNO, $domiOTRO); .oriDomi es la función genérica y lo que se encuentra entre paréntesis es efecto a usar, sus parámetros y opciones.

Los parámetros son números (positivos o negativos) que indican el ángulo y las opciones básicas indican el sentido de la rotación (left, right, top, bottom) siendo left la opción por defecto.

Los efectos posibles son varios y estos son los que se muestran en el demo inferior:
$domi.oriDomi('accordion', -40, 'right');
$domi.oriDomi('curl', 70, 'left');
$domi.oriDomi('ramp',50, 'top');
$domi.oriDomi('collapse','left');
$domi.oriDomi('stairs',50,'left');
$domi.oriDomi('fracture',30,'right');
$domi.oriDomi('twist',40,'left');
$domi.oriDomi('reveal', -50, 'right');
Hay otros como collapseAlt, foldUp, unfold y uno en particular nos permite restaurar el contendido, o se, volverlo a su estado original:
$domi.oriDomi('reset');

4 comentarios:

Orlando Francisco Menéndez  

Estimado JMiur: sigo viendo tu excelente blog con la misma curiosidad de siempre,... pero sólo para disfrutar de asombrarme con lo que se puede hacer y no hago por mi holgazanería que opone resistencia al aprendizaje aunque tú eres un docente magistral.
Más que nada, con este comentario quiero felicitarte y enviarte un abrazo, además de mi agradecimiento porque cuando te he escrito por alguna duda siempre has sido muy presto a responder.
Sinceramente,
Orlando

JMiur  

Gracias, Orlando :D

Responder
novaweb Colombia  

Hola JMiur Muy bueno este truco seguro lo usare en algunos de mis blogs, pero esta vez mi pregunta es la siguiente: tengo este código: http://dl.dropbox.com/u/25983078/codigoJMiur2.txt pero solo divide dos columnas, como hago para que no sean dos si no tres y que la division sea en partes iguales, MIL GRACIAS por tu ayuda.

JMiur  

hay varias formas, una división en tres columnas bsaándose en ese código podría ser algo así:

<div style="float: left; width: 33%;">texto-columna-izquierda</div>
<div style="float: right; width: 33%;">texto-columna-derecha</div>
<div style="">centro centro</div>
<div style="clear: both"></div>

Puedes ver un poco más sobre ese tema en esta entrada.

Responder

¿Quiere dejar un comentario?

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

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