Parallax Multiple DIVs с чистым CSS - PullRequest
0 голосов
/ 10 октября 2018

У меня проблемы с созданием нескольких групп параллакса.Я могу заставить его работать на 1 группу (1 параллакс Div и 1 контент Div).Но когда я добавил вторую группу, прокрутка стала очень странной.Когда я прокрутил мимо первой группы (первая группа все еще видна, но частично), если я переместил курсор к следующему элементу div и продолжил прокрутку, часть из первой группы не будет прокручиваться.

Вотскрипка, которая лучше объясняет это: https://jsfiddle.net/em6w25n8/

html:

<div class="main-container">
  <div class="parallax-container">
    <h>Lorem Ipsum</h>
  </div>

  <div class="content-container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Habitant morbi tristique senectus et netus et. Scelerisque in dictum non consectetur a erat nam at lectus. Eu non diam phasellus vestibulum lorem sed risus. Sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. In aliquam sem fringilla ut morbi tincidunt augue. Dui vivamus arcu felis bibendum ut. Habitasse platea dictumst quisque sagittis purus sit amet volutpat consequat. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa. Rhoncus est pellentesque elit ullamcorper. Id velit ut tortor pretium. Pharetra massa massa ultricies mi quis. At in tellus integer feugiat scelerisque. Dolor sit amet consectetur adipiscing elit duis tristique sollicitudin nibh. Facilisi morbi tempus iaculis urna id volutpat lacus laoreet. Vivamus arcu felis bibendum ut tristique et egestas quis ipsum. Amet porttitor eget dolor morbi non arcu risus.

Cras ornare arcu dui vivamus. Fames ac turpis egestas maecenas pharetra convallis posuere morbi. Cursus turpis massa tincidunt dui ut ornare lectus. Eget felis eget nunc lobortis mattis. Hendrerit dolor magna eget est lorem ipsum dolor sit. Ut porttitor leo a diam sollicitudin tempor id eu. Vitae semper quis lectus nulla at volutpat. Iaculis eu non diam phasellus. Tempus imperdiet nulla malesuada pellentesque elit eget gravida cum. Sit amet risus nullam eget felis eget nunc. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum fusce. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. Tincidunt augue interdum velit euismod. Nunc mattis enim ut tellus elementum. Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Aliquam sem fringilla ut morbi tincidunt augue interdum velit euismod. Consequat nisl vel pretium lectus quam id.</p>
  </div>
</div>


<div class="main-container">
  <div class="parallax-container">
    <h>Lorem Ipsum</h>
  </div>
<div class="content-container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Habitant morbi tristique senectus et netus et. Scelerisque in dictum non consectetur a erat nam at lectus. Eu non diam phasellus vestibulum lorem sed risus. Sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. In aliquam sem fringilla ut morbi tincidunt augue. Dui vivamus arcu felis bibendum ut. Habitasse platea dictumst quisque sagittis purus sit amet volutpat consequat. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa. Rhoncus est pellentesque elit ullamcorper. Id velit ut tortor pretium. Pharetra massa massa ultricies mi quis. At in tellus integer feugiat scelerisque. Dolor sit amet consectetur adipiscing elit duis tristique sollicitudin nibh. Facilisi morbi tempus iaculis urna id volutpat lacus laoreet. Vivamus arcu felis bibendum ut tristique et egestas quis ipsum. Amet porttitor eget dolor morbi non arcu risus.

Cras ornare arcu dui vivamus. Fames ac turpis egestas maecenas pharetra convallis posuere morbi. Cursus turpis massa tincidunt dui ut ornare lectus. Eget felis eget nunc lobortis mattis. Hendrerit dolor magna eget est lorem ipsum dolor sit. Ut porttitor leo a diam sollicitudin tempor id eu. Vitae semper quis lectus nulla at volutpat. Iaculis eu non diam phasellus. Tempus imperdiet nulla malesuada pellentesque elit eget gravida cum. Sit amet risus nullam eget felis eget nunc. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum fusce. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. Tincidunt augue interdum velit euismod. Nunc mattis enim ut tellus elementum. Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Aliquam sem fringilla ut morbi tincidunt augue interdum velit euismod. Consequat nisl vel pretium lectus quam id.</p>
  </div>
</div>
...