Javascript-форум - Смена backgroundImage

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Смена backgroundImage (https://javascript.ru/forum/misc/60329-smena-backgroundimage.html)

1. Он на setInterval
2. Необходимо менять изображение у body
3. Нужно без СSS

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  html{
    height:100%;
  }

  body{
    margin:0 auto;
    width:100%;
    height:100%;
    background-image:url("http://uviprint.ru/wp-content/gallery/vid/vid_007.jpg");
    background-repeat:no-repeat;
    background-size:100% 100%;
  }

  body:before{
    width:100%;
    height:100%;
    animation-name:Fade;
    animation-timing-function:ease-in-out;
    animation-iteration-count:infinite;
    animation-duration:10s;
    animation-direction:alternate;
    content:'';
    display:block;
    background-image:url("http://pic5.bbzhi.com/chuangyibizhi/shejishimengxiangzhongdefengguangbizhi/shejishimengxiangzhongdefengguangbizhi_469563_2.jpg");
    background-repeat:no-repeat;
    background-size:100% 100%;
  }

  @keyframes Fade{
    0%{
      opacity:0;
    }

    35%{
      opacity:1;
    }

    55%{
      opacity:1;
    }

    100%{
      opacity:0;
    }
  }
  </style>
</head>

<body>

</body>

</html>

Отличный пример! Я понимаю, что достал но не работает в IE

Цитата:

Сообщение от K_PECT

1. Он на setInterval
2. Необходимо менять изображение у body
3. Нужно без СSS

А чем interval не нравится? Тоже самое. Поменять не проблема.

Просто дайте основному блоку position: fixed/absolute и z-index: -1, и будет Вам счастье.

Может я изначально не правильно объяснил.
Нужно менять изображение у body меняя прозрачность.

setInterval(function() {
    var $body = $('body');
    if($body.hasClass('background1'))
    {
        $body.removeClass('background1');
        $body.addClass('background2');
    }
    else {        
        $body.removeClass('background2');
        $body.addClass('background1');
    }
}, 8000);

body { 
height: 100%;
width: 100%;
background: url(../img/bgr/1.jpg) no-repeat;
background-attachment: fixed;
background-size: cover;
transition: background 1s linear;
-webkit-transition: background 1s linear;
-moz-transition: background 1s linear;
-ms-transition: background 1s linear;
}
.background1 {
background: url(../img/bgr/2.jpg) no-repeat;
background-attachment: fixed;
background-size: cover;
transition: background 1s linear;
-webkit-transition: background 1s linear;
-moz-transition: background 1s linear;
-ms-transition: background 1s linear;
}
.background2 {
background: url(../img/bgr/1.jpg) no-repeat;
background-attachment: fixed;
background-size: cover;
transition: background 1s linear;
-webkit-transition: background 1s linear;
-moz-transition: background 1s linear;
-ms-transition: background 1s linear;
}

Этот код работает. Но видимо из-за jquery и setInterval очень нагружает браузер и вдобавок

ms-transition

не работает в IE.
Нужно подобное на js, setTimeout с поддержкой IE

Обидно, что забили

K_PECT, в IE нельзя сделать плавность фону.

Ruslan_xDD,
а если через канвас обработать массив картинок, возможно через шейдер и вставлять в css этапы перехода.

рони, мне кажется не производительно будет каждый раз картинку в CSS перезаписывать.