Создание фиксированного меню в Зеро блоке
→
- Создайте блок высотой 100 px
→
2. Создайте белый шейп высотой 100 px и разместите его в Window container и выставите его ширину 100%
Обратите внимание на настройки базовой анимации
→
3. Создайте красный (#ce2539) шейп идентичный белому и расположите его под белым шейпом на расстоянии 3px от верхней границы окна
Настройки анимации те же, но вот этот параметр поменялся
Найдите как в настройках добавить тень для нижнего шейпа
→
4. Создайте элементы меню и настройте базовую анимацию
Параметр зафиксирует элемент, когда он дойдет до верха окна
Параметр изменит момент фиксации элемента: теперь он сработает за 10 px от верхней границы окна
Параметр определяет длину, на протяжении которой, элемент будет зафиксирован. Поскольку мы хотим зафксировать меню на всю высоту сайта, выставляем <очень много px>
Выберите элемент и нажмите Alt — вы увидите расстояние в px от границ элемента до границ блока. Эти параметры необходимо учитывать при настройке анимации
6. Создайте несколько Зеро блоков и проверьте корректно ли отображается меню.
Должно отображаться некорректно.
В этом месте полезно вспомнить про z-index в общих настройках Зеро блока меню (раздел POSITION AND OVERFLOW) и выкрутить этот параметр на 9999
В этом месте полезно вспомнить про z-index в общих настройках Зеро блока меню (раздел POSITION AND OVERFLOW) и выкрутить этот параметр на 9999
→
7. Настройте логотип для корректного отображения при скролле параметр trigger offset — 10px
→
8. На странице с меню не должно быть контентных экранов. Вернитесь к общим настройкам страницы и присвойте ей статус header'a сайта
8. Задание со звездочкой.
Если создание фиксированного меню с анимацией показалось вам слишком легкой задачей — обратите внимание на:
• появляющуюся кнопку «Наверх» внизу страницы.
• растущий красный столбик справа при скролле этой страницы. Это анимированный индикатор скролла.
Эти элементы также созданы при помощи триггерной анимации.
Попробуйте воспроизвести эти эффекты самостоятельно.
Если создание фиксированного меню с анимацией показалось вам слишком легкой задачей — обратите внимание на:
• появляющуюся кнопку «Наверх» внизу страницы.
• растущий красный столбик справа при скролле этой страницы. Это анимированный индикатор скролла.
Эти элементы также созданы при помощи триггерной анимации.
Попробуйте воспроизвести эти эффекты самостоятельно.
