Плавный переход при смене фонового изображения - PullRequest
Новая
       1

Плавный переход при смене фонового изображения

0 голосов
/ 30 сентября 2019

У меня есть следующий jQuery для изменения фонового изображения body. 

(function($, interval, slides) {

        var gradient = "linear-gradient(0deg,rgba(0,0,255,0.3),rgba(0,0,255,0.3))";
        $('body').css("background", gradient+", url('" + slides[slides.length-1] + "')");

          var i = 0;
          var handle = setInterval(function () {

          var bg =  gradient+", url('" + slides[i] + "')";
          $('body').css('background', bg);

              i++;

              if (i >= slides.length) {
                  i = 0;
              }
          }, interval);

      })(jQuery, 5000, [
          "https://source.unsplash.com/CgOaFB56Vyw/1920x1080",
          "https://source.unsplash.com/18Q4c6EVf_o/1920x1080",
          "https://source.unsplash.com/7uvHtSn5a90/1920x1080"
      ]);

Теперь проблема, с которой я сталкиваюсь, заключается в том, что изменение свойств фона не является плавным. Можно ли использовать здесь свойство transition, чтобы облегчить изменение фонового изображения и градиента и сделать его более плавным? Я пытался использовать transition: background-image 3s ease, но это не имеет никакого эффекта. Пожалуйста, найдите мой код в следующей скрипке.

https://jsfiddle.net/gw6ndfby/2/

1 Ответ

1 голос
/ 30 сентября 2019

Этот ответ будет уместен в вашем случае, который говорит о том, что CSS3 не поддерживает переходы для градиентов. Кроме того, вы хотите применить CSS к background-image. Я попытался инкапсулировать логику загрузки изображений вокруг применения CSS, чтобы сделать переход плавным (без градиента): 

(function($, interval, slides) {
  var gradient = "linear-gradient(0deg,rgba(0,0,255,0.3),rgba(0,0,255,0.3))";
  const img = new Image();
  img.onload = function() {
    $('body').css("background-image", "url('" + img.src + "')");
  }
  img.src = slides[slides.length - 1];

  var i = 0;
  var handle = setInterval(function() {
    const img2 = new Image();
    img2.onload = function() {
      var bg = "url('" + img2.src + "')";
      $('body').css('background-image', bg);
      i = (i + 1) % slides.length;
    }
    img2.src = slides[i];
  }, interval);

})(jQuery, 4000, [
  "https://source.unsplash.com/CgOaFB56Vyw/1920x1080",
  "https://source.unsplash.com/18Q4c6EVf_o/1920x1080",
  "https://source.unsplash.com/7uvHtSn5a90/1920x1080"
]);
.transition {
  transition: background-image 2s ease;
  -webkit-transition: background-image 2s ease;
  background-size: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body class="transition">
  Here come the images
</body>

</html>

РЕДАКТИРОВАТЬ: Обходным путем для перехода будет применение градиента к псевдоэлементу body :before: 

.transition:before {
  content: '';
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background: linear-gradient(0deg, rgba(0, 0, 255, 0.3), rgba(0, 0, 255, 0.3));
}


(function($, interval, slides) {
  var gradient = "linear-gradient(0deg,rgba(0,0,255,0.3),rgba(0,0,255,0.3))";
  const img = new Image();
  img.onload = function() {
    $('body').css("background-image", "url('" + img.src + "')");
  }
  img.src = slides[slides.length - 1];

  var i = 0;
  var handle = setInterval(function() {
    const img2 = new Image();
    img2.onload = function() {
      var bg = "url('" + img2.src + "')";
      $('body').css('background-image', bg);
      i = (i + 1) % slides.length;
    }
    img2.src = slides[i];
  }, interval);

})(jQuery, 4000, [
  "https://source.unsplash.com/CgOaFB56Vyw/1920x1080",
  "https://source.unsplash.com/18Q4c6EVf_o/1920x1080",
  "https://source.unsplash.com/7uvHtSn5a90/1920x1080"
]);
.transition:before {
  content: '';
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background: linear-gradient(0deg, rgba(0, 0, 255, 0.3), rgba(0, 0, 255, 0.3));
}

.transition {
  transition: background-image 2s ease;
  -webkit-transition: background-image 2s ease;
  background-size: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body class="transition">
  Here come the images
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...