UnluckySerivelha
@UnluckySerivelha

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

Пытаюсь сверстать макет, в котором есть слайдер с изображениями в фоне. Сделал все, но не получается нормально реализовать смену изображений, вот что есть на данный момент.
Хочу чтобы одно изображение растворялось в другом. Пытался делать через opacity, но тогда пропадает весь контент блока.
  • Вопрос задан
  • 259 просмотров
Решения вопроса 2
xevin
@xevin
django dealer, vuejs pusher
Лучше сделать не смену фона у одного блока, а несколько блоков, каждый с уникальным фоном. А скрытие и отображение блоков сделать через плавную смену 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
Кастомный софт и бизнес-аналитика
Если оно в фоне, то через opacity растворить не получится. Разве что подкладывать "предыдущее" изображение абсолютным позиционированием.

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

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

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

Войти через TM ID
Похожие вопросы
Blogman Оренбург
от 20 000 до 60 000 руб.
Reklama Guru Санкт-Петербург
от 50 000 до 60 000 руб.
от 10 000 до 15 000 руб.