Сделать сайт на 1 страницу 2d визуализация live коэффициентов
Необходимо сделать веб-сайт на одну страницу, который в реальном времени запрашивает через API букмекерские live коэффициенты футбольного матча и визуализирует их в виде двух 2D персонажей на футбольном поле.
По визуалу референс на фото. Все выходники предоставлю в личных сообщениях.
Анимация:
Вся горизонтальная зона снизу - это диапазон, на котором движутся спрайты, от начала и до финишного флага. Чем коэффициент ниже (с П1/Ничья/П2), тем спрайт ближе к финишному флагу (вправо). И наоборот, чем выше - тем дальше (влево).
Обгон и смещение спрайтов должно быть плавным, без резких движений.
Весь матч будет записан на запись экрана, то ускоряться до 90-100 раз. Поэтому спрайты должны в реальном времени бегать очень медленно, но органично при скорости 90-100 раз.
Напишите, пожалуйста, чем можете помочь, и вашу цену за реализацию проекта.
Приложения 1
-
Тут главное — чтобы live-коэффициенты не просто «подтягивались», а обновлялись плавно и без хаоса на экране.
️ Я сделаю одну страницу с 2D-визуализацией, нормальным состоянием загрузки, обработкой ошибок API и адаптацией под телефон.
В таких задачах чаще всего сыпется не верстка, а частота обновления данных: если бить в API без контроля, страница начинает дергаться или ловить лимиты.
⚙️ Закладываю аккуратное обновление через JavaScript, чтобы коэффициенты изменялись понятно для пользователя, а не мигали случайно.
Могу стартовать сегодня; для начала нужен только доступ к API или формат ответа, и я быстро соберу рабочий прототип первого экрана.
-
Здравствуйте!
Мы можем сделать для вас одностраничный сайт с визуализацией live-данных под эту задачу.
1. Через какое API необходимо получать live-коэффициенты и предоставляется ли документация/доступ к нему?
2. Нужно отображать коэффициенты только для одного матча одновременно или должна быть возможность выбирать матчи и переключаться между ними?
—
О нас
…
Мы dZENcode – IT-компания полного цикла разработки: от дизайна и программирования до интеграций и пострелизной поддержки цифровых решений.
Мы создаём проекты с нуля, а также подключаемся к уже существующим решениям, которым нужны доработка, развитие или техническая поддержка.
Подробную информацию о наших услугах и ставках вы найдёте на официальном сайте:Freelancehunt
Посмотрите – после этого сможем обсудить детали и согласовать следующий шаг.
⚠️ После уточнения всех деталей мы определим объём работ, подходящий формат сотрудничества: позадачно, аутсорсинг или аутстаффинг – и финальную стоимость.
С нами проекты гарантированно доходят до релиза:
• 10+ лет оказываем IT-услуги;
• 90+ штатных специалистов;
• 250+ публичных отзывов с 2015 года;
• Поддерживаем продукты по SLA после запуска;
• Работаем по NDA и договору с компанией!
-
Здравствуйте. Меня зовут Владимир.
Я опытный разработчик с 8-летним стажем в создании веб-сайтов «под ключ», мобильных приложений и сложных веб-систем.
Специализируюсь на разработке современных, адаптивных и высокопроизводительных решений. За 8 лет практики я сформировал глубокий технический стек:
Frontend и интерфейсы: HTML, CSS, JavaScript, TypeScript, React.js, Next.js, Vite, Tailwind CSS, Bootstrap и Elementor.
Мобильная разработка: React Native и Flutter.
…
Backend и API: Node.js, PHP, Python, Laravel, REST API и GraphQL.
Базы данных и кэширование: MySQL, MariaDB, PostgreSQL, MongoDB и Redis.
Инфраструктура и инструменты: Git, Docker, Nginx, Apache, Composer и Linux (Terminal).
Я эффективно анализирую требования клиентов, предлагаю оптимальные архитектурные решения и строго соблюдаю сроки. Кроме разработки, владею навыками в дизайне, технической SEO-оптимизации и поддержке проектов.
-
297 Здравствуйте! Задача понятна — это разработка интерактивной визуализации на основе Live-данных. У меня есть опыт работы с API и сложными анимациями.
Как реализую:
Стек: Next.js + Framer Motion (для плавной интерполяции движения персонажей без рывков).
Логика: Реализую механику "сглаживания" (lerp) коэффициентов, чтобы спрайты двигались органично даже при высокой частоте обновлений API.
Адаптив: Спрайты будут масштабироваться относительно ширины поля согласно заданной формуле.
Ориентировочная оценка:
Срок: 5-7 дней.
Стоимость: 7000 грн.
Готов приступить к разработке прототипа движения. Присылайте выходные данные и документацию API — обсудим детали!
… С уважением,
-
192 Добрый день!
Ознакомился с описанием проекта и референсом. Могу реализовать одностраничное веб-приложение с получением live-коэффициентов через API, плавной анимацией 2D-персонажей и отображением их позиций на поле в соответствии с изменениями коэффициентов в реальном времени.
Для реализации использую JavaScript с Canvas или Phaser.js (в зависимости от деталей референса), что позволит получить плавную анимацию и стабильную работу во время длительной записи видео.
После ознакомления с API и техническими деталями смогу сразу приступить к работе.
Буду рад сотрудничеству.
-
862 14 0 Привет! Готов взяться за работу. Пишите, все обсудим. Мое портфолио
Freelancehunt
Behance
-
533 28 7 1 Готов выполнить.
Опыт работы в Web Development более 12+.
Примеры работ https://koder.pp.ua/portfolio/
-
412 10 0 Добрый день, сделаю так, что будет открываться красиво даже на принтере, также у вас будет возможность масштабирования, сегодня такие задачи выполняются быстро и результаты очень приятные.
С уважением,
Олег Жилин
-
11685 31 0 3 Доброго дня! Разрабатываю на Python, React/Node.js выполнял похожие проекты, готов к сотрудничеству.
-
601 5 0 Добрый день.
Задача полностью понятна. Могу реализовать одностраничное веб-приложение, которое в реальном времени получает live-коэффициенты через API букмекера и визуализирует их в виде анимированных персонажей на футбольном поле.
Что будет реализовано:
• подключение к API букмекерских коэффициентов;
• автоматическое обновление данных в реальном времени;
• плавная интерполяция позиций спрайтов без рывков;
… • корректная логика перерасчета коэффициентов в позиции на поле;
• поддержка П1 / Ничья / П2;
• анимация бега персонажей;
• адаптация под запись экрана и дальнейшее ускорение видео в 90-100x;
• оптимизация производительности для длительной работы во время матча;
• возможность легко менять спрайты и оформление.
Для плавности я бы не двигал персонажей непосредственно при каждом изменении коэффициента, а использовал систему сглаживания (lerp/interpolation), благодаря чему даже при частых обновлениях данных движение будет естественным и будет выглядеть хорошо после ускорения видео.
Технологии:
• React / Next.js
• TypeScript
• Canvas или PixiJS (в зависимости от референса)
• REST/WebSocket API букмекера
После получения референса и документации API смогу сразу оценить финальную сложность и предложить несколько вариантов реализации анимации.
-
1602 31 1 Добрый день, веб-программировании уже более 9 лет
Работаю с rest api, фреймворками и cms такие как django, laravel, yii2, wp, opencart, codegnither и т.д. Готов выполнить задачу.
Отзывы:Freelancehunt
-
212 Добрый день!
Я начинающий Python/frontend-разработчик, сейчас активно набираю портфолио, поэтому работаю по ценам ниже рынка.
Могу реализовать:
• одностраничный сайт;
• подключение live-коэффициентов через API;
• плавную анимацию 2D-персонажей на поле в реальном времени;
• корректную работу анимации для дальнейшего ускорения записи в 90–100x.
…
Ориентировочный срок: 5–7 дней.
Ориентировочная стоимость: 50 USD
Готов ознакомиться с материалами и обсудить детали.
-
392 Добрый вечер! Могу реализовать проект за 1-2 дня. Имею опыт с HTML, CSS, JS — подключение API, анимация спрайтов и плавное движение персонажей не составят проблем.
-
673 1 0 Здравствуйте! Задача очень нестандартная и интересная, особенно в части работы с анимацией под ускорение x100.
Обычный CSS или DOM-анимация здесь не подойдут — при ускорении видео будут заметны рывки. Поскольку у меня есть опыт разработки браузерных игр, я реализую эту визуализацию на PixiJS (Canvas/WebGL).
Я напишу логику с использованием линейной интерполяции (Lerp), чтобы при получении новых коэффициентов из API спрайты не прыгали на новые координаты, а максимально плавно и микроскопически "дотягивались" до них. Это даст идеальную органическую картинку на таймлапсе.
Ориентировочные условия:
Сроки: 3–5 дней.
…
Стоимость: $150–$250 (зависит от формата спрайтов и сложности API букмекера).
-
156 Привет!
Проект очень крутой и нестандартный, с радостью реализую такую интерактивную визуализацию. Механика понятна: мы делаем не просто сайт, а своего рода "живой трекер" на основе букмекерских API, где низкий коэффициент (больший шанс на победу) толкает персонажа вперед к финишу.
-
328 Привет, Илья! Задание понятное, готов реализовать этот проект для вас. Что я сделаю:Бекенд (Python): Настрою быстрое получение live-коэффициентов через API без задержек.Фронтенд (HTML/CSS): Верстаю аккуратную страницу с полем и персонажами по вашему референсу.Плавная анимация (JS): Реализую алгоритм плавного движения спрайтов. Даже при ускорении записи в 100 раз смещение будет органичным, без резких скачков и рывков.Готовую работу сдам полностью протестированной. Буду рад взглянуть на референс и обсудить детали API в личных сообщениях. Напишите, обсудим цену и сроки!
-
422 Привет!
Готов взяться за задание.
Как я предлагаю это реализовать:
Интеграция с API: Настрою асинхронный запрос к букмекерскому API (которое вы предоставите) в реальном времени для мгновенного получения актуальных коэффициентов П1 и П2.
Математика движения и плавность: Чтобы персонажи не «телепортировались» при изменении цифр, я реализую движение через линейную интерполяцию (LERP) на базе requestAnimationFrame. Персонажи будут смещаться по горизонтальной оси абсолютно плавно, без резких рывков. Логика ясна: более низкий коэффициент - ближе к финишному флажку.
Оптимизация под ускорение 90-100х: Это ключевой нюанс. Я настрою базовую скорость анимации самих спрайтов (цикл перебирания ног) в реальном времени в режиме «замедленной съемки». Благодаря этому при итоговом ускорении видео в 90-100 раз бег персонажей будет выглядеть естественно и органично, без хаотичного мигания кадров.
Стек технологий: Сделаю проект на чистом HTML5 Canvas / JS или React + Tailwind (без тяжелых CMS). На выходе вы получите чистый и легкий код, который можно будет запустить прямо из папки на компьютере для записи экрана.
-
232 Здравствуйте! Я делал одностраничные веб-приложения с живыми данными через API-поллинг и плавной анимацией на canvas — движение и обгон спрайтов осуществляю через интерполяцию, поэтому даже на ускоренной записи они движутся органично, без рывков. Уточните: коэффициенты мы берем из конкретного API букмекера (какого именно?), или вы предоставляете готовый поток данных? Поле и спрайты возьму из ваших исходников. Приблизительно 4 дня.
-
650 2 0 Добрый день!
Интересный проект — одностраничник с live-коэффициентами и 2D-анимацией это как раз моя зона. По референсу и описанию все понятно, расскажу, как сделаю главное.
Тяну коэффициенты через API в реальном времени и привязываю позицию каждого спрайта к коэффициенту: ниже коэффициент → ближе к финишному флагу справа, выше → левее.
Ключевой момент, который вы правильно подчеркнули — плавность на ускорении 90-100x. Сделаю так: позиции спрайтов не «прыгают» при обновлении коэффициента, а плавно интерполируются (tween с easing) до новой точки. То есть спрайт постоянно медленно и органично ползет, а не дергается рывками. Именно благодаря этому при ускорении записи в 90-100 раз движение будет выглядеть живым, а не рваным. Обгоны и смещения тоже сделаю плавными.
Технически беру Canvas (PixiJS) или чистый JS на requestAnimationFrame — это дает самое гладкое анимирование под запись экрана. Ваши исходники (спрайты, поле, флаг) впишу как есть.
…
Главный вопрос, от которого зависит все: API коэффициентов — вы даете доступ/ключ к конкретному букмекерскому API, или его надо подбирать? И отдает ли он именно live-коэффициенты (П1/Ничья/П2) с частым обновлением — от частоты обновления зависит, насколько «живыми» будут бегать спрайты.
Подскажите по API — и я сразу сориентирую по финальной цене и срокам.
-
2022 4 0 Здравствуйте!
У меня большой опыт в создании сайтов и приложений (CMS, SPA, TMA).
Примеры моих работ вы можете посмотреть в портфолио.
Готов выполнить поставленную задачу.
Предлагаю обсудить детали в личных сообщениях.
-
4975 41 4 1 Добрый вечер!
У меня есть опыт разработки веб-сайтов с использованием API для получения данных в реальном времени. Готов реализовать визуализацию live коэффициентов с помощью 2D спрайтов на футбольной анимации, обеспечив плавное смещение персонажей в соответствии с динамикой коэффициентов.
Обращайтесь в личные сообщения, обсудим детали.
-
2276 114 1 Здравствуйте. Готов приступить к выполнению вашего задания.
Давайте обсудим.
-
13013 67 0 Здравствуйте! Выполню ваше задание быстро и качественно.
Последние мои работы
https://indexfast.pp.ua - быстрая индексация сайта
https://mono-bank.pp.ua - все о монобанке
https://mamamia.pp.ua - интернет магазин
https://programist.pp.ua/ua/portfolio/ - портфолио работ
https://monitortest.pp.ua - тестирование монитора
https://keytest.pp.ua - тестирование клавиатуры
… https://pctest.pp.ua - тестирование компьютера
https://vseetut.matviy.pp.ua - верстка
Мое портфолио: https://freelancehunt.com/ua/freelancer/romas6ka.html#portfolio
Пишите, начну сегодня работать. Буду рад сотрудничеству с Вами!
-
452 Доброго дня, Іллє!
Цікаве завдання — реалізую на чистому JS.
Що зроблю:
- Fetch API коефіцієнтів в реальному часі
- 2D спрайти на футбольному полі
- Плавна анімація (requestAnimationFrame)
- Позиція спрайта = функція від коефіцієнта
… - Органічний рух при 90-100x прискоренні запису
Термін: 2 дні
Вартість: 3000 UAH
Покажіть формат API та графічні матеріали.
-
236 Здравствуйте, Илья! С большим интересом изучил ваше задание по 2D-визуализации live-коэффициентов. Задание полностью понятно, у меня есть четкое техническое решение, и я готов реализовать проект под ключ на чистом JavaScript (без тяжелых библиотек, что обеспечит максимальную плавность). Как я реализую этот проект: Плавная анимация (100х): Настрою движение спрайтов через CSS Transitions или requestAnimationFrame. Рассчитаю скорость и инерцию так, чтобы при ускорении видео в 90-100 раз бег персонажей выглядел естественно, органично и без микро-рывков. Логика коэффициентов: Напишу скрипт, который считывает данные из API и динамически пересчитывает позицию персонажа на поле (нижний коэффициент — плавный сдвиг вправо к финишу, высший — влево). Чистая верстка: Сделаю аккуратную одностраничную верстку, адаптированную под запись экрана, и интегрирую все ваши исходные графические материалы. Мое предложение: Стоимость: 2800 грн. Срок выполнения: 2 дня. Готов обсудить формат вашего API и посмотреть графические референсы в личных сообщениях. Могу приступить к работе прямо сейчас!
-
1712 37 0 Ориентировочная стоимость разработки 20 000 грн. Окончательную сумму смогу подтвердить после просмотра полного ТЗ, исходных материалов и документации API.
-
172 Я NextJs, React, NestJs разработчик. Готов взяться за эту задачу
-
315 Доброго дня. Проект интересный, но для оценки нужно уточнить, есть ли уже готовый API с live-коэффициентами, какие именно данные он отдает, и все ли спрайты/фон/графика. Также нужно понять, нужна ли только frontend-визуализация или backend для обработки API. После этого можно оценить сроки и стоимость.
-
333 1 0 Привет, Илья! Готов реализовать проект под ключ. У меня есть опыт работы с API и плавными анимациями, поэтому сделаю так, чтобы при ускорении в 100х все выглядело идеально и органично. Пишите в личные сообщения, обсудим детали и исходные материалы. Буду рад сотрудничеству!
-
2830 19 0 Здравствуйте. Готов выполнить под ключ, качество и оперативность гарантирую.
Пишите в личные сообщения, буду рад сотрудничеству!
-
2044 23 0 Здравствуйте. Планируете ли вы использовать готовую библиотеку для 2D-анимации, или нужна полностью кастомная реализация движения спрайтов?
Сроки и бюджет уточню в личной переписке.
Вот как я выполню этот проект:
1. Настрою подключение к API букмекеров для получения live коэффициентов в реальном времени.
2. Разработаю систему плавной анимации двух спрайтов на футбольном поле, где позиция зависит от значения коэффициента.
3. Оптимизирую скорость движения спрайтов, чтобы при ускорении записи до 100х анимация выглядела органично и без рывков.
… Спасибо за рассмотрение моего предложения. Я с нетерпением жду возможности сотрудничества с вами!
Актуальные фриланс-проекты в категории HTML и CSS верстка
Вебфлоу разработчик для заполнения страниц портфолио на сайтеСайт разработан кастомно на Webflow для строительной компании, нужно быстро заполнить страницы проектов по одному шаблону (заменить картинки и тексты) Для 2 языков Количество - 6 штук Готовы начинать как можно скорее, спасибо! HTML и CSS верстка, Веб-программирование ∙ 13 часов 7 секунд назад ∙ 26 ставок |
Верстка та посадка на WordPress сайту будівельної компанії (Premium-сегмент) з акцентом на SEOОписание проекта: Ищем опытного WordPress-разработчика для верстки и посадки готового дизайн-макета из Figma на CMS WordPress. Важный контекст проекта: Это не разработка сайта с нуля. Компания имеет действующий сайт, мы обновляем структуру и дизайн. Нам необходимо реализовать… HTML и CSS верстка, Веб-программирование ∙ 17 часов 42 минуты назад ∙ 49 ставок |
Перенос сайта с OpenCart на платформу ХорошопДобрый день. Есть сайт на OpenCart, интернет-магазин. Нужно перенести структуру сайта на платформу Хорошоп, подобрать дизайн для нового сайта и сделать его полноценно работающим. HTML и CSS верстка, Веб-программирование ∙ 1 день 14 часов назад ∙ 30 ставок |
Нужен сильный специалист по WordPress / WooCommerce для доработки сайта MARSPROИщем ответственного фрилансера или небольшую команду для качественного завершения и технической доработки сайта компании MARSPRO. Сайт уже работает, но после предыдущего разработчика осталось много мелких и важных технических проблем. Нам нужен человек, который сможет не просто… CMS, HTML и CSS верстка ∙ 2 дня 14 часов назад ∙ 44 ставки |
Sandra Ice Cream - Kaleidoscop
4122 UAH
У нас есть небольшой проект, и мы хотели бы узнать, сможете ли Вы подготовить для нас видеоролик для LED-экрана. Видео будет использоваться на нашем мероприятии. Мы предоставим все необходимые материалы: дизайн, брендбук, размеры и технические требования. Пожалуйста, сообщите,… HTML и CSS верстка ∙ 2 дня 16 часов назад ∙ 7 ставок |