Soy un diseñador que intenta crear un prototipo de un comportamiento de desplazamiento único. Por favor, tenga paciencia conmigo.

Aquí hay una animación GIF

Contexto:

• Básicamente, quiero que un div cambie de altura (hacia arriba o hacia abajo hasta una altura arbitraria) según su posición en un padre.

• Específicamente, un div debe disminuir en altura, hasta 0, a medida que sale de la vista del padre y aumentar, desde 0, de lo contrario.

• Cuando combina esto con esquinas redondeadas, le da un efecto único.

• En su mayoría, he estado experimentando con getBoundingClientRect en el contexto de un div principal y usando diferentes matemáticas para cambiar el estilo/alto del div.

Hasta ahora, el efecto no funciona tan bien.

Aquí hay una demostración de trabajo (el rectángulo rosa es el que debería cambiar, no he descubierto cómo aplicar el efecto a todos ellos, pero eso es una q separada :)