Анимация на HTML5 Canvas
7 USDВсем привет!
Для этой страницы: 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 (архив прикладываю).
Кидайте заявки только те кто реально может сделать эту анимацию!!! С нетерпением жду ваших предложений!
Applications 1
-
1 day11 USD
697 21 2 1 1 day11 USD
Здравствуйте, есть опыт таких вот интерактивных штук, вот например, тут мышкой или пальцем "стирается" снег и когда почти весь сотрётся, запускается анимация: http://trushka.000webhostapp.com/tsud
Или вот ещё, правда, на webGL? в использованием библиотеки three.js: http://trushka.000webhostapp.com/earth_malibu/ - тут вот можно шарег ещё и крутить и при этом сетка деформируется и деформация распространяется волной.. Тоже думал для вашего проекта webgl применить, но это, наверное лишнее.. С другой стороны, на шейдерах всё это дело считается куда быстрее. Но правда, я умею только с помощью three.js, а сама библиотека довольно тяжёлая и может нецелесообразно только ради этого её грузить.. Но обращайтесь, в люблм случае могу сделать. Хотя можно для начала и на three.js сделать, а потом, если что, уже на чистый webGL перевести, тут всё равно собираюсь только прямоугольник на весь холст рисовать, а считать уже в вершинном шейдере..
Current freelance projects in the category Javascript and Typescript
Development of the AM Mobility platform (car service, parking, insurance, car rental)
5770 USD
We are looking for a team or an experienced Full Stack developer to create the MVP of the AM Mobility platform. AM Mobility is a unified digital ecosystem for motorists, combining in one application and web platform: parking; car service; tire fitting; car wash; car rental;… Javascript and Typescript, Web Programming ∙ 5 days 5 hours back ∙ 113 proposals |
Gsap animations
22 USD
Good day. Corrections need to be made in the current project. A specialist is needed who works well with gsap/lenis. Animation of cards needs to be done. Detailed specifications here:… Javascript and Typescript, Web Programming ∙ 5 days 11 hours back ∙ 21 proposals |
I am looking for a mentor with Claude Code to launch a web project from scratch.Brief about the task: I am a beginner with no programming experience. I have a ready specification for website development (42 pages, Next.js, PostgreSQL). I want to implement it myself using Claude Code - I need a specialist who will set up the environment and teach me how to… Javascript and Typescript, Tuition ∙ 7 days 10 hours back ∙ 19 proposals |
Website design updateIt is necessary to update the design of the existing website using HTML, CSS, JS: refresh the appearance, make it modern and responsive for mobile devices. Smooth animations and interactive elements need to be added. HTML & CSS, Javascript and Typescript ∙ 8 days 3 hours back ∙ 97 proposals |
Consultation and audit of the current project on Odoo 19 Community Edition
We are looking for an Odoo Developer — a solo developer with experience in Odoo 19 Community Edition, including using Claude Code. We need a specialist who has successfully implemented projects in Odoo and practical experience in development using Claude Code. Important: we only… C & C++, Javascript and Typescript ∙ 8 days 9 hours back ∙ 8 proposals |
Ладыжин