Píldoras jQuery VIII & CSS3 Transform : Modificando una imagen con campos “range”

En este post vamos a mezclar el uso de jQuery con el uso de una de las propiedades CSS3 más esperadas que nos permite modificar cualquier elemento casi de cualquier manera: la propiedad transform.

El uso experto de esta propiedad transform requiere de la lectura pausada de la documentación, ya sea en MDN o en W3C School y de conocimientos de geometría, así que para empezar únicamente nos vamos a centrar en 4 tipos de transformaciones simples:

  • La rotación 2D que nos permite girar cualquier elemento HTML de manera plana. Tiene una síntaxis muy sencilla: transform: rotate(Xdeg) donde X es el número de grados que queremos girar. Este número podrá ser positivo ( en el sentido de las agujas del reloj) o negativo ( en sentido contrario)
  • El escalado para modificar el tamaño de los objetos HTML. Su síntaxis es similar: transform(x,y) donde x es el factor de escalado en el eje X e Y es el factor de escalado en el eje Y. Si no pongo Y se supone que escalaré de igual manera en ambos ejes.
  • El sesgo en el eje X (skewX) que modifica la perspectiva (en el ejeX) del objeto a transformar en los ángulos especificados. La forma de expresarlo es la siguiente: transform: skewX(Xdeg) donde X es el número de grados del ángulo del sesgo.
  • El sesgo en el eje Y (skewX) que modifica la perspectiva (en el ejeY)  del objeto a transformar en los ángulos especificados. La forma de expresarlo es la siguiente: transform: skewY(Xdeg) donde X es el número de grados del ángulo del sesgo

Para ilustrar el uso de estas cuatro, ya os digo que hay muchas más posibilidades, vamos a ver un ejemplo hecho con jQuery donde mediante el uso de input de tipo range (sliders) vamos a poder realizar estas cuatro transformaciones.

See the Pen Transforming an Image using CSS3 and jQuery by Juan Diego Pérez Jiménez (@pekechis) on CodePen.

Puedes descargar el código completo aquí.

Y de momento esto es todo. Nos vemos en el siguiente post.

 

CSS3 – La propiedad “animation”

CSS3 es una especificación enorme que contiene multitud de nuevas propiedades y características. Sin embargo, una de las más celebradas son aquellas que nos permiten hacer animaciones y efectos usando únicamente CSS3. Aquí tenemos la lista de la propiedades que se pueden animar.

Para poner un ejemplo nos vamos a centrar en la propiedad “animation” y el código de la animación que va a ir detrás de la regla @keyframe.

La propiedad animation es una manera corta de fijar todas las subpropiedades que puede tener una animación. Éstas subpropiedades son:

  • animation-name: Especifica la lista de animaciones que se van a aplicar al elemento. Las animaciones son reglas @keyframes que debemos definir
  • animation-duration: Para especificar la duración en segundo de un ciclo de la animación.
  • animation-timing-function: Para especificar de qué forma van a evolucionar los valores que se van a animar.De manera lineal, más rápido al principio o al final etc..
  • animation-delay: Retardo para el comienso de la animación especificado en segundos.
  • animation-iteration-count: El número de veces que queremos que se repita la animación. Puede ser un número y muchas veces infinite si queremos que la animación se repita siempre.
  • animation-direction: Para especificar si la animación se debe reproducir de manera inversa, normal o en ciclos alternos (va y viene desde el principio hasta el final)
  • animation-fill-mode: Para definir como se deben aplicar los estilos al elementos seleccionado antes y después de la ejecución.
  • animation-play-state: Para definir si la animación está en pausa o funcionando. Por defecto, como es normal pensar, estará funcionando.

No siempre tenemos que usar todas las subpropiedades, así por ejemplo podemos especificar lo siguiente:

En cuanto a la regla @keyframe nos va a servir para controlar los pasos medios de una animación. Puede tener dos formas.

  • La primera donde tendremos un from y un to estableciendo los valores css iniciales y finales para las animaciones
  • La segundo donde podremos establecer mediante porcentajes tanto puntos intermedios como queramos

Aquí podemos ver un ejemplo de cada caso

 

Ilustraremos todo esto con un ejemplo simple, un pulso.

See the Pen CSS3 Animation Pulse Example by Juan Diego Pérez Jiménez (@pekechis) on CodePen.

Para más información podéis visitar la referencia en MDN y la página de W3C School.

El ejemplo completo se puede descargar desde mi repositorio.

 

 

Píldoras jQuery III – Acordeón Vertical

Vamos con la tercera entrega de píldoras jQuery. Esta vez vamos a ver como hacer un acordeón vertical. El objetivo es conseguir algo similar a la imagen que podemos ver más abajo, de tal manera que cuando hacemos click en el título de una sección esa sección se despliega y el resto de las secciones se contrae:

vertical_accordion

El código completo se puede descargar aquí.

El HTML es muy sencillo:

El árbol DOM correspondiente, que nos ayuda a entender luego cómo usamos jQuery es:

dom_accordion

Los estilos iniciales de la página son los siguientes:

Y ahora la parte importante el script que nos permite definir el comportamiento del acordeón:

Y esto es todo, nos vemos en la siguiente píldora, un menú anidado de tres niveles con jQuery.

 

Píldoras jQuery II – Barra lateral deslizante

Seguimos con la segunda entrega de las pequeñas píldoras jQuery. En esta entrega vamos a crear una barra lateral deslizante. El código completo del ejemplo puede ser descargado aquí.

El HTML, ya que el resto de la página está vacía es muy sencillo.

El posicionamiento de esa barra, los bordes y los colores lo haremos con CSS. Es también una hoja de estilos muy sencilla.

Una vez ya tenemos todo colacado y con la apariencia que queremos podemos empezar a utilizar jQuery para modificar y hacer la página web y el DOM interactivo. El script que vamos a necesitar lo colocaremos justo antes de cerrar la etiqueta body y será el siguiente:

Y esto es todo. En el próximo capítulo veremos como hacer el típico efecto “acordeón” con varios contenidos en una misma página.