Tira de la cuerda. Explicación del funcionamiento en #1
![Un artilugio mecánico interactivo en CSS puro [ENG]](https://cdn.mnmstatic.net/cache/38/72/media_thumb_2x-link-3699248.jpeg?1658609526)
Portada
mis comunidades
otras secciones
Comentarios
Explicación de cómo funciona recogida y traducida de: https://news.ycombinator.com/item?id=32125435
Traducción automática:
Un uso impresionante de la altura del contenedor para establecer el estado. Cómo funciona:
La cuerda izquierda tiene un atributo "resize: vertical" establecido, que te permite cambiar dinámicamente la altura de la misma con sólo css. Esto influye en la altura del contenedor padre, ya que es el único div que no tiene su altura establecida como un porcentaje.
Todos los demás div tienen su altura configurada con un "calc()" con un porcentaje y una cantidad añadida de píxeles. Esto significa que cuando el contenedor padre cambia de tamaño, su altura se ajusta, lo que también ajusta su imagen de fondo. Esto es lo que impulsa las animaciones de la cuerda y el engranaje, pero de diferentes maneras.
La cuerda es sencilla: cuando el contenedor crece en altura, la imagen de fondo de la cuerda cambia de posición, creando un efecto de tracción.
El engranaje es más complicado. Cada uno de ellos utiliza una hoja de sprite vertical larga para representar una animación de giro. El modo en que se activa esta animación es inteligente: fíjate en la posición de fondo de uno de los grandes engranajes rojos. Está ajustado a 10000%. Si lo pones al 100%, notarás que el fondo de los engranajes se mueve en sincronía con la cuerda - cada pixel de altura del elemento mueve el fondo hacia abajo en 1px. Al ponerlo al 10000% lo que estás diciendo es, "por cada píxel de altura de este elemento, desplaza el fondo 100px". En particular, cada uno de estos engranajes rojos en la hoja de sprites tiene precisamente 100px de altura. Eso significa que por cada píxel añadido a la altura, desplaza la hoja de sprites a la siguiente marcha.
Algo realmente inteligente.
#1 Vamos, una sacada de chorra.
#12 calmate, yo buscaba el comentario de que no va en el móvil para saber si soy subnormal yo y no se hacerlo o es que no se puede.
#14 No veo como ese dato podría descartar cualquiera de las dos premisas, no son excluyentes...
Ábrelo en Chrome, activa "vista ordenador", haz zoom y afílate los dedos para acertar en el recuadro negro. De nada.
CSS es el infierno
Tira del dedo
Solo funciona en pc o soy un pvto usuario?
#3 Funciona en móvil, pero no se ve entero.
#3 Yo tampoco puedo "tirar" de la cuerda desde el móvil. Ni con firefox ni con Chrome.
Dios, me siento como mi abuela, con lo que yo he sido. Me cagüen la mar.
#7 ahí mirando el móvil por encima de las gafas.
Le doy a la cuerdecita y hago scroll.
Me siento como cuando se pusieron de moda aquellas fotos que se veían en 3d bizqueando, que me gaste una pasta en un libro y nunca conseguí ver nada mientras mis amigos hacían halaaa, como molaaaaaa
#17 culpa mía, tengo el condensador de fluzo sin los últimos parches
En móvil no funciona 😂 😂
#4 #8 me preguntaba cuándo aparecería alguien como vosotros.
Una persona hace una virguería y siempre sale alguien diciendo "huy huy vaya mierda, que no es perfecta, se ha equivocado en tal o cual cosa.."
A lo mejor vosotros lo hacéis mejor, y hasta que se vea en móvil.
#9 Nadie ha dicho que sea una mierda, pero la puta realidad es la que es: no funciona en el móvil.
#11 es un experimento para enseñar algo que se puede hacer, no necesita funcionar en móvil ni ser accesible ni comentarios socarrones con caritas de risitas.
#9 yo creo que esta chica es tu novia.
#9 Es una virguería, sin duda. Mis dieses. Sólo estaba en plan tocapelotillas.
Y ni siquiera se abre bien en móvil.
#4 sí que funciona en móvil,aunque me tardó unos segundos
#18 Yo no he dicho que no funcione, sino que no se abre correctamente.
En firefox con bspwm como tiling manager y picom como compositor tampoco funciona. En chromium si que va.
#15 que con todos esos palabros molones no funcione me parece delictivo
Solo compatible con chrome parece.