The layout of my simple website is that there are 3 sections below each other with different background and every section have it's own textual content. I want to achieve so called 3D perspective effect, that the content text will throw shadow over the background section and when scrolling, the text will scroll a little bit faster than background.

Now there are thow ways of organizing the code:

First - every section (with background) have it's own content:

<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>

Second - sections (serving as a background) and text contents (hovering over background) are separated:

<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>

The difference is, that in first case, we must animate let's say top property of every content separately and in second case only the .contents wrapper need to be animated.

What is more preferred way, especially considering mobile device performance, then SEO and other stuff?