Как сделать плавный переход в js?

Question

[Макс Darkleviathan]

Есть картинка на фоне , которая меняется при помощи скрипта.
Не могу разобраться как написать плавную смену картинок чтоб работало и в firefox и в chrome.
И необходимо чтоб стартовало с первой картинки, которая прописана в скрипте. Сейчас сначала пустой фон, а потом уже появляются картинки по очереди.

Вот сам код:

(function() {
    var i = 0;
    var src = [
        '$picture2',
        '$picture3',
        '$picture4',
        '$picture1'
    ];
    var l = src.length;
    var t;
    
    for(i = 0; i < l; i++) {
        var img = new Image();
        img.src = src[i];
        img.onload = function() {
            delete this;            
        }
    }
    
    i = 0;
    t = setInterval(function() {
        if(i === l){
            i = 0;
        }
        document.body.style.background = 'url(' + src[i] + ') ';
        //document.body.style.transition = '3s';
        //document.body.style.mozTransition = '3s';
        document.body.style.backgroundSize = 'cover';
        
        
        i++;
    }, 6000);
})();

пробовал плавные переходы через transition, на chrome все работает а на firefox не хочет.
Знаю что можно как-то при помощи fadeOut\fadeIn

Answer 1

[RAX7]

Comments

[Макс Darkleviathan]

пишет
Use of undefined constant img - assumed 'img' (this will throw an Error in a future version of PHP)
Use of undefined constant src - assumed 'src' (this will throw an Error in a future version of PHP)
Undefined variable: imgsrc in

Использую версию php7+
Как быть в таком случае?

[RAX7]

Макс Darkleviathan, а причем здесь php? код написан на js для браузера

[Макс Darkleviathan]

RAX7, Вот и я не совсем понял.
Но выдает именно такую ошибку на сервере.
В песочнице конечно же такого нет.

[Пашенька]

Макс Darkleviathan, вы, видимо, javascript код не завернули в html тэг <script>...</script>...

[Макс Darkleviathan]

like-a-boss, Завернул конечно. Вывожу при помощи :

print "
<script>
............
</script>
";

Видимо img и src принимает за константу.

[Пашенька]

Макс Darkleviathan, да. Проще закрыть тэг php перед скриптом и открыть заново после него.
Ну или экранировать надо правильно кавычки. И у вас одинарные кавычки разные какого-то ляда.

[Макс Darkleviathan]

like-a-boss, мы про этот код говорим?

function loadImages(srcs) {
  return new Promise(done => {
    const result = [];
    const total = srcs.length;
    let loaded = 0;

    function onload(event, i) {
      loaded++;
      result[i] = event.type === 'error' ? new Error(event.target) : event.target;
 
      if (loaded === total) done(result);
    }

    for (let i = 0; i < total; i++) {
      const img = new Image();
      img.addEventListener('load', (event) => onload(event, i));
      img.addEventListener('error', (event) => onload(event, i));
      img.src = srcs[i];
    }
  });
}

async function fadeInOutImages(container, images, showDuration, startFrom = 0) {
  images = (await loadImages(images)).filter(img => !(img instanceof Error));
  const total = images.length;

  const els = images.map((img, i) => {
    const el = document.createElement('div');
    el.classList.add('image', 'hide');
    el.style.backgroundImage = `url('${img.src}')`;
    return el;
  });
  els.forEach((el) => container.appendChild(el));

  let cur = startFrom;
  let next = (cur + 1) % total;

  els[cur].classList.add('show');

  function tick() {
    els[cur].classList.remove('show');
    els[next].classList.add('show');
    cur = next;
    next = (cur + 1) % total;
    setTimeout(tick, showDuration);
  }
  setTimeout(tick, showDuration);
}

const images = [
  'https://placehold.it/500x200/F44336/FFFFFF?text=slide%200',
  'https://placehold.it/500x200/3F51B5/FFFFFF?text=slide%201',
  'https://placehold.it/500x200/009688/FFFFFF?text=slide%202',
  'https://placehold.it/500x200/607D8B/FFFFFF?text=slide%203',
];

fadeInOutImages(document.querySelector('.images'), images, 5000);

не вижу разных кавычек

[Пашенька]

Макс Darkleviathan, окей, это предпочтения автора этого кода. Я вам ответил: не вставляйте через php, если не знаете, что к чему.

[RAX7]

Макс Darkleviathan, подключи нормально скрипты на страницу через <script src="script.js"></script>, не мучай phpшку

[Макс Darkleviathan]

RAX7, получил

slide.js:33 Uncaught (in promise) TypeError: Cannot read property 'appendChild' of null
at slide.js:33
at Array.forEach ()
at fadeInOutImages (slide.js:33)

[RAX7]

Макс Darkleviathan, вставляй в конце body

<!-- ... -->
  <script src="script.js"></script>
</body>

[Макс Darkleviathan]

RAX7, Он там итак есть.

Answer 2

[Пашенька]

Действительно какая-то магия и в хроме транзишном работает. Но поведение файерфокса верно в данном случае. background-image - не анимируемое свойство.

Что вы пытаетесь удалить на онлоад? Оператор delete удаляет пропертиз у объектов.

setInterval - плохой таймер, но для начального прототипа сойдёт. В идеале нужно использовать requestAnimationFrame.

Вы должны понимать основную концепцию: для плавной смены картинок нужно, чтобы две картинки в момент перехода были видимыми. То есть нельзя просто вот так в одном элементе их перетосовывать. Нужно как минимум два элемента и смена opacity.

Comments

[Макс Darkleviathan]

Магия или нет, но очень путает.

А какая механика opacity от 0 до 1 относительно requestAnimationFrame ?

[Пашенька]

Макс Darkleviathan, requestAnimationFrame позволит анимировать что угодно, как угодно https://learn.javascript.ru/js-animation

Answer 3

[Роман Андреевич]

requestAnimationFrame вам в помощь.