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

 

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

Открытие формы входа при прокрутке страницы

Шаг 1. HTML

Для начала начнем с разметки, после того как вы подключили все скрипты к странице, далее перейдем к разметке, у нас будет общий контейнер с неупорядоченным списком, в котором будет содержаться следующая разметка:

Также у нас будет панель, на которой будет размещаться кнопка с классом modal-button, для открытия и закрытия модального окна вне зависимости от прокрутки.

Открытие формы входа при прокрутке страницы

Шаг 2. CSS

Теперь нам необходимо добавить стили для отображения формы, и ее элементов, начнем мы с общего параметра для контейнера и положения элементов на странице:

Затем добавляем стили для модального окна и его отображения:

Для содержимого контейнера у нас будут следующие правила:

Затем добавим немного стилей для полей ввода:

Это основные стили, которые нам необходимы для отображения формы такой как она задумана, идем дальше.

Шаг 3. JS

Нам необходимо, чтобы форма выскальзывала при прокрутке, а также функции при нажатии на кнопку вызова модального окна с формой:

В итоге получилась достаточно привлекательная с плавной анимацией форма. Спасибо  Mert Nerukuc за реализацию данного модального окна. А как вам данный урок?

Вот и все. Готово!