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

Question

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

0

Привет, ниже мой JS-код для изменения фонового изображения каждые 30 секунд. кто-нибудь, пожалуйста, сообщите мне, есть ли способ изменить код, чтобы он соответствовал изображению в окне браузера (100%), а также если есть какой-либо JS, который я мог бы использовать в этом коде, чтобы изображения постепенно исчезали и выходили элегантно.

<script>
bgArr = ['images/bg1.jpg', 'images/bg2.jpg', 'images/bg3.jpg'];
bgCur = 0;
backgroundSwitch = function()
{
if (bgCur == bgArr.length) bgCur = 0;
document.body.style.backgroundImage = 'url('+ bgArr[bgCur++]+ ')';
}
window.setInterval(backgroundSwitch, 30000); // Switch every 30 seconds.
</script>

Спасибо всем

user3206866 18 янв. 2014, в 21:41

Источник

0

Не могли бы вы показать мне, как сделать как постепенное появление и подгонка к окну только в Javascript?
user3206866 18 янв. 2014, в 20:43

Теги:

javascript

html

css

background-image

2 ответа

Ещё вопросы

Не могли бы вы показать мне, как сделать как постепенное появление и подгонка к окну только в Javascript?

Albert Xing · Answer 1 · 2014-01-18T17-55-00.000Z

CSS3 представил background-size: cover. Это автоматически изменяет фоновое изображение, чтобы покрыть весь родительский элемент, либо масштабируя его по горизонтали, либо по вертикали для заполнения.

См. Запись в MDN.

background-size поддерживается всеми основными браузерами.

alex · Answer 2 · 2014-01-18T18-36-00.000Z

Установка в окно браузера должна быть достаточно простой. В зависимости от требований вашего браузера вы можете уйти с background-size: cover в вашем CSS (см. Ответ Альберта).

Что касается анимации, вы можете либо использовать переходы CSS, либо запускать их через JavaScript (обычно, изменяя класс) или использовать JavaScript для этого.

Если вы используете JavaScript, обязательно установите продолжительность, а затем lerp (или какой-либо другой метод) между состояниями.

Это общая идея...

var img = document.getElementById("fade");

var fadeLength = 5500;
var opacity = 0;
var startTime = Date.now();

requestAnimationFrame(function me() { 
    // It faded in, stop animating!
    if (opacity >= 1) {
       return;   
    }

    opacity = (Date.now() - startTime) / fadeLength;
    img.textContent = opacity;    
    img.style.opacity = opacity;        
    requestAnimationFrame(me);
});

jsFiddle.

Не могли бы вы показать мне, как сделать как постепенное появление и подгонка к окну только в Javascript?
@ user3206866 Работаем над этим сейчас :)
спасибо, также, как я могу изменить свое имя от пользователя ха-ха
Привет, спасибо, извините за глупость, но как это вписывается в мой текущий код, я просто изучаю все это, и я не вижу, как он подходит.
@ user3206866 Это базовая отправная точка для изучения. Идея состоит в том, чтобы использовать анимацию времени для анимации, чтобы обеспечить представление анимации независимо от скорости компьютера / обновления экрана.