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.

 

Píldoras jQuery I – Descripción de una imagen

Me encanta jQuery, es potente, es fácil y sobre todo tiene muchos selectores en común con CSS lo que te permite avanzar muy rápidamente si controlas un poquito de HTML y CSS.

Por eso mismo lo incluyo en mi curso de Lenguaje de Marcas. Con poca explicación y usando la referencia jQuery vamos directos al grano buscando siempre hacer ejemplos lo más prácticos posible.

Con este post inauguro la publicación de dichos ejemplos prácticos en la web. Siempre parto de una plantilla con jQuery bien referenciado e instalado que podéis encontrar aquí.

Partiendo de esa plantilla vamos realizar un ejemplo que cuando pasemos el ratón sobre una imagen nos muestre un texto largo descriptivo de la misma superpuesto en parte inferior de la imagen.

El ejemplo completo lo podéis descargar aquí y consta de los siguiente ficheros:

  • index.html :  El archivo principal, la página web en la que vamos a usar jQuery
  • styles. css: La hoja de estilos de la página web que usaremos para posicionar los distintos elementos (la imagen y la descripción que va a ser un párrafo dentro de un div)
  • js/jquery-3.1.1.min.js: Que es la libería jQuery que hemos puesto dentro de la carpeta js
  • img/image.pn: La imagen sobre la cual tendré que pasar el ratón para obtener la descripción

El html es muy básico ya que es un ejemplo para demostrar como se usa jQuery. Por un lado en la cabecera tendremos que decir que vamos a usar jQuery en nuestra página.

Dentro del cuerpo (<body>) tendremos el contenido HTML

La hoja de estilos que usaremos es muy simple:

Y por último justo antes de cerrar la etiqueta body añadiremos el script que usará jQuery:

Y ya está…efecto común y muy sencillo de hacer. Seguiremos con otro. El próximo una barra lateral que podamos ocultar o mostrar en la pantalla.