Hoy nos gustaría compartir un par de estilos y efectos para los menú. La barra lateral fuera de vista (canvas) es ampliamente utilizado y ya hemos creado algún efecto inspiración antes. Al igual que con todo, evoluciona en estilo y hoy queremos mostrar un nuevo conjunto de efectos elegantes para su inspiración.
Diferentes diseños y transiciones sincronizadas del menú y la página puede hacer que todo parezca más interesante y podemos hacer uso del espacio disponible para menús laterales y controles, SVG nos permite jugar con formas orgánicas y añadimos algunos movimientos inesperados. Utilizamos transiciones, animaciones CSS creados con bounce.js y IVS animados con la ayuda de Snap.svg.
Tengan en cuenta que los efectos sirven de inspiración y trabajarán (mejor) en los navegadores modernos.
Esta primera demo está inspirado en el tiro Dribbble.
La idea detrás del efecto caja de la esquina es traducir una caja fuera del visor mientras se mueve el contenido a la esquina opuesta, también, creando un efecto de ventana.
A raíz de la caja de la esquina simple, podemos pensar en otra “capa” que se moverá en la parte superior de la caja anterior y eso hará que el contenido se traduce a otro “paso”.
Este menú se expande desde el botón de menú en sí, ocupando un espacio que fue revelado empujando hacia abajo el contenido de la página, es posible que ya hayan visto este efecto.
Este menú no es fuera de vista, pero es más como un cuadro de expansión con una superposición de contenido. Aquí usamos una animación gelatinosa creado con bounce.js .
Esta demo es usando Snap.svg para animación de trazados de SVG. Usando una combinación de una ola de morphing con apariciones de elementos de menú diferidos, se crea una sensación orgánica. Fuente
Esperamos que hayan disfrutado de los efectos e inspirarte! y recuerden darle LIKE a nuestra pagina en Facebook y siguenos en Twitter, y por ultimo compartir.
