UnluckySerivelha
@UnluckySerivelha

Как реализовать плавную смену фоновых изображений?

Пытаюсь сверстать макет, в котором есть слайдер с изображениями в фоне. Сделал все, но не получается нормально реализовать смену изображений, вот что есть на данный момент.
Хочу чтобы одно изображение растворялось в другом. Пытался делать через opacity, но тогда пропадает весь контент блока.
  • Вопрос задан
  • 1401 просмотр
Решения вопроса 2
Лучше сделать не смену фона у одного блока, а несколько блоков, каждый с уникальным фоном. А скрытие и отображение блоков сделать через плавную смену opacity.

Типа так:
<section id="slider">
  <div class="slider__item" style="background-image: url("../slider/img/intro-slide-1.jpg"); opacity: 0">
  <div class="slider__item" style="background-image: url("../slider/img/intro-slide-2.jpg"); opacity: 1">
  <div class="slider__item" style="background-image: url("../slider/img/intro-slide-3.jpg"); opacity: 0">
  ...прочее содержимое
</section>
Ответ написан
Комментировать
customtema
@customtema
arint.ru
Если оно в фоне, то через opacity растворить не получится. Разве что подкладывать "предыдущее" изображение абсолютным позиционированием.

Два дива - "текущий" и "следующий", у них два фона, текущий растворяется в следующий, потом они моментально меняются фонами.

Похожий вопрос: https://stackoverflow.com/questions/41152161/opaci...
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
ikanyshev
@ikanyshev
Python developer
Каким образом вы хотите сделать смену слайдов?
Ответ написан
Ваш ответ на вопрос

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

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