Как задать маску при переходе между страницами?

Question

[Odinokun]

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

UPD - в этом стриме Юрий делает эффект в основе которого лежит нужный мне принцип.

Answer 1

[Шохрух Шаймардонов]

Отловите событие onclose и запустите нужную анимацию, и собственно после этого переходите на другую страницу

Comments

[Odinokun]

В анимации и есть вся загвоздка.
Я не понимаю, как запилить сам эффект "стирания" страницы.

[Шохрух Шаймардонов]

Дмитрий, ну анимируйте дворники и делайте ту часть экрана белой, которую уже дворники прошли. Т. Е. Вам просто нужно svg на весь экран сделать. Изначально он прозрачный и по мере движения дворников собственной прозрачность заменится на белый

[Odinokun]

Шохрух Шаймардонов, в том то и все дело, что клиент хочет, что бы за дворниками сразу проявлялась новая страница.
Было бы наверное логично, что бы при переходе на новую страницу делался скрин текущей страницы и именно он "стирался" бы дворниками.
Но писать подобный функционал с нуля не вариант, поэтому я и ищу готовые решения.

[Шохрух Шаймардонов]

Дмитрий, понятно. к сожалению с этим не подскажу

[Шохрух Шаймардонов]

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

[Алексей Ярков]

Дмитрий, ну и если решите, то поделитесь с общественностью ))

[Шохрух Шаймардонов]

Алексей Ярков, что скажете насчет этого варианта?

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

[Алексей Ярков]

Шохрух Шаймардонов, на мой взгляд это правильный путь. Скринить можно используя html2canvas.

[Odinokun]

Шохрух Шаймардонов, так я про него и писал

Было бы наверное логично, что бы при переходе на новую страницу делался скрин текущей страницы и именно он "стирался" бы дворниками.

Нет идей как реализовать функционал "сринования" страницы при клике на ссылку

[Шохрух Шаймардонов]

Дмитрий, выше Алексей Ярков кинул ссылку.

Было бы наверное логично, что бы при переходе на новую страницу делался скрин текущей страницы и именно он "стирался" бы дворниками.

Видимо не заметил))