Форум

K_PECT · #11 (**permalink**) 23.12.2015, 10:32

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

рони · #12 (**permalink**) 23.12.2015, 10:38

<!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>

K_PECT · #13 (**permalink**) 23.12.2015, 10:43

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

ruslan_mart · #14 (**permalink**) 23.12.2015, 10:56

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

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

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

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

K_PECT · #15 (**permalink**) 23.12.2015, 11:13

Может я изначально не правильно объяснил.
Нужно менять изображение у 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 · #16 (**permalink**) 23.12.2015, 17:20

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

ruslan_mart · #17 (**permalink**) 23.12.2015, 19:37

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

ruslan_mart · #18 (**permalink**) 23.12.2015, 19:47

https://jsfiddle.net/6r2bv6uy/

рони · #19 (**permalink**) 23.12.2015, 19:49

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

ruslan_mart · #20 (**permalink**) 23.12.2015, 20:36

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

Форум

Справочник

Discord чат

Курсы javascript