Как реализовать такое наложение?

Question

Хочу такой же прикол как https://sbermobile.ru

У них когда скролишь вниз 2 часть накладывается на другую (1 часть), и снизу при скроле 3 часть выходит из под текста. Как это можно реализовать? Так же вопрос как можно такое же скругление углов секций сделать, типо у них на пк одно скругление, а на мобилках другое.

На моем сайте структура вот такая

<html><head></head><body> 
<nav></nav> 
<section id="up">text1</section> 
<section id="center">text2</section> 
<section id="down">text3</section> 
<footer></footer></body></html>

где up - вверхняя часть как на сайте сбермобайл
center - середина которая напалзает
down - нижняя часть которая выползает из под center

Answer 1

На указанной странице в решении используется position:sticky для "выползающих" элементов.

И повышенный z-index для центрального элемента, чтобы он был выше.

Пример:

section {
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#up {
  position: sticky;
  top: 0;
  background-color: red;
  height: 40vh;

}

#center {
  background-color: white;
  position: relative;
  z-index: 1;
}

#down {

  position: sticky;
  bottom: 0;
  background-color: green;
  height: 40vh;
}

<nav><span>up</span> <span>center</span> <span>down</span></nav>
<section id="up">text1</section>
<section id="center">text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2<br>text2</section>
<section id="down">text3</section>
<footer>Footer</footer>

БЛОГ НА HUSL

Как реализовать такое наложение?

Ответы (1 шт):