Эффект параллакса показывает участки, как если бы они просматривались с разных позиций. В этой статье я сосредоточусь на эффекте параллакса для разных экземпляров нижних колонтитулов:
- Нижние колонтитулы с фиксированной высотой
- Колонтитулы, высота которых меняется в зависимости от содержания
- Нижние колонтитулы выше самого устройства на определенных точках останова
Вы можете проверить это демо здесь и репозиторий Github здесь.
1. Высота нижнего колонтитула фиксирована на всех устройствах.
Если у вас есть нижний колонтитул, высота которого остается одинаковой на всех устройствах, довольно просто реализовать эффект параллаксной прокрутки, чтобы раскрыть нижний колонтитул. Смотрите этот пример.
position: relative
для всех разделов, кроме нижнего колонтитула. Это очень важно, потому чтоz-index
не будет применяться без указанной позиции.z-index
иерархия основного содержания ›нижнего колонтитула› заполнителя.- Раздел-заполнитель , соответствующий высоте нижнего колонтитула. Этот раздел будет прокручиваться в обычном режиме страницы. Когда пользователь переходит к нижнему колонтитулу, содержимое отображается под ним, потому что невидимый раздел действует как заполнитель для нижнего колонтитула.
position: fixed
&bottom: 0
для нижнего колонтитула. При этом нижний колонтитул удаляется из потока документа и располагается в самом низу (по отношению к документу). Это раскрывается, когда пользователь прокручивает до раздела заполнителя.
2. В нижнем колонтитуле есть контент, высота которого меняется.
Если в нижнем колонтитуле есть какой-то контент - скажем, заголовок, несколько абзацев, может быть, пара ссылок - он изменится по высоте, когда текст будет принудительно обтекать и переходить к следующей строке. Есть простое исправление, чтобы сделать эффект параллакса отзывчивым. Смотрите этот пример.
Исправление: измените высоту с помощью Javascript. CSS останется таким же, как указано выше.
3. На некоторых устройствах ваш нижний колонтитул выше, чем высота устройства? 😳
Проблема с этой текущей реализацией заключается в том, что если нижний колонтитул выше, чем высота устройства, верхняя часть нижнего колонтитула будет обрезана. Смотрите этот пример.
Я придумал обходной путь. Вот как это работает:
.placeholder
height всегда должна соответствовать высоте нижнего колонтитула. Инициализируется при загрузке, обновляется при изменении размера.- Когда пользователь переходит к нижнему колонтитулу, тогда нижний колонтитул
top
устанавливается в соответствие.parallax-placeholder
y / верхнее положение по отношению к области просмотра. Затем нижний колонтитул будет прокручиваться вместе со страницей.
Событие прокрутки следует добавлять только тогда, когда высота нижнего колонтитула больше высоты окна. Это проверяется при загрузке и добавляется при изменении размера. Если он короче, чем высота окна, примените обычную логику параллакса ol ’(см. Пункты 1 и 2 выше).