Параллакс эффект для футера на чистом CSS

Franky Jo

3 года назад

Если вы хотите сделать на своем сайте оригинальный футер, которым может запомниться вашим пользователям и хотите внести изюминку на ваш сайт, то эта статья именно для вас.
Параллакс эффект для футера написанный на чистом CSS это намного проще, чем вы думаете.

HTML:

<main>
  <p>Листай вниз</p>
  <p>&#8615;</p>
  <p>&#8615;</p>
  <p>&#8615;</p>
  <p>&#8615;</p>
</main>
<footer>
  <p>А вот и параллакс футер</p>
</footer>

<main>

<p>Листай вниз</p>

</main>

<p>А вот и параллакс футер</p>

</footer>

CSS:

main {
  position: relative;
  z-index: 2;
  background: #F56469;
  height: 1500px;
  margin-bottom: 350px;
  box-shadow: 3px 2px 2px 0px rgba(51,51,51,0.5);
}

main p {
  margin: 0;
  padding-top: 100px;
  font-size: 100px;
  text-align: center;
  color: #ddd; 
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 350px;  
  padding-left: 50px;
  background: #4B466F;
  font-size: 100px;
  color: #F56469;
}

main {

position: relative;

z-index: 2;

background: #F56469;

height: 1500px;

margin-bottom: 350px;

box-shadow: 3px 2px 2px 0px rgba(51,51,51,0.5);

}

main p {

margin: 0;

padding-top: 100px;

font-size: 100px;

text-align: center;

color: #ddd;

}

footer {

position: fixed;

bottom: 0;

width: 100%;

height: 350px;

padding-left: 50px;

background: #4B466F;

font-size: 100px;

color: #F56469;

}

ДЕМО

Если данная статья вам понравилась, помогла или просто нужна помощь по внедрению, оставляйте свои комментарии.
А также чтобы не пропустить выхода новых статей подписывайтесь на наш telegram-канал и соц.сети