slot bet 100

Fondos en movimiento | Trucos CSS - Trucos CSS

A menudo pensamos en las imágenes de fondo como una textura o algo que proporciona contraste para el contenido legible; en otras palabras, no es realmente contenido. Si fuera contenido, probablemente lo alcanzarías <img> de todos modos, la asequibilidad y todo eso.

Pero hay momentos en que posición o escala de una imagen de fondo puede estar en algún lugar entre los polos de contenido y decoración. El contexto es lo más importante, ¿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? Echemos un vistazo a algunos ejemplos que he visto flotando.

Para empezar, advierto que en estas demos hay una línea muy fina entre las imágenes utilizadas como decoración y las imágenes utilizadas como contenido, la diferencia tiene implicaciones de accesibilidad cuando el fondo no se anuncia a los lectores de pantalla. Si tu imagen es realmente una imagenentonces tal vez considere <img> etiquetar con apropiado alt texto. Y mientras hablamos de accesibilidad, también es una buena idea considerar las preferencias de movilidad del usuario.

¡Muestrame mas!

Chris Coyier tiene esta pequeña demostración ordenada de hace unos años.

La demostración es súper práctica en muchos sentidos porque es un enfoque limpio para publicar anuncios en el contenido. Tienes una presentación comercial y una imagen atractiva para complementarla.

Apuesto a que la gran limitación para la mayoría de los anuncios es el espacio limitado. No sé si alguna vez ha tenido que publicar un anuncio en una página, pero lo he hecho y generalmente le pido al anunciante una imagen que coincida con las dimensiones exactas en píxeles para 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 hace zoom. 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? Un 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 en 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="https://css-tricks.com/moving-backgrounds/#" target="_blank" rel="noopener">
    <!-- Background image container  -->
    <div class="ad-image"></div>
  </a> 
  <div class="ad-content">
    <!-- Content -->
  </div>
</div>

Probablemente podríamos discutir un poco sobre la semántica, pero ese no es el punto. Tenemos un contenedor con un conectado <div> para imagen de fondo y más <div> para sostener el contenido.

En cuanto al estilo, las partes 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 al contenedor algunas dimensiones y establecemos una imagen de fondo que no se repite y se coloca desde el borde inferior izquierdo.

El verdadero truco es con JavaScript. Lo usaremos para obtener la posición del mouse y el desplazamiento del contenedor, luego escalaremos ese valor a la escala adecuada para establecer background-positionPrimero, escuchemos los movimientos del mouse en .container elemento:

let container = document.querySelector(".container");
container.addEventListener("mousemove", function(e) {
    // Our function
  }
);

Desde aquí podemos usar el contenedor offsetX y offsetY Pero no usaremos estos valores directamente porque el valor de la coordenada X es más pequeño que 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.

Artículo Recomendado:  Cómo usar tus propios campos personalizados en WordPress (y 5 ejemplos útiles) trucos CSS

Es un poco tocar y sentir, pero lo encontré. 1.32 y 0.455 funcionan perfectamente para las coordenadas X e Y respectivamente. Multiplicamos las compensaciones por estos valores, agregamos px unidad en el resultado, luego aplicarlo a 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";
  }
);

Finalmente, también podemos restablecer las posiciones de fondo al original si el usuario sale del contenedor de imágenes.

container.addEventListener("mouseleave", function() {
    container.style.backgroundPosition = "0px 0px";
  }
);

Ya que estamos en CSS-Tricks, sugiero 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, ha estado en alguna tienda de ropa en línea o lo que sea y se ha encontrado con la antigua función de zoom en espera.

Este modelo existe desde siempre (Dylan Winn-Brown compartió su enfoque en 2016), pero esto es solo una prueba (espero) de su utilidad. El usuario obtiene más contexto cuando hace zoom y obtiene una mejor vista de una puntada en un suéter o lo que sea.

Hay dos partes en esto: envase y en lupaEl contenedor es lo único que necesitamos en el marcado, ya que inyectaremos el elemento de lupa durante la interacción del usuario. Por lo tanto, echa un vistazo a nuestro HTML!

<div class="container"></div>

En CSS crearemos width y height variables para almacenar las dimensiones de la propia lupa. Entonces le daremos esto .containeralguna 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 estos estilos de antemano, específicamente las variables previamente definidas para .maginifier'C 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 cuadradito absolutamente posicionado que utiliza lo mismo archivo con imagen de fondo como .containerTenga en cuenta que la función calc se usa aquí solo para convertir el valor sin unidades en la variable a píxeles. Siéntase libre de organizar esto como mejor le parezca, siempre y cuando elimine la repetición en su código.

Ahora pasemos al JavaScript que lo une todo. Primero necesitamos acceder a la variable CSS definida anteriormente. Usaremos esto en muchos lugares más adelante. A continuación, necesitamos obtener la posición del mouse en el contenedor, porque este es el valor que se usará 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 oyente de eventos en .containerEntonces usaremos event.pageX o event.pageY propiedad para obtener la coordenada X o Y del mouse. pero para conseguir exactamente 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.

Artículo Recomendado:  :has es un selector despiadado | trucos CSS

Observe cómo tomo en cuenta el desplazamiento Si hay un desbordamiento, abra la ventana pageX y pageY las compensaciones asegurarán que el efecto funcione como se esperaba.

Primero crearemos el div lupa. 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 magnifier cuando escuchamos un mousemove evento de .container:

// create the magnifier
let magnifier = document.createElement("div");
container.append(magnifier);

Ahora debemos asegurarnos de que haya un nombre de clase que podamos incluir en 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, en su lugar, lo superpondremos en el contenedor a medida que se mueve el mouse. Usaremos if instrucciones para configurar la posición de la lupa solo si los valores X e Y son más grande o igual a cero y menos que el ancho o la altura del contenedor. Eso debería mantenerlo dentro de los límites. Solo recuerda 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 no menos importante... tenemos que jugar un poco con la imagen de fondo de la lupa. El punto es que el usuario obtiene una vista MÁS GRANDE de la imagen de fondo en función de dónde se lleva a cabo la retención. Entonces, definamos una lupa que podamos usar para escalar cosas. A continuación, definiremos variables para el ancho y el alto de la imagen de fondo para que tengamos algo en lo que basar esta escala, y estableceremos todos esos valores en .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 a la .magnifierel elemento background-position​.Al igual que antes con la posición de la lupa, debemos 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!

Artículo Recomendado:  9 nuevos enlaces a React y JavaScript para febrero de 2022 trucos CSS

Hazlo cinemático

Haz visto 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 y luego se desliza y escala lentamente como un caracol. Casi todos los documentales del mundo parecen usarlo para imágenes fijas. Si tienes un Apple TV, seguro que lo has visto en el salvapantallas.

Hay mucho en 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 están bien para algunos casos de uso, pero si el objetivo es escalar bien la imagen, CSS está perfectamente bien.

Podríamos animar un poco las cosas usando múltiples fondos en lugar de uno. O, mejor aún, si extendemos 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.

¡Hay muchas maneras de hacer esto, por supuesto! Ciertamente se puede optimizar con variables Sass y/o CSS. Demonios, tal vez puedas hacerlo con uno solo <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 esto es de 2016! Este es un gran ejemplo de superponer fondos y moverlos a diferentes velocidades para crear una experiencia casi cinematográfica. ¡Dios, qué grande!

GSAP es el motor principal allí, pero supongo que podríamos hacer una versión abreviada que simplemente traduzca cada capa de fondo de izquierda a derecha a diferentes velocidades. No tan genial, seguro, pero ciertamente la experiencia base. Necesitamos asegurarnos 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! Bastante bien que podamos usar fondos para mucho más que textura y contraste. Estoy absolutamente seguro de que hay muchas otras interacciones inteligentes que podemos aplicar a los fondos. Temani Afif hizo exactamente eso con un montón de buenos efectos en espera para enlaces. ¿Qué tienes en mente? ¡Compártelo conmigo en los comentarios!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir