El diseño de mi sitio web simple es que hay 3 secciones una debajo de la otra con un fondo diferente y cada sección tiene su propio contenido textual. Quiero lograr el llamado efecto de perspectiva 3D, que el texto del contenido arroje sombra sobre la sección de fondo y al desplazarse, el texto se desplazará un poco más rápido que el fondo.

Ahora hay dos formas de organizar el código:

Primero : cada sección (con fondo) tiene su propio contenido:

 <main> <section class="background-1"> <div class="content-1">Some text and image</div> </section> <section class="background-2"> <div class="content-2">Some text and image</div> </section> <section class="background-3"> <div class="content-3">Some text and image</div> </section> </main>

Segundo : las secciones (que sirven como fondo) y el contenido del texto (al pasar el mouse sobre el fondo) están separados:

 <div class="backgrounds"> <div class="background-1"></div> <div class="background-2"></div> <div class="background-3"></div> </div> <main class="contents"> <section class="content-1">Some text and image</section> <section class="content-2">Some text and image</section> <section class="content-3">Some text and image</section> </main>

La diferencia es que, en el primer caso, debemos animar, digamos, la propiedad top de cada contenido por separado y, en el segundo caso, solo es necesario animar el contenedor .contents .

¿Cuál es la forma más preferida, especialmente teniendo en cuenta el rendimiento del dispositivo móvil, luego el SEO y otras cosas?