Как реализовать плавное изменение цвета фона от точки клика?

Question

[Mark321]

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

Comments

[Alexandroppolus]

При клике от этой точки бади начинает менять цвет на черный, заливка бади начинается от точки куда кликнули

Как это выглядит? Расширяющийся из точки круг?

Answer 1

[iBird Rose]

1) при клике создаешь под курсором div. он должен быть круглым и нужного тебе цвета.
2) после этого запускаешь анимацию transform scale для этого дива.
3) выбираешь время анимации и анализируешь когда этот круг займет все пространство.
4) и с таймаутом этого выбранного времени закрашиваешь body в нужный цвет у удаляешь круг

Comments

[Mark321]

Спасибо

[Сергей delphinpro]

анализируешь когда этот круг займет все пространство.

Cделать анимацию до 100vmax и слушать событие animationend/transitionend

[iBird Rose]

Сергей delphinpro, из за того что это круг, то 100vmax может оставить пробелы в углах. тем более если клик будет произведен где нить в углу экрана, то там 100vmax займет только половину

[Сергей delphinpro]

iBird Rose, ну не половину, а всего лишь sqrt(vmax**2 + vmin**2) - vmax

[Сергей delphinpro]

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