PROJECT: Painting

Папка scr версия dev

Папка dist версия prod(Все файлы минимизированны)

Сборка проекта gulp + webpack;

Реализация модальных окон, с возможностью зыкрытия:

- на крестик;
- на подложку;
- показ модального окна через 60 сек;
- показ модального окна в формате подарка, когда пользователь пролистал страницу до конца и не вызывал модальное окно, после чего иконка удаляется;
- анимация подарка(иконки) + анимация подарка в модальном окне, использовалась библиотека animation.css.

Реализация слайдеров:

- анимация слайдера;
- в начале страницы показ вертикального слайдера с автоматическим таймаутом;
- в конце страницы показ горизонтального слайдера по аналогии с предыдущим;
- при наведений курсора на родительский элемент слайдера, таймаут отключается, при отводе включается.

Реализация формы:

- отправка формы посредством AJAX;
- оповещение пользователя о состояний отправки(идет отправка, отправлено, ошибка) с помощью gif и img;
- плавное появление и отправки формы при помощи анимации;
- очищение формы инпутов и textarea, после отправки;
- возможность загрузки файлов, с показом загруженного имени и расширения типа файла;
- после отправки формы с файлом, очищение значения имени файла на "файл не указан".

Фильтрация элементов на странице в блоке 'для кого делаем портрет':

- при клике на элемент происходит анимированный показ тех изображений, которые соответствуют описанному элементу.

Замена изображений при наведений в блоке 'можем изготовить картину любого размера':

- при наведений на каждый блок, анимированно появляется изображение с постфиксом -1, используя обработчик события mouseover;
- при отведений курсора мышки, изображение скрывается с блока, используя событие mouseout.

Создание аккордеона в блоке 'часто задаваемые вопросы':

- при клике на интересующий вопрос, реализовано анимированное(плавное) повление блока описывающего суть вопроса;
- при клике на другой вопрос, анимация появления блока на предыдущем вопросе закрывается и открывается на новом.

Реализация бургера для планшетной версии:

- при клике на гамбургер происходит показ подменю (если ширина <= 992px);
- если пользователь разворачивает планшет и ширина экрана становится больше, подменю скрывается(не активно).

Реализация плавного скролла на сайте:

- при скроллинге сайта на 1665px используя scrollTop плавно появляется .svg изображение со стрелкой вверх;
- если scrollTop < 1665px .svg плавно исчезает;
- использование метода requestAnimationFrame с регулированием скорости scroll(a).

Реализация Drag & Drop загрузки изображения.