Как реализовать такой параллакс?

Question

[Кирилл]

Здравствуйте. Помогите пожалуйста понять, что я делаю не так. Чувствую, что решение простое, но бошка уже кипит, не соображаю толком.
codepen.io/Kublyakov/pen/jPxzNO
По ссылке то, что сейчас есть у меня. Все отлично, кроме одного: При скроллинге на красный блок снизу наползает другой блок и красный блок внизу вместо полукруглого становится плоским, а так быть не должно. То есть анимация должна остаться такой же, но красный блок должен быть полукруглым и полукруглым он должен исчезать.
Как это реализовать?

Answer 1

[Mikita Lisavets]

Можно копнуть в этом направлении:

.slogan {
  height: 0;
}
.slogan:after {
  content: '';
  position: absolute;
  width: 2000px;
  height: 586px;
  background: inherit;
  top: 100%;
  margin-top: -263px;
  left: 50%;
  margin-left: -1000px;
  z-index: -1;
  border-radius: 50%;
}

Comments

[Кирилл]

Да, спасибо, именно то, что нужно! Чуть подправленная версия codepen.io/Kublyakov/pen/jPxzNO