Javascript-форум - Скрипт плавной смены background-image в div

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

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Скрипт плавной смены background-image в div (https://javascript.ru/forum/dom-window/50350-skript-plavnojj-smeny-background-image-v-div.html)

Вообще как они сделали на сайте такой плавный переход ... http://ironfit.ancorathemes.com

Все что я тут попробовал имеет глюки ... только animate дает правильную анимацию но при этом не применим для div с перетеканием картинки в картинку ...
Кто то знает как это реализовано в ironfit.ancorathemes.com ?

Цитата:

Сообщение от Rise (Сообщение 450499)

macik, особо в тему не вникал, но прогрузить (последовательно) картинки в кэш до старта галереи можно просто:

function preload(images, callback) {
	if (images.length) {
		var image = new Image();
		image.onload = image.onerror = function() {
			preload(images, callback);
		}
		image.src = images.pop();
	} else {
		callback();
	}
}
preload(['image3.jpg', 'image2.jpg', 'image1.jpg'], function(){ alert('galleryStart') });

пока идет фоновая прогрузка, пользователю, чтобы не скучал, можно что-то показать что идет процесс.

Может совсем не в тему, но также существуют всякие оптимизации (progressive/interlaced) самих картинок, что может дать более быстрое их отображение, типа как может видел когда при загрузке картинка сперва вроде мутная, а потом четкость догружается.

спасибо.
Ноту проблема не в этом. Сейчас мне не нравится поведение всей скрипт на основании requestAnimationFrame, setTimeout и т. д. то поведение этой анимации не подходит. Она то играет то обрывает ... то еще как то ...

requestAnimationFrame and preload images

macik,
вариант с предзагрузчиком от Rise,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style>
#foto_index{
  transition:all 3s ease;
   -webkit-transition:all 3s ease;
   -moz-transition:all 3s ease;
   -o-transition:all 3s ease;
  opacity: 1;
  background: url("http://img-fotki.yandex.ru/get/5640/35900228.10c/0_7388e_3ab59b4a_XL.jpeg.jpg") no-repeat center;
  z-index: -2;
  min-height: 600px;
  margin-top: -50px;
  margin-right: 0;
  margin-left: 0;
  -moz-background-size: 100%; /* Firefox 3.6+ */
    -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
    -o-background-size: 100%; /* Opera 9.6+ */
    background-size: 100%; /* Современные браузеры */
    background-size:cover;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var mas = [
      'http://img-fotki.yandex.ru/get/5640/35900228.10c/0_7388e_3ab59b4a_XL.jpeg.jpg',
      'http://1.bp.blogspot.com/-aleHkBUuqOI/VY0HrCytsXI/AAAAAAAAq1g/f2emGtdqdWo/s640/2015-06-05_0145.jpg',
      'http://www.fotki.ykt.ru/albums/userpics/2013/11-18/1384739526_image.jpg'
    ], i=1, a = performance.now();
function csaHead(b){
   if(b - a > 5000) {
    a = b;
    document.getElementById('foto_index').style.backgroundImage="url('"+mas[i]+"')";
 	i = ++i % mas.length;
  }

  requestAnimationFrame(csaHead)
}
function preload(images, callback) {
	if (images.length) {
		var image = new Image();
		image.onload = image.onerror = function() {
			preload(images, callback);
		}
		image.src = images.pop();
	} else {
		callback();
	}
}
preload(mas.slice(0), function(){ requestAnimationFrame(csaHead)});

});
</script>
</head>

<body>

<div id='foto_index'></div>



</body>
</html>

Рони, я сейчас тестирую ... Вроде лучше.
UP
Ну в Crom все работает отлично
в Firefox анимации нет, только редкий перебор.
в Safari старт работает хорошо, после ухода в фон, первый проход рвет потом опять все плавно.
Есть идея что надо останавливать анимацию когда окно не активно. Можно это как то сделать?

macik,
css анимация background - работает нормально только в хроме или фон можно анимировать нормально только в хроме.
в остальных только сменой картинок.

Цитата:

Сообщение от рони (Сообщение 450503)

Но а как у http://ironfit.ancorathemes.com работает везде?

macik,
там один блок заменяет другой --- но алгоритм тотже что тут в посте №35 только вместо картинок блоки

А можете подсказать как это сделать на блоках?

смена блоков с разным фоном с opacity

macik,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .foto_index .bg{
     position: absolute;
     width: 100%;
     height:  100%;
     opacity: 0;
    -moz-background-size: 100%; /* Firefox 3.6+ */
    -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
    -o-background-size: 100%; /* Opera 9.6+ */
    background-size: 100%; /* Современные браузеры */
    background-size:cover;
    box-sizing: border-box;
    transition: opacity .8s ease-in;
  }
  .foto_index .bg.show{
    opacity: 1;
  }

 .foto_index{
  width: 100%;
  position: relative;
  z-index: -2;
  min-height: 600px;
  margin-top: -50px;
  margin-right: 0;
  margin-left: 0;

}
  </style>

  <script>
  window.addEventListener("DOMContentLoaded", function() {
    [].forEach.call(document.querySelectorAll(".foto_index"), function(el) {
        var img = el.querySelectorAll(".bg"),
            len = img.length,
            i = len - 1,
            p = el.dataset.pause || 5E3;
        !function g() {
            img[i].classList.remove("show");
            i = ++i % len;
            img[i].classList.add("show");
            window.setTimeout(g, p)
        }()
    })
});
  </script>
</head>

<body>
<div class="foto_index" data-pause="3000">
  <div class="bg" style="background-image: url(http://img-fotki.yandex.ru/get/5640/35900228.10c/0_7388e_3ab59b4a_XL.jpeg.jpg)"></div>
  <div class="bg" style="background-image: url(http://1.bp.blogspot.com/-aleHkBUuqOI/VY0HrCytsXI/AAAAAAAAq1g/f2emGtdqdWo/s640/2015-06-05_0145.jpg)"></div>
  <div class="bg" style="background-image: url(http://www.fotki.ykt.ru/albums/userpics/2013/11-18/1384739526_image.jpg"></div>
</div>
</body>
</html>

Спасибо!
Как же это у вас лихо получается!!! Вы просто супер!
Я восхищаюсь такими, как Вы!
PS
поставил на тест, 5 минут теста в фоне, все ОК.