Разместите свой проект бесплатно и начните получать предложения от фрилансеров-исполнителей уже спустя минуты после публикации!
300 ₴

Анимация на HTML5 Canvas

истекло время актуальности


Всем привет! 

Для этой страницы: 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. 1 день1 500 ₽
    Алексей Галышев
     105   1  1   1

    Доброй ночи, красивый сайт, могу завтра сесть и покалдовать над задачей, буду писать на jQ, чтобы задейстововать меньше ресурсов, пишите, хочу уточнить некоторые детали отображения фона.
    Мое портфолио: https://galyshev.com

    Россия Астрахань | 29 октября 2018 |
  2. ставка скрыта фрилансером
  3. 1 день500 ₴
    Андрій Трушевський
     583   5  0

    Здравствуйте, есть опыт таких вот интерактивных штук, вот например, тут мышкой или пальцем "стирается" снег и когда почти весь сотрётся, запускается анимация: http://trushka.000webhostapp.com/tsud
    Или вот ещё, правда, на webGL? в использованием библиотеки three.js: http://trushka.000webhostapp.com/earth_malibu/ - тут вот можно шарег ещё и крутить и при этом сетка деформируется и деформация распространяется волной.. Тоже думал для вашего проекта webgl применить, но это, наверное лишнее.. С другой стороны, на шейдерах всё это дело считается куда быстрее. Но правда, я умею только с помощью three.js, а сама библиотека довольно тяжёлая и может нецелесообразно только ради этого её грузить.. Но обращайтесь, в люблм случае могу сделать. Хотя можно для начала и на three.js сделать, а потом, если что, уже на чистый webGL перевести, тут всё равно собираюсь только прямоугольник на весь холст рисовать, а считать уже в вершинном шейдере..

    Украина Киев | 30 октября 2018 |
  4. 1 день500 ₴
    Vyacheslav Pivtorak
     901   29  1   1

    Добрый день. Могу выполнить даную задачу. Есть опыт работы с канвасом

    Украина Черкассы | 30 октября 2018 |
  5. 2 дня600 ₽
    Лиза Полтавина
     231 

    Здравствуйте, я уже работала с таким анимированным фоном так что легко выполню и ваш заказ.

    Россия Волжский (Волгоградская обл.) | 30 октября 2018 |
  6. 1 день300 ₴
    Сергей Ковтунов
     214   2  0

    Набросал быстро образец https://codepen.io/citizen55/pen/qJGojq?editors=0010

    Россия Россия | 30 октября 2018 |