Hoy vamos a pasar a través de una técnica realmente genial que puedes usar para crear un efecto que se parece un poco al desplazamiento de paralaje, pero no necesita JavaScript; Se puede lograr muy simplemente a través de CSS puro..

Comience por ver la demostración en vivo para ver lo que aprenderá (necesitará verlo en una computadora de escritorio / portátil para ver el efecto).

Esta técnica podría usarse para crear excelentes páginas de descripción de productos, o incluso algo similar a una presentación de Powerpoint / Keynote, y sería un gran ajuste para la ilustración de historias en línea..

Así es como lo haces..

Está todo en el CSS

La clave de esta técnica es la CSS. adjunto de fondo: fijo;, Disponible para nosotros desde CSS 2.1. Cualquier imagen de fondo con este estilo aplicado permanecerá en una posición fija relativa a la ventana (no al elemento al que se aplica). Lo usaremos para mantener nuestras ilustraciones en su lugar mientras nuestro contenido se desplaza de forma independiente.

Un par de cosas que debe tener en cuenta con esta propiedad CSS es que, como las imágenes de fondo se fijarán en relación con la ventana, su posición no se verá afectada por elementos como los márgenes, como lo haría una imagen de fondo normal..

También debe saber que si bien la propiedad funciona maravillosamente en todos los navegadores de escritorio, actualmente no funciona en Chrome mobile y puede ser un poco brusca en otros navegadores móviles. Por lo tanto, aunque sus visitantes seguirán viendo bien sus imágenes, el efecto de desplazamiento en sí se ve mejor en las plataformas de escritorio.

Cómo está hecho

Los pasos básicos para lograr lo que ves en la demo son:

1. Crea un elemento contenedor y agrega tu contenido.
2. Colocar el contenedor (a div en nuestro caso) tener relleno en un lado de alrededor del 50% de ancho, por lo tanto, empujar el contenido hacia el otro lado.
3. Agregue una imagen de fondo, también alrededor del 50% de ancho, y colóquela en el lado opuesto al contenido.
4. Conjunto adjunto de fondo: fijo; y ver la magia de desplazamiento!

Vamos a ver cómo sucede todo esto paso a paso. Querrá capturar los archivos de origen de este tutorial para tener las imágenes necesarias.

1. Configuración básica

Comience creando una carpeta de proyecto y agregando una index.html archívalo, así como un css carpeta con un archivo llamado style.css añadido a ello. Copie y pegue las cuatro imágenes del archivo zip original que descargó en una carpeta llamada imagenes.

Agrega este HTML a index.html:

           
 
Desplácese hacia abajo y observe lo que sucede
 
Alice estaba empezando a cansarse de estar sentada junto a su hermana en el banco y de no tener nada que hacer: una o dos veces se había asomado al libro que su hermana estaba leyendo, pero no tenía fotos ni conversaciones en él. ¿Es el uso de un libro, 'pensó Alicia' sin imágenes ni conversación?
 
Así que ella estaba considerando en su propia mente (tan bien como pudo, porque el día caluroso la hizo sentir muy adormecida y estúpida), si el placer de hacer una cadena de margaritas valdría la pena de levantarse y recoger las margaritas, cuando de repente un Conejo Blanco con ojos rosados ​​corrió cerca de ella.
 
No había nada tan notable en eso; Ni tampoco Alicia pensó que fuera tan difícil escuchar al Conejo decirse a sí mismo: "¡Oh cielos! ¡Oh querido! ¡Llegaré tarde!' (cuando lo pensó más tarde, se le ocurrió que debería haberse preguntado esto, pero en ese momento todo parecía bastante natural); pero cuando el Conejo realmente sacó un reloj del bolsillo de su chaleco y lo miró, y luego se apresuró, Alice se puso de pie, porque le vino a la mente que nunca antes había visto un conejo con un chaleco. Un bolsillo, o un reloj para sacarlo, y ardiendo de curiosidad, corrió por el campo y, afortunadamente, llegó justo a tiempo para verlo saltar por un gran agujero de conejo debajo del seto..
 
En otro momento, Alice fue a buscarlo, ni una sola vez considerando cómo iba a volver a salir del mundo..
 
El orificio del conejo siguió recto como un túnel, y luego se hundió repentinamente, tan repentinamente que Alice no tuvo un momento para pensar en detenerse antes de encontrarse cayendo en un pozo muy profundo..
 
O bien el pozo era muy profundo, o cayó muy lentamente, porque tenía mucho tiempo mientras bajaba para mirar a su alrededor y preguntarse qué iba a pasar a continuación. Primero, trató de mirar hacia abajo y descifrar a qué se dirigía, pero estaba demasiado oscuro para ver algo; luego miró a los lados del pozo y notó que estaban llenos de armarios y estanterías para libros; aquí y allá veía mapas e imágenes colgadas en las clavijas. Tomó un frasco de uno de los estantes al pasar; estaba etiquetada como 'MARMALADA ANARANJADA', pero para su gran decepción estaba vacía: a ella no le gustaba dejar caer la jarra por miedo a matar a alguien, así que logró colocarla en uno de los armarios cuando pasó por alto.
 
'¡Bien!' pensó Alicia para sí misma, 'después de una caída como esta, ¡no pensaré en caer por las escaleras! ¡Qué valientes todos me pensarán en casa! ¡No diría nada al respecto, aunque me cayera de la parte superior de la casa! (Lo cual es muy probable que sea cierto.) 
 
  

Lo que estamos haciendo aquí es configurar nuestro shell HTML básico, cargar nuestra hoja de estilos y algunas fuentes de Google, luego crear nuestro primer contenedor de contenido div al que aplicaremos esta técnica.

El contenedor div tiene tres clases:

1. .contenido - utilizado para establecer algunas propiedades que serán comunes a todos los contenedores de contenido.
2. .Correcto - identifica que este contenedor debe tener contenido alineado a la derecha (también trabajaremos con un contenedor alineado a la izquierda más adelante)
3. .illustration_01 - utilizado para establecer la imagen de fondo y el color específicos para este contenedor

Estilo

Ahora estamos listos para algunos CSS. Comience agregando un código básico de normalización y formato a su style.css expediente:

* box-sizing: border-box;  html font-size: 1em; Familia tipográfica: 'Alike'; color de fondo: # 262626; color: # d9d9d9;  cuerpo margen: 0;  img ancho máximo: 100%; altura: auto;  h1, h2, h3, h4, h5, h6 familia de fuentes: 'Roboto'; línea de altura: 1.313em;  h1 font-size: 3em; margen: 0.563em 0;  h2 font-size: 2.25em; margen: 0.625em 0;  h3 font-size: 1.5em; margen: 1.313em 0;  h4 font-size: 1.313em; margen: 1.313em 0;  h5 font-size: 1.125em; margen: 1.313em 0;  h6 font-size: 1em; margen: 0.75em 0; 

Ahora para el .contenido clase. Agregue esto al final de su hoja de estilo:

.contenido font-size: 1.875rem; color: # 262626; tamaño de fondo: 49% automático; adjunto de fondo: fijo; repetición de fondo: no repetición; 

Esta clase es donde ocurre la mayor parte de la magia. Para el texto, configuramos nuestro tamaño de fuente y color. Para el fondo verás que comenzamos por la configuración. tamaño de fondo a 49% auto. 

Esto significa que la imagen de fondo siempre se estirará o encogerá para llenar el 49% del ancho de la página, y la altura se ajustará proporcionalmente. Estamos usando un valor del 49% en lugar del 50% porque, de lo contrario, Firefox muestra un extraño artefacto de línea en el centro de la pantalla.

Entonces establecemos fondo fijo que, como ya se sabe por la descripción anterior, hace que la imagen de fondo permanezca en su lugar cuando nos desplazamos, y hace que su posición sea relativa a la ventana en lugar del contenedor al que se aplica.

Finalmente nos pusimos repetición de fondo: no repetición; Para asegurarnos de que nuestra imagen aparezca solo una vez en la página..

A continuación agregue el .Correcto clase a su hoja de estilo:

.derecho relleno: 1.618em 6.472em 3.236em 50%; posición de fondo: 0 50%; 

Esta última clase coloca el contenido de texto en una mitad de la pantalla y la imagen de fondo en la otra.

los posición de fondo la configuración indica a la imagen de fondo que se coloque a sí misma en cero píxeles desde el lado izquierdo de la ventana y que se alinee hasta la mitad desde la parte superior de la ventana.

Por último, agregue el .illustration_01 clase:

.illustration_01 background-color: # 00c17b; imagen de fondo: url ("... /images/minipadwhite.png"); 

Esto establece la imagen de fondo específica y el color que queremos para este contenedor de contenido..

Echa un vistazo a tu sitio y ahora deberías ver esto:

Cuando se desplaza hacia abajo, debería ver cómo se desliza el contenido mientras la imagen permanece exactamente donde está..

2. Añadir un segundo contenedor

Agreguemos otro contenedor de contenido, este con el contenido alineado a la izquierda..

Agrega este contenedor de contenido HTML debajo de tu último div:

 
 
Efecto de desplazamiento de fondo fijo
 
Abajo abajo abajo. ¿No terminaría la caída? 'Me pregunto cuántas millas he caído en este momento?' ella dijo en voz alta 'Debo estar llegando a algún lugar cerca del centro de la tierra. Déjame ver: eso sería cuatro mil millas más abajo, creo ... (porque, verás, Alice había aprendido varias cosas de este tipo en sus lecciones en la escuela, y aunque esta no era una muy buena oportunidad para presumir su conocimiento, como no había nadie que la escuchara, todavía era una buena práctica decirlo una vez más) '--sí, eso es la distancia correcta - pero luego me pregunto qué latitud o longitud tengo que hacer'? (Alice no tenía idea de lo que era Latitude, o Longitude tampoco, pero pensaba que eran buenas palabras para decir).
 
Entonces ella comenzó de nuevo. ¡Me pregunto si caeré a través de la tierra! ¡Qué gracioso parecerá salir entre las personas que caminan con la cabeza hacia abajo! Las Antipatías, creo ... "(estaba bastante contenta de que no hubiera nadie escuchando, esta vez, ya que no sonaba en absoluto la palabra correcta)" - pero tendré que preguntarles cuál es el nombre del país es, tu sabes Por favor, señora, ¿es esto Nueva Zelanda o Australia? (y ella intentó hacer una reverencia mientras hablaba ... ¡una elegante reverencia mientras te caes por el aire! ¿Crees que podrías manejarlo?) '¡Y qué niña tan ignorante pensará que soy por preguntar! No, nunca lo haré para preguntar: tal vez lo vea escrito en alguna parte.
 
Abajo abajo abajo. No había nada más que hacer, así que Alice pronto comenzó a hablar de nuevo. 'Dinah me va a extrañar mucho esta noche, ¡debería pensar!' (Dinah era la gata). Espero que recuerden su platillo de leche a la hora del té. Dinah mi querido! ¡Ojalá estuvieras aquí abajo conmigo! Me temo que no hay ratones en el aire, pero podrías atrapar un murciélago, y eso es muy parecido a un ratón, ¿sabes? Pero me pregunto si los gatos comen murciélagos. Y aquí, Alice comenzó a tener un poco de sueño, y continuó diciéndose a sí misma, de una manera soñadora, '¿Los gatos comen murciélagos? ¿Los gatos comen murciélagos? y a veces, '¿Los murciélagos comen gatos?' Porque, ya ves, como ella no pudo responder ninguna de las dos preguntas, no importó mucho en qué forma lo expresó. Sintió que se estaba quedando dormida, y acababa de comenzar a soñar que caminaba de la mano con Dinah, y le decía muy seriamente: "Ahora, Dinah, dime la verdad: ¿alguna vez comiste un murciélago?" cuando de repente, golpe! ¡golpear! Abajo se encontró con un montón de palos y hojas secas, y la caída había terminado..
 
Alice no estaba un poco dolida, y se levantó de un salto en un momento: levantó la vista, pero todo estaba oscuro en lo alto; ante ella había otro largo pasaje, y el Conejo Blanco todavía estaba a la vista, apresurándose hacia él. No había un momento que perder: se fue Alice como el viento, y llegó justo a tiempo para oírlo decir, mientras giraba una esquina, 'Oh, mis oídos y bigotes, ¡hasta qué hora se está haciendo!' Estaba detrás de él cuando dobló la esquina, pero ya no se veía al Conejo: se encontraba en un pasillo largo y bajo, iluminado por una fila de lámparas que colgaban del techo..
 
Había puertas en todo el pasillo, pero todas estaban cerradas; y cuando Alice había bajado por un lado y por el otro, probando todas las puertas, caminó tristemente por el centro, preguntándose cómo iba a salir otra vez.. 
 

Note que esta vez usamos la clase. .izquierda en lugar de .Correcto y hemos aumentado el número de ilustración para que la clase .illustration_01 se sustituye por .illustration_02

Agregue las siguientes dos nuevas clases a su hoja de estilo:

.izquierda relleno: 1.618em 50% 3.236em 6.472em; posición de fondo: 100% 50%;  .illustration_02 background-color: # e8697b; imagen de fondo: url ("… /images/minipadblack.png"); 

Esta vez tenemos el 50% de relleno aplicado al lado derecho del contenedor, por lo que el contenido se desplazará hacia la izquierda y el fondo se posicionará horizontalmente al 100%, es decir, todo el camino hacia la derecha. También agregamos un color y una imagen diferente al fondo de este contenedor.

Revisa tu sitio de nuevo y comienza a desplazarte hacia abajo. Cuando llegue al final del primer contenedor, verá que comienza a aparecer el segundo, limpiando la parte superior de su primera imagen y revelando gradualmente su segundo.

3. Inserte un separador

Mejora el efecto de esta técnica si hay un separador entre los dos contenedores, así que vamos a agregar que ahora.

Entre sus dos divs de contenedores agregue este HTML:

 
 
Otra sección comienza aquí
 

Y agregue la clase .separator a su hoja de estilo:

.separador font-size: 1.875rem; relleno: 1.618em 0; text-align: center; 

Cuando actualice su sitio, ahora debería tener un buen separador entre sus contenedores:

4. Tercer y cuarto contenedores

Ahora puede ingresar el código para los separadores restantes y los contenedores de contenido.

Agregue este HTML debajo de sus divs existentes:

 
 
Otra sección comienza aquí
 
 
 
Ideal para presentaciones de productos
 
De repente, se encontró con una pequeña mesa de tres patas, todas hechas de vidrio sólido; no había nada en ella excepto una pequeña llave dorada, y lo primero que pensó Alice fue que podría pertenecer a una de las puertas del vestíbulo; ¡pero Ay! o bien las cerraduras eran demasiado grandes, o la llave era demasiado pequeña, pero al menos no abría ninguna de ellas. Sin embargo, en la segunda ronda, se encontró con una cortina baja que no había notado antes, y detrás de ella había una pequeña puerta de unos quince centímetros de altura: probó la pequeña llave dorada en la cerradura, y para su gran deleite se ajustó a ella.!
 
Alice abrió la puerta y descubrió que conducía a un pequeño pasadizo, no mucho más grande que un agujero de rata: se arrodilló y miró a lo largo del pasaje hacia el jardín más bonito que jamás hayas visto. Cómo deseaba salir de ese oscuro pasillo y vagar entre esas camas de flores brillantes y esas fuentes frías, pero ni siquiera podía sacar su cabeza por la puerta; 'e incluso si mi cabeza pasara' pensaba, pobre Alice, 'sería muy poco útil sin mis hombros. ¡Oh, cómo me gustaría poder callarme como un telescopio! Creo que podría, si solo supiera cómo empezar. Porque, verás, han pasado tantas cosas fuera de la vía últimamente, que Alice había empezado a pensar que muy pocas cosas eran realmente imposibles..
 
Parecía que no tenía sentido esperar junto a la pequeña puerta, así que volvió a la mesa, casi esperando poder encontrar otra llave, o al menos un libro de reglas para callar a las personas como telescopios: esta vez encontró una pequeña botella en ella ("que ciertamente no estaba aquí antes", dijo Alicia), y alrededor del cuello de la botella había una etiqueta de papel, con las palabras "BEBER ME" bellamente impresas en letras grandes.
 
Estaba muy bien decir 'Bébeme', pero la sabia pequeña Alice no iba a hacer eso apresuradamente. "No, miraré primero", dijo, "y veré si está marcado como" veneno "o no"; porque había leído varias historias pequeñas y agradables sobre niños que se habían quemado y comido por animales salvajes y otras cosas desagradables, todo porque no recordaban las simples reglas que sus amigos les habían enseñado: por ejemplo, que un póquer al rojo vivo te quemará si lo sostienes demasiado tiempo; y que si te cortas el dedo muy profundamente con un cuchillo, generalmente sangra; y ella nunca lo había olvidado, si bebes mucho de una botella marcada como "veneno", es casi seguro que no esté de acuerdo contigo, tarde o temprano.
 
Sin embargo, esta botella NO estaba marcada como "veneno", por lo que Alice se aventuró a probarla y le pareció muy agradable (tenía, de hecho, una especie de sabor mixto de tarta de cereza, natillas, piña y pavo asado). caramelo, y tostadas con mantequilla caliente,) muy pronto lo terminó. 
 
 
 
Otra sección comienza aquí
 
 
 
Técnica simple usando CSS puro
 
 '¡Qué curioso sentimiento!' dijo Alicia 'Debo estar callando como un telescopio'.
 
Y así fue en efecto: ahora tenía solo diez pulgadas de alto, y su rostro se iluminó al pensar que ahora tenía el tamaño adecuado para pasar a través de la pequeña puerta hacia ese hermoso jardín. Primero, sin embargo, esperó unos minutos para ver si iba a encogerse más: se sentía un poco nerviosa por esto; "porque podría terminar, ya sabes", se dijo Alice a sí misma, "en mi salida, como una vela. Me pregunto cómo debería ser entonces. Y trató de imaginarse cómo es la llama de una vela después de apagar la vela, porque no podía recordar haber visto nunca algo así..
 
Al cabo de un rato, al darse cuenta de que no pasaba nada más, decidió ir al jardín de inmediato; Pero, ¡ay de la pobre Alice! cuando llegó a la puerta, descubrió que había olvidado la pequeña llave dorada, y cuando volvió a la mesa para buscarla, descubrió que no podía alcanzarla: podía verla claramente a través del cristal, y trató de hacía lo posible por trepar por una de las patas de la mesa, pero era demasiado resbaladiza; y cuando ella se había cansado de intentarlo, la pobre pequeña se sentó y lloró.
¡Ven, no sirve de nada llorar así! dijo Alice a sí misma, bastante bruscamente; ¡Te aconsejo que te vayas en este momento! En general, se dio muy buenos consejos (aunque rara vez lo siguió) y, a veces, se regañaba a sí misma con tanta severidad que le hacía llorar a los ojos; y una vez que recordó haber intentado encajonarse los oídos por haberse engañado a sí misma en un juego de croquet, estaba jugando contra sí misma, ya que esta niña curiosa simulaba ser dos personas. "Pero no sirve de nada ahora", pensó la pobre Alice, "¡pretender ser dos personas! ¡Vaya, ya casi no me queda lo suficiente como para ser UNA persona respetable! 
Pronto se fijó en una pequeña caja de cristal que estaba debajo de la mesa: la abrió y encontró en ella un pastel muy pequeño, en el que las palabras "COMÉ" estaban bellamente marcadas en grosellas. "Bueno, me lo comeré", dijo Alicia, "y si me hace crecer, puedo alcanzar la llave; y si me hace más pequeño, puedo arrastrarme por debajo de la puerta; ¡De cualquier manera, entraré al jardín, y no me importa lo que suceda!
 
Comió un poco y se dijo ansiosa a sí misma: "¿Por dónde? ¿De qué manera? ', Sosteniendo su mano en la parte superior de su cabeza para sentir de qué manera estaba creciendo, y se sorprendió bastante al descubrir que seguía siendo del mismo tamaño: para estar segura, esto generalmente ocurre cuando uno come pastel, pero Alice había puesto tanto en la forma de esperar que no sucedieran más que cosas fuera de la vía, que parecía bastante aburrido y estúpido que la vida continuara de la manera común.
 
Así que se puso a trabajar, y muy pronto terminó el pastel.. 
 
 
 
EL FIN
 

Y este CSS a tu hoja de estilo:

.illustration_03 background-color: # 14b29a; imagen de fondo: url ("… /images/miniwhite.png");  .illustration_04 background-color: # 80b9f1; imagen de fondo: url ("… /images/miniblack.png"); 

Ahora debería tener su pantalla completa en su lugar con un tercer y cuarto contenedor de contenido que muestre:

Además de un separador final para taparlo:

5. Hazlo receptivo

Lo último que deberá hacer es tener en cuenta los diferentes tamaños de pantalla. Cuando la ventana gráfica es demasiado pequeña para acomodar cómodamente nuestras imágenes de fondo, en su lugar queremos cambiarlas a imágenes en línea.

En la parte superior de cada uno de sus contenedores de contenido, dentro de los divs de apertura y sobre el texto, agregue una figura con la clase .Pantalla pequeña y dentro de ese lugar una img Etiqueta para cargar cada una de las imágenes utilizadas actualmente en los fondos:

Primer contenedor de contenido:

Segundo contenedor de contenido:

Tercer contenedor de contenido:

Cuarto contenedor de contenido:

Vamos a utilizar el .Pantalla pequeña clase para ocultar esta imagen en línea de forma predeterminada, pero para mostrarla cuando llegamos a un tamaño de pantalla más pequeño.

Agrega la siguiente clase a tu hoja de estilo:

.pantalla pequeña pantalla: ninguna; 

Ahora agregaremos las consultas de medios que manejarán si se muestran las imágenes de fondo o en línea. También se reducirá progresivamente el tamaño del texto y el espaciado en el diseño, de modo que nos ajustemos bien a todos los anchos de las vistas..

Agregue estas consultas de medios a su hoja de estilo:

@media (ancho máximo: 106.25rem) .wrapper, .separator font-size: 1.6875rem;  @media (ancho máximo: 93.75rem) .content, .separator font-size: 1.5rem;  .right relleno: 1.618em 4.854em 1.618em 50%;  .left relleno: 1.618em 50% 1.618em 4.854em;  @media (ancho máximo: 81.25rem) .content, .separator font-size: 1.3125rem;  .right relleno: 1.618em 3.236em 1.618em 45%; tamaño de fondo: 44% automático; posición de fondo: 0 55%;  .left relleno: 1.618em 45% 1.618em 3.236em; tamaño de fondo: 44% automático; posición de fondo: 100% 55%;  @media (ancho máximo: 68.75rem) .content, .separator font-size: 1.125rem;  .right relleno: 1.618em 3.236em 1.618em 40%; tamaño de fondo: 39% automático; posición de fondo: 0 60%;  .left relleno: 1.618em 40% 1.618em 3.236em; tamaño de fondo: 39% automático; posición de fondo: 100% 60%;  @media (max-width: 50rem) .smallscreen display: block;  .right relleno: 1.618em 3.236em; imagen de fondo: ninguna;  .left relleno: 1.618em 3.236em; imagen de fondo: ninguna;  @media (ancho máximo: 31.25rem) .right relleno: 1.618em 1.618em;  .left relleno: 1.618em 1.618em;  @media (max-width: 12rem) html min-width: 12rem; 

Las primeras cuatro consultas de medios simplemente reducen el tamaño de la fuente del texto y el relleno dentro de los contenedores de contenido de forma progresiva para adaptarse al ancho de pantalla disponible.

En la quinta consulta mediática de ancho máximo: 50rem incluimos código que hace que el .Pantalla pequeña clase visible, elimina nuestro 50% de relleno lateral de los contenedores de contenido y oculta las imágenes de fondo. Cuando esta consulta de medios se active, ya no veremos las grandes imágenes de fondo fijas, sino que veremos imágenes normales en la parte superior de cada contenedor de contenido..

Ahora, cuando actualice su sitio, debería verlo escalar suavemente junto con todos los anchos de la ventana gráfica, hasta que vea esto en su tamaño más pequeño:

Conclusión

Incluso después de tantos años trabajando con CSS, nunca me sorprende el número cada vez mayor de cosas increíbles que puedes hacer con él. Y cuanto más simple es la técnica, más impresionante es..

Prueba esta pequeña joya, es tan rápido y fácil que es probable que te enganches.!