Flujo de eventos focus – input – change

En este post anterior vimos como modificar la apariencia de una imagen usando la propiedad transform de CSS y unos input de tipo range.

Tras el post me han preguntado cómo se podía hacer para que la imagen se modificara mientras movemos el slider y no al final, cuando soltábamos el botón.

Existen varias formas pero con jQuery podemos hacerlo de manera muy sencilla, lo importante es que debemos distinguir entre tres eventos:

  • El evento focus que es el que sucede cuando seleccionamos el control del formulario. Al hacer el primer click en él.
  • El evento input que es el que sucede cuando estamos moviendo el campo de tipo range o cuando estamos insertando valor en cualquier otro input
  • El evento change que es cuando soltamos el slider en un campo range o cuando validamos el valor del campo.

De hecho el flujo normal de eventos cuando seleccionamos un input y lo deslizamos es el siguiente.

Focus - Input - Change

Podemos ver ambos eventos funcionando en el siguiente CodePen:

See the Pen Focus – Input – Change by Juan Diego Pérez Jiménez (@pekechis) on CodePen.

Puedes descargar el ejemplo completo aquí.

Hasta el próximo post. Os recuerdo que estoy abierto a propuestas para abrir nuevas series de tutoriales y/o ejemplos.

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.