Poniéndose elegante con la posición: pegajoso;

 

 

 

Mike Solomon trabajó en una elegante publicación con pergaminos para Esquire y escribió un blog sobre ello . Tiene GIF de cada paso en el camino para descubrir no solo position: sticky;sino también el uso de márgenes negativos, divs envolventes, fondos e incluso una pizca de medición de JavaScript para hacerlo todo bien.

Lo que no tiene es ninguna demostración aislada del efecto. Pensé que le daría una oportunidad a la ingeniería inversa.

Aquí está el mío, al que llamaré “Imagen adhesiva con figura sobresaliente”:

Esa demostración está llena de números mágicos para hacer que la salida produzca el efecto de “esconderse detrás”. Si eso no es importante, esta versión es mucho más limpia .

 

Probablemente no como Mike lo tenía, pero no estoy al tanto de los detalles exactos que buscaba en la publicación del blog. Su GIF final es:

Aquí hay un video rápido que grabaré a partir del artículo en sí en caso de que te inspire a encontrar un enfoque diferente:


¡Eh! De hecho, hablé con Mike sobre todo esto y él dice que la conclusión principal de todo esto (que pasó por alto, ¡lo siento, Mike!) es que “lo adhesivo no es solo para la parte superior de la pantalla”. Observe en el producto final cómo el elemento adhesivo se vuelve adhesivo mucho antes de convertirse en el elemento en la parte superior de la pantalla. Es más como el centro de la pantalla. Para eso topestá el valor position: sticky;, pero en esta demostración donde el objetivo es deslizarlo dentro y fuera de una imagen, se vuelve complicado.

 

Después de algunas bifurcaciones de ida y vuelta…

Enlace directo → Recetas de Postres peruanos






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. La innovación no puede mantener la Web rápida
  2. Rendimiento web ultrarrápido
  3. Tabla de contenidos fijos con estados activos de desplazamiento
  4. “cambiar tamaño: ninguno;” en áreas de texto es una mala experiencia de usuario

Poniéndose elegante con la posición: pegajoso;

Poniéndose elegante con la posición: pegajoso;

Mike Solomon trabajó en una elegante publicación con pergaminos para Esquire y escribió un blog sobre ello . Tiene GIF de cada paso en el camino para descub

programar

es

https://pseint.es/static/images/programar-poniendose-elegante-con-la-posicion-pegajoso-1206-0.jpg

2024-06-13

 

Poniéndose elegante con la posición: pegajoso;
Poniéndose elegante con la posición: pegajoso;

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences