https://github.com/itmtm/project_paintings

Project Painting
https://github.com/itmtm/project_paintings

accordion ajax animation-css async-await calculator drag-and-drop es6 es6-modules fetch-api forms gulp gulp-webpack javascript modal-dialog requestanimationframe sliders webpack

Last synced: 1 day ago
JSON representation

Project Painting

• Host: GitHub
• URL: https://github.com/itmtm/project_paintings
• Owner: ITmTm
• Created: 2023-09-21T07:28:31.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-10-05T06:58:33.000Z (about 1 year ago)
• Last Synced: 2023-10-05T12:57:19.507Z (about 1 year ago)
• Topics: accordion, ajax, animation-css, async-await, calculator, drag-and-drop, es6, es6-modules, fetch-api, forms, gulp, gulp-webpack, javascript, modal-dialog, requestanimationframe, sliders, webpack
• Language: Less
• Homepage: https://itmtm.github.io/Project_paintings/
• Size: 9.35 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
PROJECT: Painting


![Screenshot_2](https://github.com/ITmTm/Project_paintings/assets/98873757/8c42ba18-2b0c-483c-9042-f55644345897)

Папка 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 загрузки изображения.