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. 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. 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.