Переключатели цвета с анимацией перехода между двумя выбранными цветами. Код основан на JavaScript и не использует сторонних фреймворков или библиотек.
С помощью данного кода можно создать интерактивные переключатели цвета на веб-странице, которые позволяют пользователям легко выбирать начальный и конечный цвета, а также регулировать количество промежуточных цветов для создания плавных переходов.
Ключевые компоненты и функциональность кода:
1. Классы
ColorElement и ColorElementInput: Они представляют элементы цвета и текстовые поля выбора цвета соответственно. Классы обновляют значение цвета элементов и отображают его на странице с помощью CSS-свойств.
2. Класс
DragSpaceDetector: Позволяет пользователю перетаскивать целевой цвет (последний элемент переключателя) и изменять количество промежуточных цветов, отображаемых в переключателе.
3. Класс
TransitionColorPicker: Он объединяет предыдущие классы и управляет созданием переключателей цвета. Класс обновляет промежуточные цвета в зависимости от количества и отображает их в контейнере. При выборе нового цвета контейнер с промежуточными цветами очищается, и затем обновляется с новым количеством промежуточных цветов, создавая плавные переходы между начальным и конечным цветами.
4. Метод
Array.from(document.querySelectorAll('.transition-color-picker')).map(...): Этот метод ищет все элементы с классом "transition-color-picker" на странице и для каждого элемента создает объект TransitionColorPicker, активируя переключатели цвета на странице.
Таким образом, код является отличным примером интерактивных переключателей цвета и может помочь разобраться в различных аспектах разработки веб-приложений, особенно в работе с DOM, обработке событий, создании пользовательских интерфейсов и анимации.
https://codepen.io/tahazsh/pen/zYMwEXp
@javascriptv