Перемещение фоновых изображений в петле

Question

Я хотел бы иметь движущееся фоновое изображение на моей диагонали страницы точно так же, как в следующем [веб-сайт] [1] и перелистывающие элементы, такие как «Разработчик сайтов», «Консультант по SEO», пожалуйста, предложите, как добиться этого эффекта.

Answer 1

Существует много вариантов этого.

<div></div>

div { 
 
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Fonte_Gaia_-_she_wolf_detail.jpg/500px-Fonte_Gaia_-_she_wolf_detail.jpg"); 
 
    background-repeat:no-repeat; 
 
    background-attachment:fixed; 
 
    background-size:cover; 
 
    background-position:center-top; 
 
    background-position-x: 50%; 
 
    background-position-y: 0%; 
 
    -webkit-animation: zoomin 5s 1; 
 
} 
 

 
@-webkit-keyframes zoomin { 
 
    0% { 
 
     -webkit-transform: scale(1); 
 
    } 
 
    100% { 
 
     -webkit-transform: scale(2); 
 
    } 
 

 
}

Answer 2

(Это, чтобы понять, как изменить фоновое изображение в цикле. Чтобы увидеть, как двигаться, см @ ответ Пабло)

См this fiddle
ли это используя массив для хранения ссылок и прохождения через них, используя следующий javascript:

function changeBGImage() { 
    document.getElementById("main").style.backgroundImage = "url('" + images[next] + "')"; 
    next++; 
    next %= 3; 
} 

P.S. Используется 3, так как это количество изображений в массиве