Web анимация, canvas анимация
Доброго дня.
1. Механика.
Весь блок будет содержать в себе следующую информацию.
Большой куб находится по центру, переливается золотистым цветом.
Вокруг этого куба находится 8 маленьких кубов. У каждого маленького куба будет свой цвет, свой заголовок и свое краткое описание.
Концепция будет примерно следующей:
При наведении на малый куб, он переливается золотистым цветом, нужно чтобы как-то большой куб анимированно повлиял на малый куб, нужно создать впечатление, что центральный большой куб влияет на малый куб (вспышка, золотистая пыль,...).
ИЛИ
При наведении на Малый Куб, он поглощается Большим Кубом (влетает в Большой Куб), Большой Куб перестраивает Малые Кубы внутри себя (из которых состоит) , при этом от Большого Куба могут расходиться вокруг золотистые волны из золотистой пыли (словно он влияет на всё вокруг) и из него вылетает Малый Куб на своё место, но уже с золотым цветом на место того куба, на который навели. (Показывает то, что Большой Куб повлиял на Малый Куб)
Примеры как выглядит Большой Куб:
2. Угол куба + должна быть прозрачность, чтобы видно было грани Малых Кубов внутри Большого Куба, такая:
3. Большой Куб, цвет: Солнечно-золотистый, переливается золотистым. (Как эффект волны)
-
фрилансер больше не работает на сервисе
-
ставка скрыта фрилансером
-
Для вашего проекта есть 2 варианта реализации.
1) css/js анимации
2) WebGL + shaders
-
WebGL базируется на отживающем свой срок OpenGL, на смену им Vulkan пришел уже. Саму анимацию и в canvas 2D можно сделать, но вот с запуском функций напрямую проблема есть - кубы на плоскости будут форму шестиугольников иметь, а не прямоугольников и сами по себе не будут элементами DOM, на которые обработчики событий можно повесить. Задачу можно, конечно, решить, но тут не столько с кодом js, сколько с математикой повозиться придется...
-
Могу на чистых html/css/js сделать.
С анимацией, и интерактивностью (переливы, подсветка, мигания при наведеним, кликабельность).
Пример скину в личку (у вас закрыты прив. сообщ.)