Share
Ha sido una de las palabras de moda más grandes del diseño web desde hace un tiempo, por lo que hoy vamos a probar un poco de Parallax. Vamos a armar un diseño simple y luego, con la ayuda de skrollr.js, aplicaremos un efecto de paralaje sutil al encabezado..
Este tutorial cubrirá algunos aspectos notables, así que presta atención:
¡Bien entonces! Vamos a comenzar nuestro proyecto con algunos archivos básicos. Esto es lo que necesitarás para comenzar:
Nuestro index.html está vacío en este momento, luego tenemos un directorio img con nuestra imagen de café dentro, un directorio css con un archivo de restablecimiento más nuestra cuadrícula fluida y un styles.css vacío, esperando pacientemente nuestras sugerencias. Por último, tenemos un directorio js con el archivo skrollr.js descargado de GitHub.
Nuestro index.html va a comenzar con algunos elementos muy familiares:
Papanico sin sentido
No los aburriré con todas estas partes y piezas, pero vale la pena señalar que la metaetiqueta del viewport está presente, le hemos dado al documento un título (sin sentido), vinculado a algunos favicons, y hemos señalado solo un archivo css: styles.css.
Una pequeña hoja de estilo para gobernarlos a todos..
Cuando hablé por primera vez de los archivos y carpetas mencioné tres hojas de estilo; normalize.css (para restablecer responsablemente nuestros estilos), fluid_skeleton.css (que me he adaptado del skeleton boilerplate) y los estilos actuales.css. Entonces, ¿por qué solo hemos vinculado a uno en nuestro archivo HTML??
Bueno, vamos a usar esto como una introducción a Sass. - sin utilizar realmente ningún Sass.
Al usar la extensión de archivo .scss en lugar de .css, podemos juntarlos en un solo archivo y minimizar todo el lote. Comience por cambiar el nombre de los archivos CSS de esta manera:
Eso fue fácil, ¿verdad? Observe los guiones bajos en los dos primeros, que impiden que esos archivos se compilen en sus propios equivalentes de css. En su lugar, los vamos a importar a nuestros styles.scss, tal como lo haríamos con una regla css @import normal:
/ * importaciones * / @import "normalize"; @import "fluid_skeleton";
Ahora, cuando compilamos, recibiremos un archivo styles.css creado a partir de todas las reglas de nuestros archivos .scss. Solo necesitamos implementar este único archivo en nuestro servidor web, guardando en nuestro sitio dos solicitudes y varios Kbs. Buen trabajo :)
Para compilar realmente los archivos como se describe anteriormente, vamos a necesitar una aplicación de compilación (a menos que desee utilizar la línea de comandos). Hay algunas aplicaciones que harán el trabajo por ti, yo uso CodeKit (porque es increíble) pero CompassApp te servirá igual de bien, además está disponible en Windows.
Configurar nuestro proyecto es tan fácil como arrastrar la carpeta del proyecto al compilador. CodeKit ahora está viendo todos los archivos dentro de esa carpeta. Cada vez que presiono "guardar", sin importar qué archivo SCSS estoy editando, CodeKit recompilará todas las piezas, produciendo nuestro CSS actualizado y, si nuestra página está abierta en un navegador, también lo actualizaremos.
Incluso si no está listo para mirar más allá de Sass, este es un flujo de trabajo ideal.
Ahora llenemos el archivo index.html, después de lo cual podemos comenzar realmente con el estilo. Como se mencionó, estoy usando fluid_skeleton.css como base para la cuadrícula de respuesta. Es una base excelente y sin complicaciones desde la cual se inicia un diseño simple. Todo lo que requiere es que usemos su estructura de cuadrícula para construir nuestro diseño.
Necesitamos:
Accentsconagua
.ocho por ejemplo, un total de dieciséis todos juntos.Por ejemplo, podemos construir un diseño rápido de cuatro columnas así:
La hoja de estilo dicta que estos divs son 100% anchos, apilados cuidadosamente uno encima del otro, hasta que la ventana alcance 767px de ancho. En ese punto, todo cambia y estas cuatro columnas se expandirán por la pantalla como lo hizo la naturaleza..
Esta estructura rápida de cables debería darle una idea de cómo vamos a diseñar nuestro marcado estructural.
Y si buscas una copia / pegado rápido, esto te ayudará:
Para obtener más información sobre cómo se ensambla Skeleton, consulte Creación de un diseño sensible con Skeleton: Comenzando.
Siempre es más fácil ver lo que estás haciendo cuando tienes un poco de texto ficticio con el que trabajar, así que lanza un encabezado y un enlace a la región del encabezado en la parte superior:
Papanico sin sentido
por Ian Yates
Luego vuelve tu atención a las columnas y al pie de página. Agarré una carga de texto de relleno de T'Lipsum "Un generador de Yorkshire Lorem Ipsum para gente de Yorkshire" (porque soy un orgulloso Yorkshireman) superó eso!
Para darle una idea, el cuerpo principal (nuestra área de doce columnas) comienza así:
Mek 's es un Brew Boy
Una pinta suave. Dígale a este summat por ahora que nash thee chuffin 'nora eeh aparece como tal vez. Ey up es el condado de tu dios. Se reet se reet nah entonces michael palin bloomin "eck gerritetten. Aprenderé este suave pensamiento sureño. Cualquier ruido blando del sur nace, pero un muchacho es un vagabundo, que tiene la cara como un bofetón. Ee by gum mardy bum michael palin. El propio condado de Dios. Th'art nesh thee. Aparece como tal vez el propio condado de Dios donde está Tha Bin.
Pega algunos enlaces en el pie de página y hemos terminado aquí.!
Antes de seguir adelante quiero agarrar algunas fuentes. Diríjase a Google Web Fonts y eche un vistazo a PT Sans y PT Serif. Son un gran dúo, así que agrégalos a tu colección y reúne el enlace de la hoja de estilos..
Para ahorrar tiempo, este es el enlace que me dieron, después de haber seleccionado las versiones de 400 y 700 pesos de cada una:
@import url (http://fonts.googleapis.com/css?family=PT+Sans:400,700|PT+Serif:400,700);
Puede pegar esto debajo de nuestras otras importaciones en styles.scss. Cuando se compila, el contenido de este archivo CSS no se arrastrará a nuestro CSS minificado, pero la regla de importación se mantendrá y la fuente se usará de la misma manera.
Ahora estableceré PT Sans como nuestra fuente base, estableciendo el tamaño de fuente al 100% del valor predeterminado del navegador, con su altura de línea en 1.5em:
html font: 100% / 1.5em 'PT Sans', sans-serif;
Gran parte del estilo que aplicamos a esta página es bastante genérico. Colores y tamaños para la tipografía, relleno en las bandas y así sucesivamente. Separe los archivos de origen y encontrará los contenidos de styles.scss autoexplicativos.
Sin embargo, concentrémonos por un momento en el área del encabezado. En su primer estado móvil, queremos darle un fondo marrón. Solo una vez que la ventana gráfica sea más grande, introduciremos la imagen del café (para ahorrarle ancho de banda a los usuarios móviles). Así es como se ven los estilos para la banda de cabecera ahora:
header.band background: # 4b371f; color blanco; text-align: center; Relleno: 10% 0 15% 0;
El relleno superior e inferior se ha aplicado como un porcentaje del ancho del navegador. Esto significa que el área del encabezado crece en altura a medida que se expande la ventana del navegador. Es un efecto bastante agradable y mantiene el doblez (dondequiera que sea hoy) proporcional al tamaño de la ventana del navegador.
Ahora vamos a diseñar el título que tenemos dentro..
h1, h2, h3 familia de fuentes: 'PT Serif', serif; peso de la fuente: 700; text-align: center; header.band h1 font-size: 3em; línea-altura: 1em; margen inferior: 1em;
Usaremos la variante de serif de PT para nuestros encabezados, que se empareja bien con la copia del cuerpo en sans.
Por último, diseñaremos nuestro ancla para que destaque:
a.button background: # e33f0c; text-align: center; relleno: .5em 1em; color blanco; font-weight: negrita; texto-decoración: ninguno; caja de sombra: 0 0.2em 0 # ab3009; transformación de texto: mayúsculas; espacio entre letras: 0.1em; / * Transición de las cosas de todos los navegadores * / -webkit-transition: Fondo 0.2s fácil de usar; / * Safari 3.2+, Chrome * / -moz-transition: fondo 0.2s fácil de quitar; / * Firefox 4-15 * / -o-transition: background 0.2s se elimina fácilmente; / * Opera 10.5-12.00 * / transición: fondo 0.2s fácil de quitar; / * Firefox 16+, Opera 12.50+ * / a.button: hover background: # ab3009;
¡Cosas sencillas, todas basadas en em para garantizar que pueda crecer y reducirse si es necesario, y si realmente va a abrazar a Sass, puede hacer que todo el estilo sea aún más delgado! Por ahora, esto es lo que deberías tener:
Habiendo construido nuestra experiencia móvil básica, ahora vamos a embellecer las cosas para pantallas más grandes. La forma en que elija organizar sus consultas de medios depende de usted, pero como esta es una hoja de estilo bastante sencilla, solo reuniré todas mis reglas adicionales en una consulta de medios al final de styles.scss.
Agreguemos algunas reglas que activarán pantallas más grandes que 767px. Este punto de interrupción es bastante arbitrario y acaba de adaptarse al diseño cuando lo construí por primera vez. ¿Qué mejor manera de elegir un punto de interrupción??!
Pantalla de solo media y (ancho mínimo: 767 px)
En realidad no hay muchos estilos para agregar aquí, solo queremos aumentar el tamaño de fuente utilizado en todo el documento, hacer que nuestro botón sea un poco más prominente y agregar una imagen de fondo al área del encabezado:
Pantalla de solo media y (ancho mínimo: 767 px) body font-size: 1.125em; / * 18px / 16px * / line-height: 1.7em; header.band background-image: url (… /img/background.jpg); tamaño de fondo: 100%; header.band h1 font-size: 3.25em; / * 52/16 * / a.button padding: .75em 1.5em;
En pantallas más grandes ahora deberíamos tener algo como ...
Actualmente, cuando se desplaza hacia abajo en la página, nuestro encabezado desaparece de la vista de la forma que esperaría. Vayamos ahora a la base de todo este ejercicio; paralaje. Ya deberías haber descargado skrollr.js de GitHub y haberlo colocado en la carpeta js.
A continuación, necesitamos referenciarlo en nuestro html, así que coloque este enlace en la parte inferior, antes del cierre
Este es un juego de JavaScript de vainilla, por lo que no es necesario que jQuery aparezca de antemano. A continuación, necesitamos llamar a skrollr, lo cual nos gusta:
Hay una serie de opciones con las que podemos jugar, todas con configuraciones que podemos poner entre esas llaves, pero por ahora dejaremos las cosas tal como están..
En su etapa actual de desarrollo, skrollr nos obliga a reducir un poco nuestro marcado, agregando reglas en línea a nuestros elementos. El fabricante de Skrollr, Alexander Prinzhorn, está ocupado con un proyecto que separa los estilos del marcado, pero aún está en progreso..
De todos modos, estoy haciendo que suene peor de lo que es, simplemente tenemos que agregar nuestro estilo de fotogramas clave a los atributos de datos en los elementos a los que nos dirigimos. Por ejemplo, movamos la posición de la imagen de fondo de nuestro encabezado, dependiendo de la posición de la barra de desplazamiento.
Añadimos nuestro primer estilo de fotogramas clave así:
Usos skrollr datos- y luego un valor que representa la posición de píxel de la barra de desplazamiento. Luego agregamos un poco de estilo como lo haríamos con CSS. Literalmente, hemos especificado que cuando la barra de desplazamiento está en 0px (la parte superior de la página) queremos que la posición de fondo de este elemento para ser 0px 0px.
Luego podemos agregar tantos otros fotogramas clave como queramos, así que vamos a agregar otro atributo de datos, inmediatamente después de nuestra primera.
data-500 = "background-position: 0px -250px;"
Esto entonces dice; cuando la barra de desplazamiento se ha movido 500px abajo, queremos el posición de fondo ser 0px -250px (Es decir: 250px hacia arriba). Skrollr animará el proceso entre estos dos fotogramas clave, por lo que obtendremos una transición suave.
¡Bingo! Nuestro primer efecto de paralaje..
Hemos logrado un efecto de paralaje muy simple que agrega un elemento de dinamismo cada vez que el usuario se desplaza hacia abajo. Podemos aplicar cualesquiera reglas CSS que queramos con skrollr, así que vamos a darle a nuestra región de cabecera un último broche de oro.
Recuerda este elemento, que contiene el encabezado y el enlace.?
Vamos a añadir dos fotogramas clave; uno para el estado inicial (0px) y otro para cuando la barra de desplazamiento alcanza 180px.
Estas, como se puede ver, dictan la opacidad, otra propiedad familiar de CSS. A medida que nuestra barra de desplazamiento se mueve hacia abajo, antes de que el encabezado haya abandonado la página, el contenido dentro de este div se desvanecerá sin problemas. Un efecto simple, pero uno que influye sutilmente en la experiencia del usuario de esta página. Cosas como esta deben ser usadas responsablemente.!
13. Ajustes extra
Skrollr viene empaquetado con varias opciones adicionales, dependiendo de qué tan seguro te sientas. Todas estas configuraciones se pueden pasar a skrollr por medio de pares clave-valor como:
Por ejemplo, esta instrucción le dice a skrollr que no fuerce la altura del documento. Por defecto, skrollr forzará que el documento sea al menos tan alto como el fotograma clave más alto que hayas definido. En nuestro caso, nuestra posición más alejada de la barra de desplazamiento se especificó como 500px, mientras que nuestra página es waaa-aay más alta que eso. Por lo tanto, no tuvimos que pensar en anular la altura forzando.
Otra cosa que puede hacer es eliminar el desplazamiento suave. Prueba nuestro efecto de paralaje una vez más; ¿Ves cómo la posición de la imagen de fondo se acelera y desacelera? Eso evita sacudidas, pero es posible que no desee que el efecto aparezca de esa manera. Para hacer tu interpolación más lineal, agregue esto:
También podrías añadir esto. por elemento Una vez más, apoyándonos en los atributos de datos (muy elegantes):
Modo relativo
También vale la pena mencionar el modo relativo, que nos permite establecer fotogramas clave. relativo al elemento, No el documento como lo hemos estado haciendo. De esta manera, podríamos modificar la altura, los márgenes, etc. de nuestro encabezado (por ejemplo) sin tener que volver a evaluar nuestra configuración de fotogramas clave.
El uso del modo relativo altera la sintaxis necesaria dentro de los atributos de datos, que no voy a entrar aquí, pero vale la pena echar un vistazo a.
Para tener una idea más clara de lo que es posible con las opciones de skrollr, consulte los ejemplos y la documentación..
14. Soporte móvil
Aquí hay algo que no sabía hasta que leí la documentación de skrollr:
Los navegadores móviles intentan ahorrar batería siempre que pueden. Es por eso que los navegadores móviles demoran la ejecución de JavaScript mientras se desplaza. iOS, en particular, hace esto muy agresivamente y detiene JavaScript por completo..
Por lo tanto, para que skrollr funcione en plataformas móviles, Alexander tuvo que crear un poco de magia adicional que se extrae después de un poco de rastreo del navegador. Como has visto, nuestro efecto se degrada con mucha gracia, por lo que no me molesta que los usuarios de teléfonos inteligentes se pierdan un poco de paralaje. Sin embargo, si desea asegurarse de que su proyecto sea compatible con dispositivos móviles, necesitará algo más.
- Después de haber incluido el script skrollr, deberá ejecutar una pequeña comprobación del navegador, que se ve así:
Notarás que esto agrega
skrollr.mobile.min.jsSi se cumplen las condiciones (es decir, se está utilizando un dispositivo móvil), simplemente asegúrese de que la ruta sea correcta según su proyecto. Encontrará este script adicional en la descarga de origen en GitHub.- Por último, asegúrese de que el primero elemento despues de la apertura
etiqueta tiene .¡Eso es! No necesitas entender por qué Eso funciona, simplemente funciona. Si tiene curiosidad por aprender más sobre el soporte móvil, consulte la documentación..
Conclusión
Skrollr no es solo una cosa de paralaje ... hace mucho más que eso como hemos demostrado. Sin embargo, con un poco de suerte, ahora podrás implementar un poco de razzmatazz (sea lo que sea) en tus propias páginas web estáticas. Siéntase libre de hacer cualquier pregunta que pueda tener en los comentarios.!
Recursos adicionales
- skrollr.js en GitHub
- @Prinzhorn en Twitter
- Cree un sitio web de desplazamiento Parallax utilizando Stellar.js en Webdesigntuts+
- Merry Scrolling con skrollr.js
- T'Lipsum A Yorkshire Lorem Ipsum generador para Yorkshire Folks
- fluid_skeleton.css
- CodeKit
- Los pensamientos de Trent Walton sobre el desplazamiento de paralaje en la web
