@secretsergey

Можно ли кроссбраузерно сделать исчезание слайда?

Всем привет.
Сразу для наглядности приведу ссылку на codepen.
Имеется следующая задача. На странице сайта есть слайдер (slick) c следующими параметрами:
$('.slider').slick({
centerMode: true,
centerPadding: '50px',
arrows:false
});

Как видно по краям слайдера видны соседние слайды и для них требуется применить эффект исчезания.
Пример. Тут фото исчезает на сплошном фоне. Мне же надо соседние слайды растворить.
Если бы был фон сплошной (одним цветом), то можно было бы реализовать данную задачу через фоновый градиент, но как показано в примере на фоне стоит изображение. Реализовать можно через mask svg, но кроссбраузерности нет.
Буду благодарность за подсказку.

Желаемый результат (пример): 24574143.png
  • Вопрос задан
  • 188 просмотров
Пригласить эксперта
Ответы на вопрос 2
lamer350
@lamer350
wp x (nginx + php7 + opcache) = love
Накладываем :before поверх изображения с абсолютным позиционированием и применяем ему градиент через css
Ответ написан
vadimkot
@vadimkot Куратор тега CSS
Кроссбраузерно нельзя, но есть mask-image для такого эффекта (пример https://codepen.io/anon/pen/QzjEgq ).
Но в рамках Graceful Degradation в браузерах, которые не имеют поддержки mask-image, будет отображаться версия без fading эффекта.
https://caniuse.com/#feat=css-masks
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы