Web анимация, canvas анимация
Доброго дня.
1. Механика.
Весь блок будет содержать в себе следующую информацию.
Большой куб находится по центру, переливается золотистым цветом.
Вокруг этого куба находится 8 маленьких кубов. У каждого маленького куба будет свой цвет, свой заголовок и свое краткое описание.
Концепция будет примерно следующей: 
При наведении на малый куб, он переливается золотистым цветом, нужно чтобы как-то большой куб анимированно повлиял на малый куб, нужно создать впечатление, что центральный большой куб влияет на малый куб (вспышка, золотистая пыль,...).
ИЛИ
При наведении на Малый Куб, он поглощается Большим Кубом (влетает в Большой Куб), Большой Куб перестраивает Малые Кубы внутри себя (из которых состоит) , при этом от Большого Куба могут расходиться вокруг золотистые волны из золотистой пыли (словно он влияет на всё вокруг) и из него вылетает Малый Куб на своё место, но уже с золотым цветом на место того куба, на который навели. (Показывает то, что Большой Куб повлиял на Малый Куб)
Примеры как выглядит Большой Куб:
2. Угол куба + должна быть прозрачность, чтобы видно было грани Малых Кубов внутри Большого Куба, такая:
3. Большой Куб, цвет: Солнечно-золотистый, переливается золотистым. (Как эффект волны)
-
Для вашего проекта есть 2 варианта реализации.
1) css/js анимации
2) WebGL + shaders
-
WebGL базируется на отживающем свой срок OpenGL, на смену им Vulkan пришел уже. Саму анимацию и в canvas 2D можно сделать, но вот с запуском функций напрямую проблема есть - кубы на плоскости будут форму шестиугольников иметь, а не прямоугольников и сами по себе не будут элементами DOM, на которые обработчики событий можно повесить. Задачу можно, конечно, решить, но тут не столько с кодом js, сколько с математикой повозиться придется...
-
Могу на чистых html/css/js сделать.
С анимацией, и интерактивностью (переливы, подсветка, мигания при наведеним, кликабельность).
Пример скину в личку (у вас закрыты прив. сообщ.) -
Current freelance projects in the category Web Programming
Development of a WebGL/Three.js scene with generation and export of 3D (snapshot) from an animated shaderObject Description:The project is a designer table shaped like a realistic, deep whirlpool (a central vortex that smoothly transitions from a wide horizontal tabletop to a thin elegant leg). Task Essence:A WebGL / Creative Coding developer is required to create an interactive 3D… Javascript and Typescript, Web Programming ∙ 4 hours 58 minutes back ∙ 15 proposals |
Create a website on WP, without a builder.
357 USD
Need to create a catalog (most likely without a cart) just a product request form without using Elementor and others there should be a main page, product page, catalog, supplier catalog, and possibly a few others design and style like this… Web Programming ∙ 5 hours 5 minutes back ∙ 64 proposals |
Shopify developer for sushi delivery website (Poland)We are looking for an experienced Shopify developer to implement a food delivery website (sushi) for a client from Katowice, Poland. What needs to be done: Set up the site on a ready-made Shopify template (template to be agreed upon) Menu with photos of dishes and descriptions… Web Programming ∙ 6 hours 30 minutes back ∙ 31 proposals |
Webflow developer for filling portfolio pages on the websiteA website custom-built on Webflow for a construction company needs to quickly fill project pages using one template (replace images and texts) For 2 languages Quantity - 6 pieces Ready to start asap, thank you! HTML & CSS, Web Programming ∙ 22 hours 25 minutes back ∙ 36 proposals |
LearnWorlds Administrator-ConfiguratorTask Set up the ready-made LearnWorlds platform for an elite online course. Do not develop the architecture — implement the already prepared structure manually in the admin panel. ———————— What needs to be done: Branding ⦁ Connect your domain ⦁ Upload the logo, set up… Content Management Systems, Web Programming ∙ 1 day 1 hour back ∙ 9 proposals |
Kyiv