Estuve escaneando la web en busca de una solución simple, posiblemente sin usar una biblioteca de terceros.

Considere la siguiente sección en una página web con otras secciones arriba y abajo:

 <section class="about"> <div class="about-title"> <h1>About Me</h1> </div> <div class="about-pages"> <div> <h2>Project 1</h2> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam excepturi assumenda neque ipsum vel vitae, aliquid minima, totam inventore provident aspernatur pariatur nulla voluptatibus possimus, quas atque quis doloremque! Unde explicabo doloremque autem ipsa provident voluptates mollitia tenetur alias natus, iste libero dolore dicta minus nostrum nihil! Dicta, vel alias. </p> </div> <div> <h2>Project 2</h2> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam excepturi assumenda neque ipsum vel vitae, aliquid minima, totam inventore provident aspernatur pariatur nulla voluptatibus possimus, quas atque quis doloremque! Unde explicabo doloremque autem ipsa provident voluptates mollitia tenetur alias natus, iste libero dolore dicta minus nostrum nihil! Dicta, vel alias. </p> </div> <div> <h2>Project 3</h2> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam excepturi assumenda neque ipsum vel vitae, aliquid minima, totam inventore provident aspernatur pariatur nulla voluptatibus possimus, quas atque quis doloremque! Unde explicabo doloremque autem ipsa provident voluptates mollitia tenetur alias natus, iste libero dolore dicta minus nostrum nihil! Dicta, vel alias. </p> </div> </div> </section>

Me gustaría desplazar la página y, una vez que llegue a esta sección, me gustaría que el DIV con la página about-pages la clase se desplace hasta el final y luego toda la página continúe desplazándose, un efecto de paralaje.

Encontré esta demostración que usa la biblioteca ScrollMagic, pero el problema es que el ejemplo establece una altura predefinida para las about-pages DIV. En mi escenario real, la altura de este DIV no se conoce, ya que puede variar con el tiempo.

¿Hay una solución CSS pura para esto? Si no, ¿alguien sabe cómo adaptar ScrollMagic (no es mi forma preferida) para lograr esto?

Aquí está el ejemplo que encontré en YouTube con ScrollMagic pero no pude adaptarlo a los casos en los que no se conoce la altura del RHS DIV.

Gracias por cualquier retroalimentación.