¿Cómo usarlo?
1. Incluya las bibliotecas de Dominus:
<script src=¨dominus/core.js¨></script>
<script src=¨dominus/helper.js¨></script>
<script src=¨dominus/scroll.js¨></script>
2. Incluya una hoja de estilo Çrypta con las animaciones que necesitará:
Por ejemplo en nuestro caso:
<link rel=¨stylesheet¨ href=¨dominus/core.css¨>
3. Juegue con el atributo dom:
<p dom=¨if: click, on:h1, do: pulse animated, to:h2¨></p>
Ejemplo:
https://codepen.io/darielnoel/pen/trnzk?editors=100
Entendiendo conceptos:
Primero, debes decidir:
¿Qué quiero que haga mi página?
Para esto usted puede comenzar a decidir...
- Qué evento desea capturar, interactuar o responder.
- Elementos HTML que necesita modificar o animar.
- Qué acciones o animaciones desea que sucedan sobre esos elementos.
¡Bien!, ahora usando esos elementos... ¿Cómo escribir la sentencia de çrypta-dominus?
Puede probar completando con los elementos anteriores el siguiente fragmento:
If: Evento (click, scroll, mouseover y más...) , On: Elemento HTML (selector css) , Do: Hacer acciones o animaciones (rotar animación) , To: Elemento Html a modificar
...y finalmente copie la frase en algún elemento HTML como el siguiente ejemplo.
<p dom=¨if: click, on:h1, do: pulse animated, to:h2¨></p>
¡Eso es todo! pero usted puede jugar con la sentencia de çrypta-dominus mucho más, sigue buscando en este sitio, usted encontrará más detalles y más ejemplos. Su versatilidad lo va a sorprender.
El lenguaje de Çrypta-dominus
Una oración básica general es como sigue:
If ALGÚN EVENTO (click, scroll, etc) , On CUALQUIER ELEMENTO (css selector) , Do ALGÚN COMPORTAMIENTO (animation, $addClass, $remove, etc) , To CUALQUIER ELEMENTO
Ejemplo:
<div dom=¨if: click, do: $toggleClass red, to: .box¨>If you click me, </div>
Cada vez que el usuario haga clic en el elemento con esta frase escrita, el color rojo se cambiará en los elementos con la clase ¨box¨ establecida.
Definición formal del lenguaje:
dom: Sentence 1; ... ; Sentence n
Sentencia: Definition, ... , Definition n
Definición: if | on | do | to | before | after | helper
Un dom está compuesto por una o varias oraciones, cada frase termina con (;) y está formada por una o varias definiciones.
Ejemplos:
<header dom=¨if: click, do: wobble; if: scroll, on: window, do: swing¨>
<!-- ... -->
</header>
<div class=¨demo-square demo1¨ dom=¨if: click, do: flipInY, to: .container-box¨></div>
<input id=¨name¨ type=¨text¨ dom=¨if: focus, do: wobble, to: p¨>
Pero le animamos a que le eche un vistazo más de cerca, cláusula por cláusula ... tal vez ... usted puede encontrar por aquí más detalles brillantes.
Sentencia y Definiciones
Llamamos ¨Definición¨ a cada parte de la oración çrypta-dominus:
Deficiones básicas: If, On, Do, To
Y definiciones extendidas: Before, After, Helper, que permite ejecutar más de una acción dentro de la misma oración.
¡Sigue leyendo y descubre la magia detrás de esas Definiciones!
If
Debe utilizarlo para especificar en respuesta a qué evento debe ser la acción a ejecutar. Puede encontrar una lista detallada de eventos aquí:
https://developer.mozilla.org/en-US/docs/Web/Reference/Events
Algunos de los eventos se muestran a continuación como ejemplos de guía: click, focus, scroll, DOMContentLoaded ...
<!-- Si hace click, elimina el elemento actual -->
<p dom=¨if: click, do:
$remove¨> If you click here this sentence will be gone!</p>
<!-- Si mouseover sobre header hace
bounce (animación rebote) a footer -->
<footer dom=¨if: mouseover, on: header do: bounce¨>
<!-- ... -->
</footer>
On
Puede utilizarlo para especificar el propietario del evento. La sentencia Dominus se utilizará sólo si el evento anterior se produce sobre el elemento a especificar aquí con un selector CSS.
Si no se especifica [On], el elemento que contiene la declaración lo posee.
Ejemplos:
Especificación del propietario del evento:
<!-- Si click en footer anima header. -->
<header dom=¨if: click, on: footer, do: swing¨>
<!-- ... -->
</header>
<footer>
<!-- ... -->.
</footer>
Omitiendo el propietario del evento:
<!-- Si click en header anima footer. -->
<header dom=¨if: click, do: swing, to: footer¨>
<!-- ... -->
</header>
<footer>
<!-- ... -->
</footer>
Omitiendo el propietario del evento y otra cosa:
<!-- Si click en header anima header. -->
<header dom=¨if: click, do: swing¨>
<!-- ... -->
</header>
Do
Aquí se escribe la acción o animación que desea que suceda una vez que el evento se produce. ¿Qué acciones y animaciones se pueden hacer?
1- Puede incluir su propia hoja de estilo con las animaciones que necesites.
<link rel=¨stylesheet¨ href=¨myanimations.css¨>
<!-- ... -->
<!-- Si click sobre header anima footer con tu propia animación -->
<header dom=¨if: click, do: myAnimation, to: footer¨>
<!-- ... -->
</header>
2- Puede añadir, eliminar o alternar clases CSS que lo veremos mas adelante.
<input dom=¨if: click, on: .tab, do: $toggleClass active, to: .navbar¨>
3- Puede eliminar o clonar elementos html que lo veremos mas adelante.
<!-- Elimina el elemento actual -->
<div dom=¨if: click, do:
$remove¨> </div>
<!-- Clona tres veces el elemento HTML con id ¨clone¨ y anexarlo como hijo del padre del mismo elemento -->
<div dom=¨if: click, do:
$clone #clone | 3¨> </div>
Puede escribir su propia función Do.
To
Define los elementos afectados por la acción de respuesta o animación. Para nombrar esos elementos puedes usar un selector CSS, un Selector de Dominus o el destino de la palabra.
Si no se especifica [To], el elemento que contiene la declaración lo posee.
Ejemplo:
<!-- Si click en header hacer animación swing a footer.-->
<header dom=¨if: click, do: swing, to: footer¨>
<!-- ... -->
</header>
<footer>
<!-- ... -->
</footer>
Before
Puede utilizarlo para especificar el nombre de la función que se ejecutará antes de que se inicie la acción o la animación (desde la definición).
En los casos de animación, con esta función se puede controlar la ejecución de la animación lanzando el objeto Animation Context. Lea Escribir funciones antes y después para obtener más información.
Ejemplo:
<!-- Si click en header ejecutar beforeAnimationFunction y hacer animación bounceIn-->
<header dom=¨if: click, do: bounceIn, before: beforeAnimationFunctionName¨>
<!-- ... -->
</header>
After
Puede utilizarlo para especificar el nombre de la función que se ejecutará después de que finaliza la acción o la animación (desde la definición). Consulte Escritura de funciones antes y después.
Ejemplo:
<!-- Si click en header animarlo con animación bounceIn y ejecutar afterAnimationFunction -->
<header dom=¨if: click, do: bounceIn, after: afterAnimationFunctionName¨>
<!-- ... -->
</header>
Helper
Nombre del ayudante que contiene las declaraciones de función después y antes. Si no se especifica, se utiliza el auxiliar ¨default¨. El ayudante default contiene algunas funciones útiles, como removeAnim, que permite eliminar las clases asociadas a la animación cuando termina la animación.
Ejemplo:
<!-- Si click en header animarlo con animación bounceIn and ejecutar afterAnimationFunction -->
<header dom=¨if: click, do: bounceIn, after: afterAnimationFunctionName, helper: animationHelperInstanceName¨>
<!-- ... -->
</header>
Funciones Helpers
¿Cómo poner o quitar clases en los elementos html?
1- Primero, incluye...
<!--La biblioteca principal-->
<script src=¨anijs-min.js¨></script>
<!--El ayudante de manipulación de dom-->
<script src=¨anijs-helper-dom-min.js¨></script>
2- Entonces dentro de la oración del anijs, puedes utilizar las palabras reservadas:
$addClass
$removeClass
$toggleClass
Mira el siguiente ejemplo:
Clase Individual
<input data-anijs=¨if: click, on: .tab, do: $toggleClass active, to: .navbar¨>
Cada vez que el usuario haga clic en un objeto html con la clase ¨tab¨ asignada, la clase adicional ¨active¨ será
aplicada o eliminada en consecuencia, en los elementos con la clase ¨navbar¨ establecida.
Clases múltiples
<div data-anijs=¨if: click, on: .tab, do: $addClass open primary-color, to: modal¨></div>
Cada vez que el usuario haga clic en un objeto html con la clase ¨tab¨ asignada, se agregarán las
clases adicionales ¨open primary-color¨ a los elementos con la clase ¨navbar¨ establecida.
Compruebe un ejemplo del mundo real en
https://codepen.io/darielnoel/full/FvCbx
Más funciones Helpers
¿Cómo eliminar y clonar elementos html?
1- Primero, incluye...
<!--La biblioteca principal-->
<script src=¨dominus/core.js¨></script>
<!--El ayudante de manipulación de dom-->
<script src=¨dominus/helper.js¨></script>
2. Entonces dentro de la oración del Dominus puedes agregar las palabras remove o clone en cualquiera de las definiciones ´do:´, ´after:´ o ´before:´.
remove
Elimina un elemento o elementos de la página HTML. Esta función puede tomar uno o más parámetros separados por ¨|¨ como sigue: param1 | param2 | paramN ... Cada parámetro es un selector CSS
Ejemplos:
<!--Elimina el elemento actual-->
<div dom=¨if: click, do:
$remove¨> </div>
<!--Elimina elementos HTML que tienen el nombre de clase .remove-->
<div dom=¨if: click, do:
$remove .remove¨> </div>
<!--Elimina el elemento HTML con el ID #remove-->
<div dom=¨if: click, do:
$remove #remove¨> </div>
<!--Elimina elementos HTML con el nombre de etiqueta p-->
<div dom=¨if: click, do:
$remove p¨> </div>
<!--Elimina todos los elementos HTML con el nombre de clase remove o el identificador #remove o el nombre de etiqueta p-->
<div dom=¨if: click, do:
$remove .remove | #remove | p¨> </div>
Replica los elementos html. Esta función puede tomar dos parámetros como máximo, separados por ¨|¨ como sigue: param1 | param2 El primer parámetro es un selector CSS que indica qué elementos van a ser clonados. El segundo parámetro es el número de veces que se clona el elemento
Ejemplos:
<!--Clona el elemento HTML actual y lo anexa como hijo del padre del mismo elemento-->
<div dom=¨if: click, do:
$clone¨> </div>
<!--Clona tres veces el elemento HTML con id ¨clone¨ y lo anexa como hijo del padre del mismo elemento-->
<div dom=¨if: click, do:
$clone #clone | 3¨> </div>
<!--Clona el elemento HTML actual y lo anexa como hijo del elemento con id ¨otherParent¨-->
<div dom=¨if: click, do:
$clone, to: #otherParent¨> </div>
<!--Clona el elemento HTML con el identificador ¨clone¨ y lo anexa como hijo del elemento con id ¨otherParent¨-->
<div dom=¨if: click, do:
$clone #clone, to: #otherParent¨> </div>
Por bit
