Question

您可以在https://www.wiseguypizza.com/上举一个例子。如您所见，它们的布局是

图片

内容

图片

内容

图片

内容。

当您向下滚动时，似乎您要保留的第一张图像已被内容覆盖，而当您继续滚动时，似乎您离开内容时所看到的下一幅图像已被发现。哪些CSS属性用于实现此目的？

Answer 1

您要实现的是视差效果。您可以使用一个简单的框架来实现它，以简化过程。在这里您可以找到一个简单的页面，其中包含您需要的效果。我使用了 Materialize ，您只需要导入JS和CSS（在您的源代码或CDN中）。

这是工作中的Codepen。

这是代码，您必须将“ 视差容器”和“ 视差”类添加到用于包装要移动图像的容器中（页面滚动），框架将完成其余工作！

  <div class="parallax-container">
    <div class="parallax">
         <img src="https://images.unsplash.com/photo-1552751857-21e31f44fe73?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1344&q=80" alt="Unsplashed background img 1">
    </div>
  </div>

这是完整的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
  <title>Parallax Page Test</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
  <nav class="black" role="navigation">
    <div class="nav-wrapper container">
      <a id="logo-container" href="#" class="brand-logo">Logo</a>
      <ul class="right hide-on-med-and-down">
        <li><a href="#">Navbar Link #1</a></li>
        <li><a href="#">Navbar Link #2</a></li>
        <li><a href="#">Navbar Link #3</a></li>
        <li><a href="#">Navbar Link #4</a></li>
        <li><a href="#">Navbar Link #5</a></li>
      </ul>
    </div>
  </nav>

  <div class="parallax-container">
    <div class="parallax"><img src="https://images.unsplash.com/photo-1552751857-21e31f44fe73?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1344&q=80" alt="Unsplashed background img 1"></div>
  </div>


  <div class="container">
    <div class="section">

      <div class="row">
        <div class="col s12 center">
          <h3><i class="mdi-content-send green-text"></i></h3>
          <h4>Section Title</h4>
          <p class="left-align light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque id nunc nec volutpat. Etiam pellentesque tristique arcu, non consequat magna fermentum ac. Cras ut ultricies eros. Maecenas eros justo, ullamcorper a sapien id, viverra ultrices eros. Morbi sem neque, posuere et pretium eget, bibendum sollicitudin lacus. Aliquam eleifend sollicitudin diam, eu mattis nisl maximus sed. Nulla imperdiet semper molestie. Morbi massa odio, condimentum sed ipsum ac, gravida ultrices erat. Nullam eget dignissim mauris, non tristique erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
        </div>
      </div>

    </div>
  </div>

  <div class="parallax-container">
    <div class="parallax"><img src="https://images.unsplash.com/photo-1496088285923-2bcbf1ba3f62?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Unsplashed background img 2"></div>
  </div>

  <div class="container">
    <div class="section">

      <div class="row">
        <div class="col s12 center">
          <h3><i class="mdi-content-send green-text"></i></h3>
          <h4>Section Title</h4>
          <p class="left-align light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque id nunc nec volutpat. Etiam pellentesque tristique arcu, non consequat magna fermentum ac. Cras ut ultricies eros. Maecenas eros justo, ullamcorper a sapien id, viverra ultrices eros. Morbi sem neque, posuere et pretium eget, bibendum sollicitudin lacus. Aliquam eleifend sollicitudin diam, eu mattis nisl maximus sed. Nulla imperdiet semper molestie. Morbi massa odio, condimentum sed ipsum ac, gravida ultrices erat. Nullam eget dignissim mauris, non tristique erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
        </div>
      </div>

    </div>
  </div>


  <div class="parallax-container">
    <div class="parallax"><img src="https://images.unsplash.com/photo-1545960696-624e0d91b52b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1491&q=80" alt="Unsplashed background img 3"></div>
  </div>

  <footer class="black">
    <div class="container">
      <div class="row">
        <div class="col l6 s12">
          <h5 class="white-text">Title</h5>
          <p class="grey-text text-lighten-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation nisi.</p>


        </div>
        <div class="col l3 s12">
          <h5 class="white-text">Title</h5>
          <ul>
            <li><a class="white-text" href="#!">Link 1</a></li>
            <li><a class="white-text" href="#!">Link 2</a></li>
            <li><a class="white-text" href="#!">Link 3</a></li>
            <li><a class="white-text" href="#!">Link 4</a></li>
          </ul>
        </div>
        <div class="col l3 s12">
          <h5 class="white-text">Title</h5>
          <ul>
            <li><a class="white-text" href="#!">Link 1</a></li>
            <li><a class="white-text" href="#!">Link 2</a></li>
            <li><a class="white-text" href="#!">Link 3</a></li>
            <li><a class="white-text" href="#!">Link 4</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="footer-copyright">
      <div class="container">
      &copy; Copyright
      </div>
    </div>
  </footer>


  <!--  Scripts-->
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
            
  <script type="text/javascript">
    (function($){
      $(function(){

        $('.parallax').parallax();

      });
    })(jQuery);
  </script>

  </body>
</html>

希望这会有所帮助！

当用户滚动时，如何使其显示图像正被内容覆盖？

1 个答案: