Tenéis el menú principal de vuestra compa ía en pantalla pero en cuanto señ
baja, se pierde. Las soluciones pasan por a ad...
en este caso de fotografía. Realmente se ha logrado un dise o que llena lañ
pantalla, pero al mismo tiempo, resulta limpio...
Sólo un par de advertencias, los colores deben escribirse en rgb ya que skrollr
no acepta hexadecmales. Por otro lado no e...
Próxima SlideShare
Cargando en…5
×

Skrollr basico

780 visualizaciones

Publicado el

  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Skrollr basico

  1. 1. Tenéis el menú principal de vuestra compa ía en pantalla pero en cuanto señ baja, se pierde. Las soluciones pasan por a adir un sidebar, cambiar el css yñ fijarlo, restando espacio al resto del dise o, o perderlo de vista y poner unañ flecha para subir, un top o el consabido ir al cielo . Y si hubiera otra“ ” ¿ solución? Empezaremos nuestra singladura con un efecto de esos que llama poderosamente la atención por su aparente sencillez y sus asombrosos resultados. Hablamos del scroll parallax y seguro que cuando veas un ejemplo no te volverá a pasar desapercibido. El parallax scroll es un paso más hacia el manejo intuitivo de la web basándose en movimientos naturales de la mano. Al fin y al cabo se puede traducir como una alteración en el scroll , y eso es lo que pretendemos, que“ ” el típico bajar con el ratón deje de ser un movimiento rutinario y, a veces,“ ” vacío, para convertirlo en una parte primordial de la navegación. Volviendo al ejemplo con el que abríamos el truco de hoy, podríamos hacer que, al perderse el menú en el scroll natural de la navegación, un segundo menú (más peque o, o detallando justo el apartado que estuviéramos viendoñ en ese momento), apareciera en un lateral. Que fuera cambiando conforme avanzáramos en la página... El control total sobre la navegación. Claro, se puede hacer con jQuery, estaréis pensando... y sí, pero con skrollr es incluso más fácil! Pero se aprende viendo y haciendo, así que veamos un par de ejemplos de uso práctico de este efecto: • http://sammarkiewi.cz/ • http://www.heandshephoto.com/ El primer enlace va a un divertido portfolio que logra un ambiente agradable y muestra un manejo envidiable de esta técnica, amén de una gran imaginación. En el segundo observamos una aplicación más seria a una web corporativa, Skrollr (primera parte) Septiembre - 2013
  2. 2. en este caso de fotografía. Realmente se ha logrado un dise o que llena lañ pantalla, pero al mismo tiempo, resulta limpio y ágil. No habría sido lo mismo con una lightbox, tenemos que admitirlo. Pero empecemos a meternos en materia. Hoy comenzaremos con el skrollr y más adelante a adiremos efectos parallax para un efecto más suave.ñ En estos casos, es obligatorio darse una vuelta por GitHub, donde se cuecen las últimas novedades. Nos podemos descargar el js o podemos enlazarlo directamente en nuestro documento. (La conveniencia de una cosa u otra varía de un profesional a otro y no entraremos al debate ahora). Lo tenemos aquí: http://prinzhorn.github.io/skrollr/dist/skrollr.min.js El funcionamiento es simple pero hay que tener los conceptos claros. Imaginemos un cuadrado que queremos que gire 360 . Como mínimoº tenemos que exponer dos posiciones; la de inicio (cuando el cuadrado aún no se ha movido) y la de final (cuando ya ha terminado de girar). Para ello usaremos un atributo de html5, el data- seguido del número de píxeles pertinente y el efecto que queremos darle. Veamos un ejemplo: <div id="prueba" data-0="transform:rotate(0deg);"</div> Le estamos diciendo que, a scroll=0, (es decir, al abrir) el cuadro tendrá una rotación=0. Pero queremos que rote, así que a adimos qué pasará cuandoñ llegue a los 400 px: <div id="prueba" data-0="transform:rotate(0deg);" data- 400="transform:rotate(360deg);">---------- FOO -----------</div> Sólo a adiendo esto, le estamos diciendo que en un intervalo de 400 píxeles,ñ queremos que se transforme. Queremos una rotación, de 360 . De formaº automática, calculará la velocidad necesaria para hacerlo en el espacio que tiene. Lo único que debemos recordar es que, antes de la etiqueta de cierre del body debemos meter esta breve indicación: <script type="text/javascript"> var s = skrollr.init(); </script> Esto arrancará la función y ejecutará todas nuestras órdenes disparatadas o no tanto.
  3. 3. Sólo un par de advertencias, los colores deben escribirse en rgb ya que skrollr no acepta hexadecmales. Por otro lado no es nada recomendable hacer una página corporativa completa con skrollr si se van a meter muchas fotos por el mismo motivo de siempre, el tiempo de carga se puede multiplicar exponencialmente y eso nunca conviene. Por lo pronto, si queréis empaparos con todas las posibilidades que ofrece el skrollr, os recomiendo que os paséis por la página oficial para ver las demos y los problemas/soluciones para navegadores y móviles. https://github.com/Prinzhorn/skrollr Haced vuestras pruebas, que es como se aprende. En una semana... más.

×