Как правильно реализовать баннер, сворачивающийся по клику в маленькое окно?

Question

[Иван Доброславин]

Задача сделать большой (~400х200px) баннер с НГ акцией в центре экрана, при закрытии которого он уменьшался до размеров 100х100px, аккуратно сворачивается в правый нижний угол "превращаясь" в картинку-уведомление (см.ниже).


Вопросы:
1) как реализовать запуск анимации html после клика на кнопке закрытия большого баннера?
2) как реализовать, чтобы сайт "запомнил" клик пользователя и при переходе на другие страницы сайта снова не всплывало большое окно баннера, а оставалось только уведомление-картинка в правом-нижнем углу?

Comments

[Ankhena]

1. При клике на кнопку добавляете класс баннеру.
2. Записать в localStorage и проверять. https://learn.javascript.ru/localstorage

Answer 1

[Иван Ерохин]

1. При клике нужно добавить класс. В этом классе прописать параметры маленького баннера.
Для плавности добавить transition на все меняющиеся параметры.
Пример: https://codepen.io/dtkweb/pen/bGwVGZd

2. Запомнить и проверить можно с помощью cookie: https://learn.javascript.ru/cookie

Comments

[Иван Доброславин]

Вместо coocies я использовал localStorage