oridomi: Contenidos plegables

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');