Анимированное колесо фортуны на джаваскрипте

  Рет қаралды 522

Aleksey Chikin

Aleksey Chikin

Күн бұрын

Рабочий пример можно посмотреть здесь:
alekseychikin.ru/playground/w...
Исходный код на гитхабе:
github.com/alekseychikin/play...
00:00 Приветствие
00:24 Базовая вёрстка
01:44 Создаю сегменты
06:48 Добавляю стрелочку
07:45 Создаю текстовые элементы
10:45 Добавляю кнопки
12:57 Вычисляю градус кручения
18:13 Добавляю анимацию кручения
21:48 Пока

Пікірлер: 12
@almazsait911
@almazsait911 2 ай бұрын
Ты красавчик брат
@sergey5806
@sergey5806 2 жыл бұрын
Очень понравилось то что ты делаешь! Главное продолжай, это делать и дальше. И если можно такой вопрос, связан с анимацией. У меня есть перемещение иконки по path svg. Это все происходит при скролле страницы. Меняется position.x, position.y, я это просто вывожу в transform translate(x, y). А сам вопрос в том, как это анимировать, что бы была анимация или инерция, transition здесь не поможет. Сделать анимацию EaseOut() и вызывать на каждом изменении position.x, position.y? Что то вроде такого: EaseOut(position.x). Сейчас просто не дома, а мозг продолжает работать)) Удачи тебе, и жду новых видосов!
@sergey5806
@sergey5806 2 жыл бұрын
Проверил, так не работает) EaseOut(position.x) Дергается как то странно, вот так записывать пробовал 1000 * EaseOut(position.x) prnt.sc/mEUdYsIoNusD Что то никак не дойдет мне что нужно сделать.
@alekseychikin
@alekseychikin 2 жыл бұрын
Привет. Спасибо большое! Из описания всё же плохо понятно, что ты хочешь сделать. Заведи пример на каком-нибудь codepen.io и пришли ссылку.
@sergey5806
@sergey5806 2 жыл бұрын
Привет, спасибо за отклик) Почему то сообщение которое я вчера оставил под твоим комментарием, не запостилось(( И сегодня пробовал несколько раз, тоже не работает) Вот сюда загрузил пример: codepen.io/MATEY15/pen/jOYJROR
@alekseychikin
@alekseychikin 2 жыл бұрын
В easeInOut нужно оборачивать progress, а не конкретные position.x, position.y
@sergey5806
@sergey5806 2 жыл бұрын
С праздничком!) Я понял, спасибо, но это немного не то что нужно. Анимация срабатывает но не так как ожидалось. Есть ли идеи как можно добавить скольжения/инерции? Например я проскроллил, а точка скользит. Сейчас она сразу останавливается. Вот я набросал пример как инерция работает - codepen.io/MATEY15/pen/wvpbrGL
@user-ee4is9qm9r
@user-ee4is9qm9r 2 жыл бұрын
все больше понимаю, что не быть мне программистом...
ВОДА В СОЛО
00:20
⚡️КАН АНДРЕЙ⚡️
Рет қаралды 32 МЛН
Nastya and SeanDoesMagic
00:16
Nastya
Рет қаралды 39 МЛН
НЫСАНА КОНЦЕРТ 2024
2:26:34
Нысана театры
Рет қаралды 1,4 МЛН
History of Windows 7: An OS that is still used by millions
22:04
Daniel Myslivets
Рет қаралды 451 М.
Чего ожидать от HTTP/3 + Go
51:07
Нина Пакшина
Рет қаралды 8 М.
Lucky Spin With  HTML And Javascript
23:09
Daeng Coding
Рет қаралды 32 М.
Spin Wheel App With Javascript | HTML, CSS & Javascript Project
27:28
31 portals of impossible shape
35:50
optozorax
Рет қаралды 785 М.