Анимация на HTML5 Canvas
300 UAHВсем привет!
Для этой страницы: http://h63350sp.beget.tech/4am нужно сделать анимацию на Canvas или svg (но я думаю больше подойдет Canvas для этой задачи).
Описание анимации:
Фон страницы черный (#111). И на всю высоту HTML страницы будет Canvas с нарисованной сеткой, но которая будет прозрачной. Когда пользователь нажимает на любую свободную черную область на сайте, то есть на этот черный фон, то часть этой сетки должна очень плавно появиться и как бы закруглиться в белом цвете и размере гдето 300х300 пикселей. Дизайн куска сетки прикладываю: http://prntscr.com/lbyd8v это картинка с шириной ячейки 40х40 пикселей цветом линий #4D4C4A и сверху наложен background: radial-gradient(176.50px at 50%50%, rgba(17, 17, 17, 0) 0%, #111111 100%).
Так же нашел некоторые примеры, но они не совсем подходят к этой задаче, но может что-то получиться подсмотреть:
https://codepen.io/UXauthority/pen/KzoBGZ
https://codepen.io/Sahil89/pen/LQaQPa (https://www.youtube.com/watch?v=aQKzcjiA21Q)
https://forum.jscourse.com/t/canvas/1705 (https://jsfiddle.net/yyjoazuy)
Я нарисовал сетку из линий в файле canvas-2.js (архив прикладываю).
Кидайте заявки только те кто реально может сделать эту анимацию!!! С нетерпением жду ваших предложений!
Додатки 1
-
1 день500 UAH
697 21 2 1 1 день500 UAH
Здравствуйте, есть опыт таких вот интерактивных штук, вот например, тут мышкой или пальцем "стирается" снег и когда почти весь сотрётся, запускается анимация: http://trushka.000webhostapp.com/tsud
Или вот ещё, правда, на webGL? в использованием библиотеки three.js: http://trushka.000webhostapp.com/earth_malibu/ - тут вот можно шарег ещё и крутить и при этом сетка деформируется и деформация распространяется волной.. Тоже думал для вашего проекта webgl применить, но это, наверное лишнее.. С другой стороны, на шейдерах всё это дело считается куда быстрее. Но правда, я умею только с помощью three.js, а сама библиотека довольно тяжёлая и может нецелесообразно только ради этого её грузить.. Но обращайтесь, в люблм случае могу сделать. Хотя можно для начала и на three.js сделать, а потом, если что, уже на чистый webGL перевести, тут всё равно собираюсь только прямоугольник на весь холст рисовать, а считать уже в вершинном шейдере..
Актуальні фриланс-проєкти в категорії Javascript та Typescript
Розробка інтерактивної карти Palworld для сайтуПотрібно розробити інтерактивну карту Palworld за прикладом: https://palworld.gg/map Нам потрібна не просто статична картинка, а повноцінна інтерактивна карта, де користувач може дивитися локації, вмикати / вимикати категорії об’єктів, шукати потрібні точки та взаємодіяти з… HTML та CSS верстання, Javascript та Typescript ∙ 2 години 52 хвилини тому ∙ 12 ставок |
Розробка платформи AM Mobility (автосервіс, парковка, страхування, оренда автомобілів)
259 176 UAH
Шукаємо команду або досвідченого Full Stack розробника для створення MVP платформи AM Mobility. AM Mobility — це єдина цифрова екосистема для автомобілістів, що об'єднує в одному додатку та веб-платформі: парковку; автосервіс; шиномонтаж; автомийку; оренду автомобілів;… Javascript та Typescript, Веб-програмування ∙ 5 днів 9 годин тому ∙ 114 ставок |
Gsap анімації
1000 UAH
Доброго дня. Треба внести правки в поточному проєкті. Потрібен фахівець, який добре працює на gsap/lenis Треба зробити анімацію карточок. Детально ТЗ тут: https://www.figma.com/design/5bLEJudN5LPpB9ZSoJa2Eb/Untitled?m=auto&t=qwyluUctL1lrMNvh-6 Треба проявити креатив та… Javascript та Typescript, Веб-програмування ∙ 5 днів 15 годин тому ∙ 21 ставка |
Шукаю наставника з Claude Code для запуску веб-проєкту з нуля**Коротко про завдання:** Я новачок без досвіду в програмуванні. Є готове ТЗ на розробку сайту (42 сторінки, Next.js, PostgreSQL). Хочу реалізувати його самостійно за допомогою Claude Code - потрібен спеціаліст, який налаштує середовище і навчить мене працювати з інструментом.… Javascript та Typescript, Навчання ∙ 7 днів 14 годин тому ∙ 20 ставок |
Оновлення дизайну на сайтіПотрібно оновити дизайн існуючого сайту, використовуючи HTML, CSS, JS: освіжити зовнішній вигляд, зробити його сучасним і адаптивним під мобільні пристрої. Потрібно додати плавні анімації та інтерактивні елементи. HTML та CSS верстання, Javascript та Typescript ∙ 8 днів 7 годин тому ∙ 97 ставок |
Ладижин