Как создать полноэкранное слайд-шоу с плавным затенением на фоне без мерцания белого? - PullRequest
Новая
       2

Как создать полноэкранное слайд-шоу с плавным затенением на фоне без мерцания белого?

0 голосов
/ 18 апреля 2019

Я создаю перекрестное полноэкранное слайд-шоу на своей веб-странице с HTML и CSS, но это не работает.Я мог бы создать помутнение на фоновых изображениях, но есть проблема.При первой загрузке между каждым изображением мерцает белый цвет.Я не хочу избегать белых мерцаний.Как я могу их исправить?

Я написал с помощью HTML и CSS для создания слайд-шоу с плавным переходом. 

<body>
  <div class="slideshow">
  </div>
</body>

body {
  margin: 0;
  padding: 0;
}

.slideshow {
  height: 100vh;
  weight: 100%;
  background-image: url('../images/1.jpg');
  background-size: cover;
  animation: slide 24s infinite;
}

@keyframes slide {
  25% {
    background-image: url('../images/2.jpg');
    background-size: cover;
  }

  50% {
    background-image: url('../images/3.jpg');
    background-size: cover;
  }

  75% {
    background-image: url('../images/4.jpg');
    background-size: cover;
  }
}

Мне не нужны белые мерцания и нанесение красивого перекрестного затуханияслайд-шоу.

1 Ответ

0 голосов
/ 18 апреля 2019

Мерцания случаются из-за того, что браузер, вероятно, рисует новое изображение.

Попробуйте создать отдельные

s для каждого слайда, расположите их абсолютно и просто затемните каждое из них. 
<body>
    <div class="slideshow">
        <div class="slide slide-1"></div>
        <div class="slide slide-2"></div>
        <div class="slide slide-3"></div>
        <div class="slide slide-4"></div>
    </div>
</body>

.slideshow {
  position: relative;
  width: 100vw; height: 100vh;
}

.slide {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0; /* makes it full size */
  opacity: 0;
  transition: opacity 1s;

  background-size: cover;
  background-position: center;
}
.slide.active { 
  opacity: 1;
}

Только с CSS: 

@keyframes slide-1 {
    0% , 40% , 100% { opacity: 0; }
    20%             { opacity: 1; }
}
@keyframes slide-2 {
    0% , 20% , 60% , 100% { opacity: 0; }
    40%                   { opacity: 1; }
}
@keyframes slide-3 {
    0% , 40% , 80% , 100% { opacity: 0; }
    60%                   { opacity: 1; }
}
@keyframes slide-4 {
    0% , 60% , 100%  { opacity: 0; }
    80%              { opacity: 1; }
}

.slide-1 { animation: slide-1 24s infinite; background-image: url('../images/1.jpg'); }
.slide-2 { animation: slide-2 24s infinite; background-image: url('../images/2.jpg'); }
.slide-3 { animation: slide-3 24s infinite; background-image: url('../images/3.jpg'); }
.slide-4 { animation: slide-4 24s infinite; background-image: url('../images/4.jpg'); }

Или с JS: 

setInterval(function(){ 
    var current = document.querySelector('.slide.active');

    if (current.nextElementSibling) {
        current.nextElementSibling.classList.add('active');
    } else {
        current.parentElement.firstElementChild.classList.add('active');
    };

    current.classList.remove('active');
}, 6000);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...