Анимация при скроллинге, блок выезжает из под предыдущего блока

Question

Как сделать анимацию при скролле, чтобы нижний блок выезжал из под предыдущего блока при скролле?
пример https://site.com/4364047/43423432/
нужный эффект есть в центре страницы и в самом низу в футере
или тут: http://gnatkovsky.com.ua/files/slideout-footer/index.html только нужно этот эффект добавить в любую часть сайта, не только вниз

P.S.
т.е. интересует как применить эту анимацию в центре страницы

Answer 1

Это простой эффект параллакса. Вот небольшой пример:

Дополнительно ещё примеры: раз, два, три, четыре, пять

* {
  margin: 0;
  padding: 0;
}

.text {
  padding: 100px 50px;
}

.text p {
  max-width: 900px;
  margin: 20px auto;
  font-size: 18px;
  line-height: 2;
  font-family: sans-serif;
}

.background {
  height: 100vh;
  width: 100%;
}

.one {
  background: url('https://pbs.twimg.com/media/De_Ux4RWAAABA6l.jpg:large') center right no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.two {
  background: url('https://ingir.biz/wp-content/uploads/2018/06/Pushkin-1.jpg') center center no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.three {
  background: url('https://sozh.info/wp-content/uploads/2016/03/Vo-dvorce-Rumyancevykh-i-Paskevichey-vystavili-pamyatnik-Pushkinu.jpg') center right no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.four {
  background: url('https://miraman.ru/imagetransform/quality_95_width_1920_height_1080_fit_2/uploads/20160606/image35861384.jpg') center center no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.five {
  background: url('https://sxodim.com/uploads/shymkent/2019/06/7686a2b862307b5872472e6019b84b8d.jpg') center center no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

<div class="background one parallax"></div>
<div class="text">
  <p>Александр Пушкин начал писать свои первые произведения уже в семь лет. В годы учебы в Лицее он прославился, когда прочитал свое стихотворение Гавриилу Державину. Пушкин первым из русских писателей начал зарабатывать литературным трудом. Он создавал
    не только лирические стихи, но и сказки, историческую прозу и произведения в поддержку революционеров — за вольнодумство поэта даже отправляли в ссылки.</p>
  <p>Александр Пушкин родился в обедневшей дворянской семье 6 июня 1799 года. В раннем детстве он был молчаливым и малоподвижным ребенком — старшая сестра Ольга вспоминала, что до шести лет мальчик «был просто увалень». Начальное образование Пушкин получил
    дома. Воспитание его ничем не отличалось от общепринятой тогда в дворянских семьях системы: родители нанимали ему гувернеров и учителей из Франции, Германии, Англии, России.</p>
</div>
<div class="background two parallax"></div>
<div class="text">
  <p>Александр Пушкин начал писать свои первые произведения уже в семь лет. В годы учебы в Лицее он прославился, когда прочитал свое стихотворение Гавриилу Державину. Пушкин первым из русских писателей начал зарабатывать литературным трудом. Он создавал
    не только лирические стихи, но и сказки, историческую прозу и произведения в поддержку революционеров — за вольнодумство поэта даже отправляли в ссылки.</p>
  <p>Александр Пушкин родился в обедневшей дворянской семье 6 июня 1799 года. В раннем детстве он был молчаливым и малоподвижным ребенком — старшая сестра Ольга вспоминала, что до шести лет мальчик «был просто увалень». Начальное образование Пушкин получил
    дома. Воспитание его ничем не отличалось от общепринятой тогда в дворянских семьях системы: родители нанимали ему гувернеров и учителей из Франции, Германии, Англии, России.</p>
</div>
<div class="background three parallax"></div>
<div class="text">
  <p>Александр Пушкин начал писать свои первые произведения уже в семь лет. В годы учебы в Лицее он прославился, когда прочитал свое стихотворение Гавриилу Державину. Пушкин первым из русских писателей начал зарабатывать литературным трудом. Он создавал
    не только лирические стихи, но и сказки, историческую прозу и произведения в поддержку революционеров — за вольнодумство поэта даже отправляли в ссылки.</p>
  <p>Александр Пушкин родился в обедневшей дворянской семье 6 июня 1799 года. В раннем детстве он был молчаливым и малоподвижным ребенком — старшая сестра Ольга вспоминала, что до шести лет мальчик «был просто увалень». Начальное образование Пушкин получил
    дома. Воспитание его ничем не отличалось от общепринятой тогда в дворянских семьях системы: родители нанимали ему гувернеров и учителей из Франции, Германии, Англии, России.</p>
</div>
<div class="background four parallax"></div>
<div class="text">
  <p>Александр Пушкин начал писать свои первые произведения уже в семь лет. В годы учебы в Лицее он прославился, когда прочитал свое стихотворение Гавриилу Державину. Пушкин первым из русских писателей начал зарабатывать литературным трудом. Он создавал
    не только лирические стихи, но и сказки, историческую прозу и произведения в поддержку революционеров — за вольнодумство поэта даже отправляли в ссылки.</p>
  <p>Александр Пушкин родился в обедневшей дворянской семье 6 июня 1799 года. В раннем детстве он был молчаливым и малоподвижным ребенком — старшая сестра Ольга вспоминала, что до шести лет мальчик «был просто увалень». Начальное образование Пушкин получил
    дома. Воспитание его ничем не отличалось от общепринятой тогда в дворянских семьях системы: родители нанимали ему гувернеров и учителей из Франции, Германии, Англии, России.</p>
</div>
<div class="background five parallax"></div>

БЛОГ НА HUSL

Анимация при скроллинге, блок выезжает из под предыдущего блока

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