具有纯CSS的视差多个DIV

时间:2018-10-10 02:21:50

标签: html css frontend parallax

我在创建多个视差组时遇到了麻烦。我能够使它适用于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>

0 个答案:

没有答案