A menudo pensamos en las imágenes de fondo como textura o algo que proporciona contraste para el contenido legible; en otras palabras, no es realmente contenido. Si fuera contenido, probablemente buscarías un <img>
en fin, accesibilidad y todo eso.
Pero hay ocasiones en que el posición or escala de una imagen de fondo podría ubicarse en algún lugar entre los polos de contenido y decoración. El contexto es el rey, ¿verdad? Si cambiamos la posición de la imagen de fondo, puede transmitir un poco más de contexto o experiencia.
¿Cómo es eso? Veamos algunos ejemplos que he visto flotando.
Al comenzar, advertiré que hay una línea muy fina en estas demostraciones entre las imágenes utilizadas para la decoración y las imágenes utilizadas como contenido. La diferencia tiene implicaciones de accesibilidad donde los fondos no se anuncian a los lectores de pantalla. Si tu imagen es realmente una imagen, entonces tal vez considere una <img>
etiqueta con la adecuada alt
texto. Y mientras hablamos de accesibilidad, es una buena idea considerar la preferencia de movimiento de un usuario .
¡Muestrame mas!
Chris Coyier tiene esta pequeña demostración ordenada de hace varios años.
La demostración es súper práctica en muchos sentidos porque es un enfoque limpio para mostrar anuncios en el contenido. Tiene el argumento de venta y una imagen atractiva para complementarlo.
La gran limitación para la mayoría de los anuncios, apostaría, es el espacio limitado. No sé si alguna vez ha tenido que colocar un anuncio en una página, pero yo sí y normalmente le pido al anunciante una imagen que cumpla con las dimensiones exactas en píxeles, de modo que el activo se ajuste al espacio.
Pero la demostración de Chris alivia el problema del espacio. Pase el cursor sobre la imagen y observe cómo se mueve y escala. El usuario realmente obtiene más, contexto para el producto que tendrían cuando la imagen estaba en su posición original. Eso es ganar-ganar, ¿verdad? El anunciante puede crear una imagen llamativa sin comprometer el contexto. Mientras tanto, el usuario obtiene un pequeño valor adicional de las partes de la imagen recién reveladas.
Si observa el marcado de la demostración, notará que es más o menos lo que esperaría. Aquí hay una versión abreviada:
<div class="ad-container"> <a href="#" target="_blank" rel="noopener"> <!-- Background image container --> <div class="ad-image"></div> </a> <div class="ad-content"> <!-- Content --> </div>
</div>
Probablemente podríamos cuestionar un poco la semántica, pero ese no es el punto. Tenemos un contenedor con un enlace <div>
para la imagen de fondo y otra <div>
para sostener el contenido.
En cuanto al estilo, las piezas importantes están aquí:
.container { background-image: url("/path/to/some/image.png"); background-repeat: no-repeat; background-position: 0 0; height: 400px; width: 350px;
}
No está mal, ¿verdad? Le damos algunas dimensiones al contenedor y le colocamos una imagen de fondo que no se repite y se coloca en su borde inferior izquierdo.
El verdadero truco es con JavaScript. Usaremos eso para obtener la posición del mouse y el desplazamiento del contenedor, luego convertiremos ese valor a una escala apropiada para establecer el background-position
. Primero, escuchemos los movimientos del mouse en el .container
elemento:
let container = document.querySelector(".container");
container.addEventListener("mousemove", function(e) { // Our function }
);
Desde aquí, podemos usar el contenedor offsetX
y offsetY
propiedades. Pero no usaremos estos valores directamente, ya que el valor de la coordenada X es más pequeño de lo que necesitamos, y la coordenada Y es más grande. Tendremos que jugar un poco para encontrar una constante que podamos usar como multiplicador.
Es un poco tocar y sentir, pero descubrí que 1.32
y 0.455
funciona perfectamente para las coordenadas X e Y, respectivamente. Multiplicamos las compensaciones por esos valores, agregamos un px
unidad en el resultado, luego aplicarlo a la background-position
valores.
let container = document.querySelector(".container");
container.addEventListener("mousemove", function(e) { container.style.backgroundPositionX = -e.offsetX * 1.32 + "px"; container.style.backgroundPositionY = -e.offsetY * 0.455 + "px"; }
);
Por último, también podemos restablecer las posiciones de fondo al original si el usuario abandona el contenedor de imágenes.
container.addEventListener("mouseleave", function() { container.style.backgroundPosition = "0px 0px"; }
);
Ya que estamos en CSS-Tricks, ofreceré que podríamos haber hecho una versión mucho más barata de esto con una pequeña transición de desplazamiento en CSS estándar:
Pintar una imagen más grande
Sin duda, has estado en alguna tienda de ropa en línea o lo que sea y te has encontrado con la antigua función de zoom al pasar el mouse.
Este patrón ha existido por lo que parece una eternidad (Dylan Winn-Brown compartió su enfoque de nuevo en 2016), pero eso es solo un testimonio (espero) de su utilidad. El usuario obtiene más contexto a medida que se acerca y tiene una mejor idea de la costura de un suéter o lo que sea.
Hay dos piezas en esto: el envase y del lupa. El contenedor es lo único que necesitamos en el marcado, ya que inyectaremos el elemento de lupa durante la interacción del usuario. Entonces, ¡mira nuestro HTML!
<div class="container"></div>
En el CSS, crearemos width
y height
variables para almacenar las dimensiones de la propia lupa. Entonces le daremos eso .container
alguna forma y background-image
:
:root {
--magnifer-width: 85;
--magnifer-height: 85;
} .container { width: 500px; height: 400px; background-size: cover; background-image: url("/path/to/image.png"); background-repeat: no-repeat; position: relative;
}
Hay algunas cosas que ya sabemos sobre la lupa incluso antes de que la veamos, y podemos definir esos estilos por adelantado, específicamente las variables previamente definidas para el .maginifier
es width
y height
:
.magnifier { position: absolute; width: calc(var(--magnifer-width) * 1px);
height: calc(var(--magnifer-height) * 1px);
border: 3px solid #000;
cursor: none;
background-image: url("/path/to/image.png");
background-repeat: no-repeat;
}
Es un pequeño cuadrado absolutamente posicionado que utiliza el mismo archivo de imagen de fondo como el .container
. Tenga en cuenta que la función calc solo se usa aquí para convertir el valor sin unidad en la variable a píxeles. Siéntase libre de organizarlo como mejor le parezca en cuanto a eliminar la repetición en su código.
Ahora, pasemos al JavaScript que reúne todo esto. Primero necesitamos acceder a la variable CSS definida anteriormente. Usaremos esto en varios lugares más adelante. Luego, necesitamos obtener la posición del mouse dentro del contenedor porque ese es el valor que usaremos para la posición de fondo de la lupa.
// Get the css variables
let root = window.getComputedStyle(document.documentElement);
let magnifier_width = root.getPropertyValue("--magnifer-width");
let magnifier_height = root.getPropertyValue("--magnifer-height"); let container = document.querySelector(".container");
let rect = container.getBoundingClientRect();
let x = (e.pageX - rect.left);
let y = (e.pageY - rect.top); // Take page scrolling into account
x = x - window.pageXOffset;
y = y - window.pageYOffset;
Lo que necesitamos es básicamente un mousemove
detector de eventos en el .container
. Luego, utilizaremos el event.pageX
or event.pageY
propiedad para obtener la coordenada X o Y del mouse. Pero para conseguir el exacto posición relativa del mouse en un elemento, debemos restar la posición del elemento principal de la posición del mouse que obtenemos del JavaScript anterior. Una forma "simple" de hacer esto es usar getBoundingClientRect()
, que devuelve el tamaño de un elemento y su posición relativa a la ventana gráfica.
Observe cómo estoy teniendo en cuenta el desplazamiento. Si hay desbordamiento, restando la ventana pageX
y pageY
las compensaciones asegurarán que el efecto se ejecute como se esperaba.
Primero crearemos la lupa div. A continuación, crearemos un mousemove
y agréguelo al contenedor de imágenes. En esta función, le daremos a la lupa un atributo de clase. También calcularemos la posición del mouse y le daremos a la lupa los valores izquierdo y superior que calculamos anteriormente.
Sigamos adelante y construyamos el magnifier
cuando escuchamos un mousemove
evento en el .container
:
// create the magnifier
let magnifier = document.createElement("div");
container.append(magnifier);
Ahora debemos asegurarnos de que tenga un nombre de clase que podamos abarcar en el CSS:
// run the function on `mousemove`
container.addEventListener("mousemove", (e) => { magnifier.setAttribute("class", "magnifier");
}
El video de ejemplo que mostré anteriormente coloca la lupa fuera del contenedor. Mantendremos esto simple y lo superpondremos en la parte superior del contenedor mientras se mueve el mouse. Usaremos if
declaraciones para establecer la posición de la lupa sólo si los valores X e Y son mayor or igual a cero, y menos que el ancho o la altura del contenedor. Eso debería mantenerlo dentro de los límites. Solo asegúrese de restar el ancho y la altura de la lupa de los valores X e Y.
// Run the function on mouse move.
container.addEventListener("mousemove", (e) => { magnifier.setAttribute("class", "magnifier"); // Get mouse position let rect = container.getBoundingClientRect(); let x = (e.pageX - rect.left); let y = (e.pageY - rect.top); // Take page scrolling into account x = x - window.pageXOffset; y = y - window.pageYOffset; // Prevent magnifier from exiting the container // Then set top and left values of magnifier if (x >= 0 && x <= container.clientWidth - magnifier_width) { magnifier.style.left = x + "px"; } if (y >= 0 && y <= container.clientHeight - magnifier_height) { magnifier.style.top = y + "px"; }
});
Por último, pero ciertamente no menos importante... tenemos que jugar un poco con la imagen de fondo de la lupa. El objetivo es que el usuario obtenga una vista MÁS GRANDE de la imagen de fondo en función de dónde se esté desplazando. Entonces, definamos una lupa que podamos usar para ampliar las cosas. Luego, definiremos variables para el ancho y el alto de la imagen de fondo para que tengamos algo en lo que basar esa escala, y estableceremos todos esos valores en el .magnifier
Estilos:
// Magnifier image configurations
let magnify = 2;
let imgWidth = 500;
let imgHeight = 400; magnifier.style.backgroundSize = imgWidth * magnify + "px " + imgHeight * magnify + "px";
Tomemos las coordenadas X e Y de la imagen de la lupa y apliquémoslas al .magnifier
elemento background-position
. Como antes con la posición de la lupa, necesitamos restar el ancho y la altura de la lupa de los valores X e Y usando las variables CSS.
// the x and y positions of the magnifier image
let magnify_x = x * magnify + 15;
let magnify_y = y * magnify + 15; // set backgroundPosition for magnifier if it is within image
if ( x <= container.clientWidth - magnifier_width && y <= container.clientHeight - magnifier_height
) { magnifier.style.backgroundPosition = -magnify_x + "px " + -magnify_y + "px";
}
Tada!
Hazlo cinemático
Has visto el Efecto Ken Burns? Es algo clásico y atemporal en el que una imagen es más grande que el contenedor en el que se encuentra, luego se desliza y escala lentamente como una babosa. Casi todos los documentales del mundo parecen usarlo para imágenes fijas. Si tienes un Apple TV, seguro que lo has visto en el protector de pantalla.
Existen mucho of ejemplos en CodePen si quieres tener una mejor idea.
Verá que hay varias maneras de abordar esto. Algunos usan JavaScript. Otros son 100% CSS. Estoy seguro de que los enfoques de JavaScript son buenos para algunos casos de uso, pero si el objetivo es simplemente escalar sutilmente la imagen, CSS es perfectamente adecuado.
Podríamos animar un poco las cosas usando múltiples fondos en lugar de uno. O, mejor aún, si ampliamos las reglas para usar elementos en lugar de imágenes de fondo, podemos aplicar la misma animación a todos los fondos y usar una pizca de animation-delay
para escalonar el efecto.
¡Muchas maneras de hacer esto, por supuesto! Ciertamente se puede optimizar con variables Sass y/o CSS. Diablos, tal vez puedas lograrlo con una sola <div>
Si es así, ¡compártelo en los comentarios!
Bono: hazlo inmersivo
No sé si hay algo más genial que el de Sarah Drasner. Bolígrafo "Feliz Halloween"… ¡y eso es de 2016! Es un gran ejemplo que superpone los fondos y los mueve a diferentes velocidades para crear una experiencia casi cinematográfica. ¡Dios mío, es genial!
GSAP es el principal impulsor allí, pero imagino que podríamos hacer una versión reducida que simplemente traduzca cada capa de fondo de izquierda a derecha a diferentes velocidades. No tan genial, por supuesto, pero ciertamente la experiencia básica. Debe asegurarse de que el inicio y el final de cada imagen de fondo sean consistentes para que se repita sin problemas cuando se repita la animación.
¡Eso es todo por ahora! Es bastante bueno que podamos usar fondos para mucho más que textura y contraste. Estoy absolutamente seguro de que hay toneladas de otras interacciones inteligentes que podemos aplicar a los fondos. Temani Afif hizo exactamente eso con un montón de buenos efectos de desplazamiento para enlaces. ¿Qué tienes en mente? ¡Compártelo conmigo en los comentarios!
- Distribución de relaciones públicas y contenido potenciado por SEO. Consiga amplificado hoy.
- Platoblockchain. Inteligencia del Metaverso Web3. Conocimiento amplificado. Accede Aquí.
- Fuente: https://css-tricks.com/moving-backgrounds/
- 1
- 11
- 7
- 9
- 98
- a
- Nuestra Empresa
- arriba
- Absoluto
- absolutamente
- de la máquina
- accesibilidad
- Mi Cuenta
- Ad
- Anuncios
- adelante
- Todos
- ya haya utilizado
- y
- animación
- anunció
- Otra
- Apple
- Aplicá
- enfoque
- enfoques
- adecuado
- en torno a
- activo
- Atrás
- fondo
- background-image
- antecedentes
- Malo
- bases
- basado
- Base
- Básicamente
- porque
- antes
- mejores
- entre
- Big
- más grande
- Poco
- frontera
- build
- Manojo
- calcular
- calculado
- cases
- ciertamente
- el cambio
- más barato
- clase
- clásico
- Ropa
- código
- comprometer
- Considerar
- consistente
- constante
- Envase
- contenido
- contexto
- contraste
- convertir
- Frio
- coordinar
- podría
- Curso
- Protectora
- Para crear
- CO
- Dash
- se define
- Demos
- HIZO
- un cambio
- una experiencia diferente
- dimensiones
- directamente
- mostrar
- documento
- un documental
- No
- No
- duda
- conductor
- Soltar
- durante
- cada una
- Más temprano
- Southern Implants
- efecto
- los efectos
- elementos
- eliminando
- garantizar
- inmuebles
- Incluso
- Evento
- NUNCA
- Cada
- exactamente
- ejemplo
- ejemplos
- Salir
- Expandir
- esperar
- esperado
- experience
- extra
- Llamativo
- Feature
- pocos
- Archive
- Film
- Encuentre
- en fin
- Nombre
- cómodo
- flotante
- hacia
- encontrado
- Gratuito
- Desde
- función
- obtener
- Donar
- vaso
- Go
- objetivo
- Va
- candidato
- maravillosa
- altura
- esta página
- mantener
- esperanza
- flotar
- Cómo
- Sin embargo
- HTML
- HTTPS
- ENFERMO
- idea
- imagen
- imágenes
- implicaciones
- importante
- in
- En otra
- interacción
- interacciones
- IT
- sí mismo
- JavaScript
- Guardar
- King
- Saber
- mayores
- .
- ponedoras
- la limitación
- Limitada
- línea
- pequeño
- Mira
- Inicio
- para lograr
- Mientras tanto
- se une a la
- podría
- mente
- más,
- MEJOR DE TU
- movimiento
- movimiento
- movimientos
- se mueve
- emocionante
- múltiples
- múltiples orígenes
- nombre
- ¿ Necesita ayuda
- Next
- número
- LANZAMIENTO
- compensar
- ONE
- en línea
- optimizado
- reconocida por
- Otro
- Otros
- afuera
- Patrón de Costura
- piezas
- Paso
- pixel
- Colocar
- Lugares
- Platón
- Inteligencia de datos de Platón
- PlatónDatos
- Jugar
- punto
- posición
- posicionado
- abiertas
- positivo
- Metodología
- bastante
- evitar
- previamente
- probablemente
- Producto
- apropiado
- propiedades
- perfecta
- proporciona un
- Tira
- en comunicarse
- lectores
- real
- bienes raíces
- repetir
- resultado
- devoluciones
- Revelado
- raíz
- reglas
- Ejecutar
- ventas
- mismo
- Hablar con descaro a
- Escala
- escamas
- alcance
- Pantalla
- lectores de pantalla
- desplazamiento
- sin problemas
- parece
- semántica
- set
- Varios
- Forma
- Compartir
- compartido
- tienes
- sencillos
- simplemente
- soltero
- Tamaño
- Slides
- lento
- menores
- So
- sólido
- algo
- algo
- en alguna parte
- Espacio
- específicamente
- velocidades
- especia
- cuadrado
- comienzo
- fundó
- declaraciones
- tienda
- papa
- adecuado
- súper
- ETIQUETA
- ¡Prepárate!
- toma
- hablar
- testamento
- La
- el mundo
- cosa
- cosas
- eterno
- veces
- a
- juntos
- TONS
- parte superior
- transición
- verdadero
- GIRO
- tv
- típicamente
- unidad
- utilizan el
- Usuario
- propuesta de
- Valores
- versión
- Video
- Ver
- Ver ahora
- formas
- ¿
- que
- mientras
- todo
- Wikipedia
- seguirá
- dentro de
- sin
- palabras
- Actividades:
- mundo
- se
- X
- años
- Usted
- tú
- zephyrnet
- cero
- Zoom