css 我怎样才能实现一个重叠和滚动效果像在这个网站上？

wnrlj8wa 于 2022-12-24 发布在其他

关注(0)|答案(1)|浏览(103)

我怎样才能实现一个重叠和滚动效果像在这个网站上？
[http：//www. pravilamag. ru/hero/289163-克谢尼亚-奇林加罗瓦-亚-比拉-拜-韦特罗姆-西罗科-特普利姆-诺-科瓦尔尼姆/]（有关网站链接）
只有第一部分（视频和覆盖它的块）是感兴趣的。
预先感谢你的帮助。
我试过这个密码，但没有成功。

<body>

    <div class="body-top">
        <div class="box-overlap">
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto beatae excepturi expedita illum labore magni maiores obcaecati quaerat sunt ut. Asperiores, dolorum in natus neque non quaerat tenetur vero voluptatum?</div>
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dicta facere molestiae placeat possimus quaerat similique, tempore tenetur voluptate. Aliquid amet consequatur doloremque hic itaque labore nemo quod sapiente voluptatibus?</div>
        </div>
        <div class="box-1">
            <div class="box-inner">

            </div>
        </div>
    </div>
    <div class="box-2">

    </div>

    <script src="index.js"></script>
</body>

.body-top {
    background: black;
}

.box-overlap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: -50vh auto 0;
    background: rgba(0, 0, 0, 0.5);
    position: relative;
    min-height: 100vh;
    width: 100%;
}

.box-overlap .text {
    font-size: 30px;
    padding: 20px 500px;
}

.box-1 {
    display: flex;
    align-items: center;
    top: 0;
    margin: 0 auto;
    background: #66ffd1;
    max-width: 1920px;
    min-height: 100vh;
}

.box-2 {
    height: 100vh;
    width: 100vw;
    background: #f5d1ff;
}

.box-inner {
    display: flex;
    margin: 0 auto;
    background: #FF0000;
    max-width: 1700px;
    min-height: 700px;
    width: 100%;
}

css

来源：https://stackoverflow.com/questions/74875767/how-can-i-implement-an-overlapping-and-scrolling-effect-like-on-this-site

1条答案

按热度按时间

w8f9ii691#

我希望这能有所帮助：

* {
    margin: 0;
    padding: 0;
}

.content {
  padding: 0 1rem;
  margin: 0 auto;
  max-width: 40rem;
}
.content p {
  min-height: 100vh; 
}

.bg {
  height: 100vh;
  margin: 0;
  width: 100%;
  top: 0;
  z-index: -1;
  position: sticky;
  background: url(https://images.unsplash.com/photo-1481349518771-20055b2a7b24?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cmFuZG9tfGVufDB8fDB8fA%3D%3D&w=1000&q=80);
  background-position: center;
  background-size: contain;
}

<h1>title</h1>

  <section>
  
    <figure class="bg"></figure>
  
    <article class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum tellus felis, at lobortis orci sollicitudin ac. Donec lobortis sapien ac posuere faucibus. Mauris lectus neque, pretium non volutpat eget, vestibulum at magna. In sollicitudin augue nunc, non bibendum augue ornare quis.</p>
    </article>
  
  </section>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at finibus elit, in venenatis lacus. Vivamus et magna mattis, aliquet lectus non, imperdiet enim. Proin nec sollicitudin ex, sit amet maximus nisi. Integer tempus hendrerit nisl, in pulvinar felis mollis nec. Vestibulum placerat, ipsum ut luctus auctor, ante velit consequat mi, at pellentesque mauris nisl ac purus. Pellentesque eleifend massa eu urna porta congue. Vivamus a nisl eu erat mattis blandit. Quisque nunc dui, congue ultrices metus ut, cursus tristique dui. Pellentesque rhoncus justo non nisi pulvinar, ut blandit dolor hendrerit. Donec tristique nibh nec velit mattis volutpat. Sed dictum ut lorem sed interdum. Vivamus ac erat sodales, commodo diam ut, mattis nulla.</p>

赞(0）回复(0）举报 2022-12-24

我来回答

css 我怎样才能实现一个重叠和滚动效果像在这个网站上？

1条答案

相关问题

热门标签

最新问答