Призыв к действию — один из самых важных элементов на странице. Это первое, что видит пользователь, и основное действие, которое вы хотели бы, чтобы он совершил на вашем сайте. Часто визуально перегруженный сайт может отвлекать пользователя от действий, которые вы на самом деле хотите от них совершить. Принятие мер по уменьшению этого отвлечения может помочь уменьшить путаницу пользователей и лучше помочь передать ваше основное сообщение.
Цель
Я хотел попробовать помочь моему личному фирменному веб-сайту и узнать что-то новое. Вся идея возникла, когда я изучал криптовалюту ради развлечения и наткнулся на этот сайт:
Мне понравилось то, что меню было таким ненавязчивым, а фон в заголовке был с нулевой непрозрачностью, поэтому он сливался прямо вверху. Мне пришло в голову, что этот шаг только увеличил эффективность кнопки призыва к действию прямо вверху. Изучив элементы на странице, я обнаружил, что на самом деле она была создана с помощью Bootstrap, и это было прекрасно, потому что я также создал свой сайт с помощью Bootstrap и был знаком с тем, как это работает.
План
То, что я хотел сделать, включало в себя многоэтапный план.
- Создать заголовок навигации по умолчанию
- Показать заголовок
- Определить, достаточно ли прокручена страница или нет
- Когда я прокручиваю страницу, фон заголовка исчезает.
- Когда вернетесь к началу, исчезните цвет обратно
- Всегда отображать меню на мобильном телефоне
Создание и отображение панели навигации
Панель навигации по умолчанию на самом деле поставляется с начальной загрузкой и очень красиво оформлена. Моя общая цветовая схема сайта включала белый и черный в качестве основных цветов с небольшим количеством серого в качестве затенения, поэтому на самом деле изменение цветов не требовалось. Однако при необходимости их легко изменить.
Отображение панели было несложным, поскольку она встроена в фреймворк. Но вопрос заключался в том, как на самом деле сделать постепенное появление при прокрутке и как я могу добавить цвет обратно на панель навигации, и именно здесь начали появляться проблемы.
Фреймворк внешнего интерфейса под названием Greensock Animation Platform или GSAP/GSOCK был еще одним фреймворком, с которым я был немного знаком. Я решил использовать его для анимации затухания, потому что они отлично поддерживаются во всех браузерах, а их код типа «подключи и работай» очень прост.
Определить, прокручивается страница или нет
Мой первый набросок JavaScript был тем, что вы видите ниже. Я хотел убедиться, что размер экрана достаточно велик, потому что я не хотел, чтобы это происходило на мобильных устройствах.
Я бы проверил, прокрутил ли пользователь более 50 пикселей, а затем код включился бы, чтобы проверить, какой класс был прикреплен к какому идентификатору, и нужно ли нам исчезать или нет. Проблема, с которой я столкнулся, заключалась в том, что код добавлял класс снова и снова каждый раз, когда я прокручивал хоть немного, поэтому эффект срабатывал только один раз, когда я прокручивал в первый раз.
Я добавил escape-символы ( .className.match(/(?:^|\s)navbar-default(?!\S)/))), который проверяет, находится ли это имя класса уже в этом документе с идентификатором и если это так, то имя класса больше не добавляется. Но если класса нет, то мы добавляем к нему класс. Проблема в том, что сразу же это изменит цвет, а затем мой эффект затухания будет иметь место только после этого, устанавливая непрозрачность обратно на ноль и снова затухая.
То, что пользователь увидит, будет хорошим меню вверху, он прокручивается, и цвет переходит к строке меню, исчезает через миллисекунду, а затем снова появляется через полсекунды. Это было невероятно отвлекающим и просто плохим дизайном.
Исчезновение в фоновом режиме
В этот момент у меня было исчезновение на самом деле вниз; проблема заключалась не в исчезновении, а в резком переходе добавления класса, который немедленно увеличивал непрозрачность до единицы, возвращал ее обратно к нулю, а затем снова превращал в единицу. В этот момент я решил, что хочу сделать меню другим прямым, вместо того, чтобы добавить цвет и сделать меню видимым сразу после загрузки страницы, я хотел скрыть все меню. Я объясняю это тем, что это всего лишь одностраничный макет, и я хотел, чтобы люди видели мой призыв к действию сразу после входа на сайт.
Я думал, что если изменить непрозрачность добавленного класса на ноль, а затем затухать, это будет хорошо работать, но это тоже не сработало. Вместо этого непрозрачность была установлена на ноль, и панель навигации вообще никогда не отображалась при прокрутке. Он показывался, когда вы были в верхней части страницы, но после того, как я отключил 50 пикселей в своем JavaScript, ничего не отображалось.
Исправляем затухание и JavaScript
В конце концов, я решил, что слишком усложняю это, как делаю это с большинством задач. Вместо того, чтобы по-прежнему работать над старым JavaScript и продолжать попытки итерации, я разобрал файл до его ядра. Я понял, что нужно всего три части, чтобы этот код действительно работал.
- Проверьте прокрутку за пределы 50px
- Если прокрутить больше 50 пикселей, увеличьте непрозрачность.
- Если прокрутка не превышает 50 пикселей, уменьшите непрозрачность.
Все, что выходило за рамки этих трех вещей, просто мешало. Самый простой способ сделать это — начать с того, как я хочу, чтобы страница выглядела. Я сохранил CSS, в котором моя панель навигации была изначально с нулевой непрозрачностью. Затем я просто использовал GSAP, чтобы изменить непрозрачность до единицы в течение полсекунды.
Последний штрих — добавить простой медиа-запрос, который обеспечит постоянное отображение панели на мобильных устройствах. Простое правило непрозрачности, равное 1, решает эту проблему.
Заключение
Чрезмерное обдумывание может быть большой проблемой при кодировании, особенно при попытке сделать что-то немного сложное. Несмотря на необходимость достижения цели, никогда не будет плохой идеей удалить или закомментировать старый код, чтобы начать заново и попробовать с другой точки зрения. Часто бывает почти невозможно вызвать какое-то откровение о том, как что-то делать в вашем коде; вместо этого время и свежий взгляд могут помочь вам больше, чем постоянное решение проблемы.
