Как часто случалось, что Вы забывали пароль на сайте? думаю с каждым случалась такая ситуация, но менее того, Вас перебрасывает на следующую страницу для восстановления, а затем на следующую, и так множество раз, меня это раздражает, ведь почему недьзя все сделать быстро, не переходя на лишние страницы, в данном уроке мы рассмотрим как создать замечательную, при этом достаточно простую форму "забыли пароль" для сайта с анимацией переключении, а самое главное остаться на одной станицы, выполнив действия максимально быстро.
Идея состоит в том, что у нас есть форма, а форма "забыли пароль" будет слайдом, которая накладывается на основную форму при ее активации. Выглядит все достаточно просто, но для таких форм излишняя элегантность и не требуется.
Шаг 1. HTMLУ нас будет достаточно сложная иерархическая разметка, ведь нам необходимо учесть все нюансы, и по умолчанию скрыть один из контейнеров до момента его активации
У нас будет один основной контейнер с общими правилами form_container, в него будут входить дочерние элементы такие как login и forgot, кроме этого мы добавляем ссылки управления.
Шаг 2. CSSНам необходимо стилизовать сам контейнер, установить для него заливку, кроме этого мы устанавливаем анимацию, со скоростью и плоскостью трансформации
Но все стили не обеспечат нам цикличного выполнения поставленной задачи, нам необходимо добавить небольшой код скрипта.
Шаг 3. JSНам необходимо выполнение задачи при нажатии на кнопку, кроме этого нам необходимо цикличное выполнение задачи не перебрасывая на другую страницу
В результате данных манипуляций мы получаем замечательную форму,которая станет отличным дополнением для Вашего ресурса.
Вот и все. Готово!
Комментарии