Как сделать автоматическую адаптацию под цвет фона слайдера?

Question

[partyzanx]

Когда листаешь слайдер, то текст в .bar становится невидимым на чёрном слайде или тёмной картинке.
На scrolltop=0 делать .bar белым я не буду, только когда вниз спускаешься, тогда он будет становится белым.

Какие есть варианты, чтобы при пролистовании слайда текст адаптировался под цвет фона слайда?

1. Либо как-то через mix-blond делать или типа того, т.е. через css
2. Когда слайд выбран активным, к нему добавляется класс is-selected

В итоге, если выбран слайд .black , то получаем

<div class="carousel-cell black is-selected" aria-selected="true" style="position: absolute; left: 100%;"></div>

Может быть сделать яваскрипт, когда
if .is-selected.black,
то к .bar добавляется класс on-black

, когда
if .is-selected.red,
то к .bar добавляется класс on-red

это чтобы я мог хорошо адаптировать под разные цвета слайдов

Comments

[Николай Чуприк]

1. Сдаётся мне, что без помещения картинки в canvas, этого не сделать. Буду рад ошибиться. Подписываюсь.

2. Наверное можно сделать текст в виде фильтра, над картинкой, в SVG, но при этом текст окажется пёстрым, хоть и контрастным. А лучше конечно, чтобы у текста был единый цвет, наилучший для преобладающего под ним фона.

А мысли идут и идут:

3. Наверное лучшее решение — это оснастить каждую картинку data-атрибутом, который будет нам сообщать, какой цвет надписи для этой картинки наиболее уместен. И согласно этому атрибуту ставить цвет у надписи. Но это только в том случае, если мы имеем возможность вручную оценивать каждую картинку при подготовке к публикации. Для массового употребления это конечно не годится.

[hesrun]

Как я вижу себе, то в слайде держать атрибут с цветом картинки, и через js красить цвет текста, в зависимости что в атрибуте.

[partyzanx]

hesrun, RAX7 Подсказка:
1. Либо как-то через mix-blond делать или типа того, т.е. через css
2. Когда слайд выбран активным, к нему добавляется класс is-selected

В итоге, если выбран слайд .black , то получаем

<div class="carousel-cell black is-selected" aria-selected="true" style="position: absolute; left: 100%;"></div>

Может быть сделать яваскрипт, когда
if .is-selected.black,
то к .bar добавляется класс on-black

, когда
if .is-selected.red,
то к .bar добавляется класс on-red

это чтобы я мог хорошо адаптировать под разные цвета слайдов

Answer 1

[yarovikov]

Вот так?

Comments

[Николай Чуприк]

Жаль, всё обфусцировано короткими именами. Как это работает, не понятно.

[partyzanx]

долго срабатывает , и резко срабатывает,

а нужно будет под разные цвета адаптировать, а не только тёмное-светлое

не подходит

[yarovikov]

Николай Чуприк, мда

[Николай Чуприк]

partyzanx, да вы, батенька, гурман. :)

[partyzanx]

Николай Чуприк, да, именно так, к каждой мелочи придираюсь, надо было учиться на вебдизайнера)
hesrun @choupa
1. Либо как-то через mix-blond делать или типа того, т.е. через css
2. Когда слайд выбран активным, к нему добавляется класс is-selected

В итоге, если выбран слайд .black , то получаем

<div class="carousel-cell black is-selected" aria-selected="true" style="position: absolute; left: 100%;"></div>

Может быть сделать яваскрипт, когда
if .is-selected.black,
то к .bar добавляется класс on-black

, когда
if .is-selected.red,
то к .bar добавляется класс on-red

это чтобы я мог хорошо адаптировать под разные цвета слайдов

[RAX7]

partyzanx, выдрать цвет из картинки этим: https://jariz.github.io/vibrant.js/
там есть метод .getTitleTextColor() - Get a color (in hex) that works best with any 'title' text that is used over this swatch's color

[Николай Чуприк]

yarovikov, как я понял, общий смысл сделать canvas, переложить туда картинку и анализировать попиксельно.

[partyzanx]

yarovikov

Подсказка

1. Либо как-то через mix-blond делать или типа того, т.е. через css
2. Когда слайд выбран активным, к нему добавляется класс is-selected

В итоге, если выбран слайд .black , то получаем

<div class="carousel-cell black is-selected" aria-selected="true" style="position: absolute; left: 100%;"></div>

Может быть сделать яваскрипт, когда
if .is-selected.black,
то к .bar добавляется класс on-black

, когда
if .is-selected.red,
то к .bar добавляется класс on-red

это чтобы я мог хорошо адаптировать под разные цвета слайдов

Answer 2

[Stalker_RED]

mix-blond делать или типа того, т.е. через css

Если речь об этом, то эти свойства применяются при наложении нескольких фонов в одном элементе, а у вас надпись в отдельном блоке.

Так не пойдет?


На основе примера из документации.
Цвета и прозрачность конечно можно поменять.