Web анимация, canvas анимация
Доброго дня.
1. Механика.
Весь блок будет содержать в себе следующую информацию.
Большой куб находится по центру, переливается золотистым цветом.
Вокруг этого куба находится 8 маленьких кубов. У каждого маленького куба будет свой цвет, свой заголовок и свое краткое описание.
Концепция будет примерно следующей: 
При наведении на малый куб, он переливается золотистым цветом, нужно чтобы как-то большой куб анимированно повлиял на малый куб, нужно создать впечатление, что центральный большой куб влияет на малый куб (вспышка, золотистая пыль,...).
ИЛИ
При наведении на Малый Куб, он поглощается Большим Кубом (влетает в Большой Куб), Большой Куб перестраивает Малые Кубы внутри себя (из которых состоит) , при этом от Большого Куба могут расходиться вокруг золотистые волны из золотистой пыли (словно он влияет на всё вокруг) и из него вылетает Малый Куб на своё место, но уже с золотым цветом на место того куба, на который навели. (Показывает то, что Большой Куб повлиял на Малый Куб)
Примеры как выглядит Большой Куб:
2. Угол куба + должна быть прозрачность, чтобы видно было грани Малых Кубов внутри Большого Куба, такая:
3. Большой Куб, цвет: Солнечно-золотистый, переливается золотистым. (Как эффект волны)
-
Для вашего проекта есть 2 варианта реализации.
1) css/js анимации
2) WebGL + shaders
-
WebGL базируется на отживающем свой срок OpenGL, на смену им Vulkan пришел уже. Саму анимацию и в canvas 2D можно сделать, но вот с запуском функций напрямую проблема есть - кубы на плоскости будут форму шестиугольников иметь, а не прямоугольников и сами по себе не будут элементами DOM, на которые обработчики событий можно повесить. Задачу можно, конечно, решить, но тут не столько с кодом js, сколько с математикой повозиться придется...
-
Могу на чистых html/css/js сделать.
С анимацией, и интерактивностью (переливы, подсветка, мигания при наведеним, кликабельность).
Пример скину в личку (у вас закрыты прив. сообщ.) -
Актуальні фриланс-проєкти в категорії Веб-програмування
Розробка WebGL/Three.js сцени з генерацією та експортом 3D (снапшот) з анімованого шейдераОпис об'єкта:Проект являє собою дизайнерський стіл, виконаний у формі реалістичного, глибокого водовороту (центральна воронка, яка плавно переходить з широкої горизонтальної стільниці в тонку витончену ніжку). Суть задачі:Потрібен WebGL / Creative Coding розробник для створення… Javascript та Typescript, Веб-програмування ∙ 13 годин 10 хвилин тому ∙ 18 ставок |
Зробити сайт на WP , без конструктора
16 000 UAH
Треба зробити каталог ( скоріше за все без корзини ) тільки форма заявки на товару без використання елементора та інших має бути головна сторінка , сторінка товару , каталог , каталого постачальників , та можливо ще декілька інші дизайн і стилістика типу такого… Веб-програмування ∙ 13 годин 17 хвилин тому ∙ 76 ставок |
Shopify-розробник для сайту доставки суші (Польща)Шукаємо досвідченого Shopify-розробника для реалізації сайту доставки їжі (суші) для клієнта з м. Катовіце, Польща. Що потрібно зробити: Налаштувати сайт на готовому шаблоні Shopify (шаблон узгоджується) Меню з фотографіями страв і описами Онлайн-оформлення замовлень Підключення… Веб-програмування ∙ 14 годин 41 хвилина тому ∙ 34 ставки |
Webflow розробник для заповнення сторінок портфоліо на сайтіЄ сайт розроблений кастомно на вебфлоу для будівельної компанії, потрібно швидко заповнити сторінки проектів за одним шаблоном (замінити картинки і тексти) Для 2 мов Кількість - 6 штук Готові починати asap, дякую! HTML та CSS верстання, Веб-програмування ∙ 1 день 6 годин тому ∙ 38 ставок |
Адміністратор-налаштувальник LearnWorldsЗадача Настроїти готову платформу LearnWorlds під елітний онлайн-курс. Не розробляти архітектуру — реалізувати вже готову структуру руками в адмін-панелі. ———————— Що потрібно зробити: Брендинг ⦁ Підключити свій домен ⦁ Завантажити логотип, налаштувати фірмові кольори ⦁… CMS, Веб-програмування ∙ 1 день 9 годин тому ∙ 10 ставок |
Київ