Анимация на 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
-
993 20 2 1 Здравствуйте, есть опыт таких вот интерактивных штук, вот например, тут мышкой или пальцем "стирается" снег и когда почти весь сотрётся, запускается анимация: http://trushka.000webhostapp.com/tsud
Или вот ещё, правда, на webGL? в использованием библиотеки three.js: http://trushka.000webhostapp.com/earth_malibu/ - тут вот можно шарег ещё и крутить и при этом сетка деформируется и деформация распространяется волной.. Тоже думал для вашего проекта webgl применить, но это, наверное лишнее.. С другой стороны, на шейдерах всё это дело считается куда быстрее. Но правда, я умею только с помощью three.js, а сама библиотека довольно тяжёлая и может нецелесообразно только ради этого её грузить.. Но обращайтесь, в люблм случае могу сделать. Хотя можно для начала и на three.js сделать, а потом, если что, уже на чистый webGL перевести, тут всё равно собираюсь только прямоугольник на весь холст рисовать, а считать уже в вершинном шейдере..
Актуальные фриланс-проекты в категории Javascript
Верстка сайта по макету
20 000 UAH
Добрый день. Есть макет в фигме: https://www.figma.com/file/RGVIymprYc4QaiJ5qp3iwL/LayerGame?type=design&node-id=0-1&mode=design Есть ui kit и готовая верстка страницы Main, выполненная на React, анимации реализованы с помощью GSAP. Необходимо сверстать на этом стеке еще 2… HTML и CSS верстка, Javascript ∙ 23 ставки |
ПараллаксНужно сделать такой параллакс как здесь https://www.bangbangforever.com/#artists, то есть видео блок видео( уже все сверстано есть) и также уже часть параллакса готова, стек Next.js Javascript ∙ 1 ставка |
Настроить на сайте события Facebook Pixel и Google AnalyticsНастроить на сайте события Facebook Pixel и Google Analytics Сделать это через админку сайта, там просто добавить скрипты или через GTM Javascript, Веб-программирование ∙ 5 ставок |
Калькулятор расчета стоимости за м2 для сайта жалюзиПривет всем, мне нужно создать калькулятор расчета стоимости товара по ширине и высоте Пример расчета: Горизонтальные жалюзи 0.75 м2Тканевые ролеты 0.60 м2Москитные сетки 0.75 м2Римские шторы 1 м2Японские шторы 0.60 м2Защитные ролеты 1.3 м2Вертикальные жалюзиЦена от 1.6 м после… Javascript, PHP ∙ 11 ставок |
Стилизовать Select option WordpressЗадача стилизовать стандартный Select option в соответствующие стили. Проблема: при использовании замены дропдауна на list через jquery: не работают фильтры сортировки товаров. Javascript, PHP ∙ 9 ставок |