Makisu: navegación 3D CSS inspirada en el sushi para jQuery
Una mejor compatibilidad con los navegadores ha hecho que los experimentos de CSS se vuelvan más populares en estos días. Mi favorito personal hasta hoy era Paperfold CSS. Por supuesto también vimos a Meny y algunos otros planteamientos más lúdicos. Makisu es un concepto completamente nuevo para los menús de navegación desplegables realizados mediante el uso de transformaciones CSS 3D. Pocas veces he visto un resultado tan impresionante. Lo siento Paperfold CSS, os dejo por Makisu…
Makisu – la estera de bambú virtual
Justin Windle, también conocido como soulwire, nacido en el Reino Unido, pero que ahora vive en los Estados Unidos, desarrolló Makisu, un concepto que se asemeja al viejo Paperfold CSS, pero va mucho más allá. En realidad, es fácilmente implementable en sitios web en vivo a través de su iteración como complemento de jQuery. El extraño nombre proviene del idioma japonés, donde un Makisu es una estera de bambú que se usa para producir cierto tipo de sushi o simplemente para exprimir la humedad de las frutas y otros alimentos demasiado húmedos.
Makisu completamente desplegadoEl Makisu de Justin Windle no se puede usar para producir sushi, obviamente, tampoco se pueden exprimir jugos de frutas con él. De todos modos, échale un vistazo e inmediatamente entenderás el nombre. Los menús de navegación de Makisu se despliegan como una estera de bambú suelta mientras se sostiene por un lado. Los elementos de navegación se despliegan y la estera de bambú virtual incluso se balancea hacia adelante y hacia atrás, creando un efecto realista. Los menús desplegables se componen de elementos de lista, uno por línea. Estos elementos se pueden alternar para mostrar o permanecer invisibles. Desplegar el menú desplegable conduce al efecto bambú.
Makisu es un mero concepto CSS que utiliza transformaciones CSS 3D. Como tal, solo funciona en algunas de las versiones más recientes de los navegadores, como son Chrome, Firefox, Safari y los navegadores estándar en Android, iOS y Blackberry. Internet Explorer 10 también debería mostrar Makisu correctamente. Como estoy probando algunos de los Ultrabooks más recientes en este momento, tomé uno y encendí IE 10 para verificar dos veces si algo tan hermoso pero al mismo tiempo exigente realmente, quiero decir realmente como en real no realmente como en una especificación papel, trabajar en un entorno de Microsoft. No me decepcionó, dado que esperaba que no lo fuera. Makisu realmente funciona, pero toda la experiencia es lenta, lenta y todos los efectos de animación se omiten. Sin balanceo elegante al final del proceso. Microsoft demuestra ser confiable…

Makisu como concepto CSS no sería muy fácil de implementar en su propio sitio web. Es por eso que Justin envolvió un complemento jQuery a su alrededor. Esto hace que la implementación sea instantánea. Simplemente llame a jQuery y al complemento en el encabezado de su documento y llame a la función de esta manera:
$( '.list' ).makisu({
selector: 'li',
overlap: 0.2,
speed: 0.8
});
El parámetro más importante es la elección de los selectores. En el ejemplo que se muestra arriba, es el elemento li que se usa regularmente, pero también podría ir más exótico y elegir los elementos que más le gusten. Las otras opciones se refieren a la velocidad y la superposición. Los efectos 3D son proporcionados por el uso de perspective
y sombreado de vértices a través de shading
.
Makisu se puede descargar y utilizar de forma gratuita desde Github. Tiene solo unos días y, permítanme decirlo de nuevo, es un concepto. Si eres del tipo aventurero, por supuesto, podrías ponerlo en uno de tus sitios web en vivo. Es probable que sus clientes se quejen. Pero chico, realmente se ve elegante…
Enlaces relacionados:
- Makisu – Github
- Perfil de Justin Windle – Github
- Demostración de Makisu – Github
- Definición de makisu en la cocina japonesa – Wikipedia
- Navegador compatible con transformaciones 3D – Puedo usar…
Contenido relacionado en nuestro sitio hermano alemán:
- Paperfold CSS: HTML5 creativo eingesetzt – Revista Dr. Web
- Ihre Website en 3D con Meny y CSS 3D Transforms – Revista Dr. Web
- Spaß mit CSS Transforms: 3D it!, 3D Fishbirds y Wonder Webkit – Revista Dr. Web
#Makisu #navegación #CSS #inspirada #sushi #para #jQuery