Блог

Я просматривал веб-страницы в поисках простого решения, возможно, без использования сторонней библиотеки.

Рассмотрим следующий раздел веб-страницы с другими разделами над и под ним:

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

Я хотел бы прокрутить страницу, и как только я доберусь до этого раздела, я бы хотел, чтобы DIV с class about-pages page прокручивался до конца, а затем вся страница продолжает прокручиваться — эффект параллакса.

Я нашел эту демонстрацию, в которой используется библиотека ScrollMagic, но проблема в том, что в примере задается заранее определенная высота для DIV about-pages . В моем реальном сценарии высота этого DIV неизвестна, поскольку она может меняться со временем.

Есть ли чистое CSS-решение для этого? Если нет, кто-нибудь знает, как адаптировать ScrollMagic (не мой предпочтительный способ) для достижения этой цели?

Вот пример, который я нашел на YouTube с помощью ScrollMagic, но я не смог адаптировать его к случаям, когда высота RHS DIV неизвестна.

Спасибо за любые отзывы.