Как реализовать такой эффект?

Question

[Yunique]

Подскажите как можно реализовать эффект анимации движения звезд, как на рисунке(именно по кругу)?

Answer 1

[Сергей Соколов]

Накидать случайных точек и поворачивать их относительно некого центра, оставляя след.

Но в картинке присутствует ещё передний план, который закрывает собой смазанные звёзды. Понадобится маска, отделяющая передний план от заднего.

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

Уточните, какую именно задачу вы хотите решить, что на входе, что на выходе. Анимированы ли звёзды, в каком виде исходное изображение?

Comments

[Yunique]

Задача вот в чем, я хочу сделать эффект движения звезд при скролле страницы в виде параллакса. Важен сам эффект, фоновое изображение взято для примера, потому что оно наиболее четко иллюстрирует эффект который я хочу научиться реализовывать. По факту эффект будет поверх изображения, и отделять задний план от переднего нет необходимости. Примерно накидал как будет выглядеть страница, для наглядности моей идеи https://yunique.github.io/parallax/

[Сергей Соколов]

Юнус Ганиев, можно наложить поверх картинки SVG с окружностями разной прозрачности и менять им stroke-dashoffset, чтобы прорисовывалась лишь небольшая часть. Но без JS не обойтись, наверное.

[Yunique]

Сергей Соколов, цель не стоит сделать все на чистом css, просто изначально реализовывал только параллакс, и там хотел на чистом css, а потом возникла идея с этими звездами, и тут очевидно что на чистом CSS задача сводится к чему-то нереальному.