Анимация на HTML5 Canvas
25 PLNВсем привет!
Для этой страницы: 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 (архив прикладываю).
Кидайте заявки только те кто реально может сделать эту анимацию!!! С нетерпением жду ваших предложений!
Załączniki 1
-
1 dzień41 PLN
697 21 2 1 1 dzień41 PLN
Здравствуйте, есть опыт таких вот интерактивных штук, вот например, тут мышкой или пальцем "стирается" снег и когда почти весь сотрётся, запускается анимация: http://trushka.000webhostapp.com/tsud
Или вот ещё, правда, на webGL? в использованием библиотеки three.js: http://trushka.000webhostapp.com/earth_malibu/ - тут вот можно шарег ещё и крутить и при этом сетка деформируется и деформация распространяется волной.. Тоже думал для вашего проекта webgl применить, но это, наверное лишнее.. С другой стороны, на шейдерах всё это дело считается куда быстрее. Но правда, я умею только с помощью three.js, а сама библиотека довольно тяжёлая и может нецелесообразно только ради этого её грузить.. Но обращайтесь, в люблм случае могу сделать. Хотя можно для начала и на three.js сделать, а потом, если что, уже на чистый webGL перевести, тут всё равно собираюсь только прямоугольник на весь холст рисовать, а считать уже в вершинном шейдере..
Aktualne zlecenia dla freelancerów w kategorii Javascript & Typescript
Rozwój platformy AM Mobility (serwis samochodowy, parking, ubezpieczenie, wynajem samochodów)
21 265 PLN
Szukamy zespołu lub doświadczonego programisty Full Stack do stworzenia MVP platformy AM Mobility. AM Mobility to jednolita cyfrowa ekosystem dla kierowców, łącząca w jednej aplikacji i platformie internetowej: parking; serwis samochodowy; wulkanizację; myjnię samochodową;… Javascript & Typescript, Programowanie stron internetowych ∙ 4 dni 20 godzin temu ∙ 113 ofert |
Animacje Gsap
82 PLN
Dzień dobry. Trzeba wprowadzić poprawki w bieżącym projekcie. Potrzebny specjalista, który dobrze pracuje na gsap/lenis Trzeba zrobić animację kart. Szczegółowe wymagania tutaj:… Javascript & Typescript, Programowanie stron internetowych ∙ 5 dni 2 godziny temu ∙ 21 ofert |
Szukam mentora z Claude Code do uruchomienia projektu internetowego od zera**Krótko o zadaniu:** Jestem nowicjuszem bez doświadczenia w programowaniu. Mam gotowe TŻ na rozwój strony (42 strony, Next.js, PostgreSQL). Chcę zrealizować to samodzielnie za pomocą Claude Code - potrzebuję specjalisty, który skonfiguruje środowisko i nauczy mnie pracy z… Javascript & Typescript, Edukacja ∙ 7 dni 1 godzina temu ∙ 19 ofert |
Aktualizacja projektu na stronieTrzeba zaktualizować design istniejącej strony internetowej używając HTML, CSS, JS: odświeżyć wygląd, uczynić go nowoczesnym i responsywnym na urządzenia mobilne. Wymagana jest dodanie płynnych animacji i interaktywnych elementów. Układ HTML i CSS, Javascript & Typescript ∙ 7 dni 18 godzin temu ∙ 96 ofert |
Konsultacja i audyt bieżącego projektu na Odoo 19 Community Edition
Szukamy programisty Odoo — samodzielnego dewelopera z doświadczeniem w pracy z Odoo 19 Community Edition, w tym z wykorzystaniem Claude Code. Potrzebujemy specjalisty, który ma zrealizowane projekty w Odoo oraz praktyczne doświadczenie w programowaniu z użyciem Claude Code.… C i C++, Javascript & Typescript ∙ 8 dni temu ∙ 8 ofert |
Ladyżyń