Эффект параллакса показывает участки, как если бы они просматривались с разных позиций. В этой статье я сосредоточусь на эффекте параллакса для разных экземпляров нижних колонтитулов:

  1. Нижние колонтитулы с фиксированной высотой
  2. Колонтитулы, высота которых меняется в зависимости от содержания
  3. Нижние колонтитулы выше самого устройства на определенных точках останова

Вы можете проверить это демо здесь и репозиторий Github здесь.

1. Высота нижнего колонтитула фиксирована на всех устройствах.

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

  • position: relative для всех разделов, кроме нижнего колонтитула. Это очень важно, потому что z-index не будет применяться без указанной позиции.
  • z-index иерархия основного содержания ›нижнего колонтитула› заполнителя.
  • Раздел-заполнитель , соответствующий высоте нижнего колонтитула. Этот раздел будет прокручиваться в обычном режиме страницы. Когда пользователь переходит к нижнему колонтитулу, содержимое отображается под ним, потому что невидимый раздел действует как заполнитель для нижнего колонтитула.
  • position: fixed & bottom: 0 для нижнего колонтитула. При этом нижний колонтитул удаляется из потока документа и располагается в самом низу (по отношению к документу). Это раскрывается, когда пользователь прокручивает до раздела заполнителя.

2. В нижнем колонтитуле есть контент, высота которого меняется.

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

Исправление: измените высоту с помощью Javascript. CSS останется таким же, как указано выше.

3. На некоторых устройствах ваш нижний колонтитул выше, чем высота устройства? 😳

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

Я придумал обходной путь. Вот как это работает:

  1. .placeholder height всегда должна соответствовать высоте нижнего колонтитула. Инициализируется при загрузке, обновляется при изменении размера.
  2. Когда пользователь переходит к нижнему колонтитулу, тогда нижний колонтитул top устанавливается в соответствие .parallax-placeholder y / верхнее положение по отношению к области просмотра. Затем нижний колонтитул будет прокручиваться вместе со страницей.

Событие прокрутки следует добавлять только тогда, когда высота нижнего колонтитула больше высоты окна. Это проверяется при загрузке и добавляется при изменении размера. Если он короче, чем высота окна, примените обычную логику параллакса ol ’(см. Пункты 1 и 2 выше).

Ресурсы:

Https://www.html5rocks.com/en/tutorials/speed/animations/