Trasladar un objeto con css y un pequeño script

El efecto de sliding que se encuentra sobre todo en los carousels y en la versión móvil del menú de un website, se puede ahora realizar con 2 líneas de CSS, con la ayuda del la propiedad transform asociada con el valor translate (0, 0).

Los valores (0, 0) definen la ubicación inicial del objeto (x, y), y el lugar a donde quieres que se desplaza. Una vez eso definido habrá que añadir un pequeño script con el fin de indicar la interacción que va a provocar el movimiento del objeto. En mi ejemplo, se dispara al cliquear en un botón.


Mini tutorial de transform: translate (0, 0)

Hace poco utilice este efecto para desplegar las opciones de un filtro que clasifica la lista de resultados de una búsqueda. La combine con la propiedad transition asociada al valor transform ease-in / ease-out, para que esas mismas opciones aparezcan / desaparezcan de manera suave.

El filtro cerrado, en su posición original y se aplicó al contenedor de las opciones del filtro una opacidad de 0:

El filtro abierto. Se desplazo de la izquierda a la derecha, y se aplicó al contenedor de las opciones del filtro una opacidad de 1:

Para disparar este efecto, es necesario añadir un pequeño script que especifica que al cliquear en el botón “filtros”, se tiene que añadirle una clase, y al darle clic de nuevo, se le quita esa clase. En mi ejemplo añadí la class “move-sliding”

<script>
$(‘a#filter-btn’).click( function(){
   if ( $(’#filter’).hasClass(‘move-sliding’) ) {
       $(’#filter’).removeClass(‘move-sliding’);
   } else {
       $(’#filter’).removeClass(‘move-sliding’);
       $(’#filter’).addClass(‘move-sliding’);    
   }
});
</script>

Ahora falta definir los estilos del botón en su estado original:

transition:transform .15s ease-in,  transform: translate(-100%, 0)

Y su estilo después de darle clic, cuando le esta asociado la class “move-sliding”:

transition:

transform .2s ease-out,  transform: translate(0, 0)

Librerías Javascript

Aún si por mi buena educación aprenderé bien y a fondo javascript, no puedo ignorar las herramientas que me ayudan al cotidiano a crear interacción con los usuarios :

la famosísima librería jQuery

el impresionante D3.js que permita dar vida, e interpretación gráfica a datos utilizando HTML, SVG, y CSS.