0

Понравилась на одном сайте анимация футера https://avada.theme-fusion.com/freelancer/ . Подскажите, что это за эффект и какая технология тут применяется. Пока просто не понимаю даже как это гуглить.

7
  • не понятно о какой анимации идет речь 10 июл 2019 в 9:49
  • Анимация футера 10 июл 2019 в 9:50
  • там одна анимация на футере 10 июл 2019 в 9:50
  • Он как-бы "выезжает" из под последнего блока 10 июл 2019 в 9:52
  • Во-первых это против правил ресурса использовать ссылки, т.к. она протухнет со временем. Во вторых у всех разные устройства, я не вижу ни одной анимации в футере 10 июл 2019 в 9:52

1 ответ 1

2

Основной фокус заключается в использование z-index и position: fixed.

У нас будет два блока content и footer, по задумке footer должен выезжать из под content, для этого нам нужно установить следующие стили для блоков:

.content {
  position: relative;
  z-index: 1;
  margin-bottom: 250px; /* У footer'а должна быть фиксированная высота, в нашем случае 250px */
                        /* следовательно значение margin-bottom равен высоте footer */
  background: #ddd;     /* Ну и фон, чтобы не было видно под ним footer */
}

.footer {
  position: fixed;      /* Эффект кажется нам из-за того, что блок прижат к низу экрана и */
                        /* постоянно движется, но его видно только в один момент - */
                        /* когда мы доходим до конца страницы */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;           /* Это тоже не мало важный момент, данный блок должен быть "под" content, */
                        /* следовательно его z-index должен быть меньше z-index'а content'а */
}

Пример:

body {
  margin: 0;
}

.content {
  display: block;
  width: 100%;
  height: 600px;
  position: relative;
  margin-bottom: 250px;
  z-index: 1;
  background: #ddd;
  
  font-size: 100px;
  text-align: center;
  line-height: 200px;
  color: #333;
}

.footer {
  display: block;
  width: 100%;
  height: 250px;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 0;
  background: url('https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__340.jpg') no-repeat center center / cover;
  
  font-size: 100px;
  text-align: center;
  line-height: 250px;
  color: #fff;
}
<div class="content">
  &lt;content&gt;
</div>
<div class="footer">
  &lt;footer&gt;
</div>

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.