How to create a slide of background images using Pure Javascript or a pure Javascript library

Question

I'd like to make the below in a way that I can have two images slide in the background but have I'm stuck on how to implement a slide of background images. Kindly assist, any assistance will be highly appreciated.

 #header-image { background-image: url('/images/photography1.jpg'); width: 100%; border: none; padding: 0; margin: 0; background-position: bottom center; background-repeat: no-repeat; background-size: cover; height: 100vh; position: relative; }

 <div id="header-image"> <div class="overlay" data-aos="fade-down-right"> <h1>Photography Logo</h1> </div> </div>

Answer 1

I made an example for you using javascript, as well as modified your html and css. Was such a result necessary? If you have any questions, please let me know.

 let anime = document.querySelector('#header-image'); var step = 0; function animate() { if (step > -200) { anime.style.transform = 'translateX('+ step +'vw)'; } else { anime.style.transform = 'transformX(100vw)'; step = 100; } } setInterval(function () { step = step - 100; animate(); }, 5000);

 body { padding: 0; margin: 0; } #header { overflow: hidden; } #header-image { border: none; width: 200vw; height: 100vh; transition: 1s; display: flex; } #photo_section_one { background-image: url('https://img.desktopwallpapers.ru/newyear/pics/wide/1920x1200/5f7ff83acdb7b743fb61468954e9c511.jpg'); width: 100vw; background-position: bottom center; background-repeat: no-repeat; background-size: cover; height: 100%; } #photo_section_two { background-image: url('https://lh3.googleusercontent.com/proxy/N_97o7XR3tJd8Thp4vFQxXqqQVMSgBNhjGlvvHa9bDnpW-i4v6J9EElWWMSC8qumCbDAfvAjroBDWBu8F1HPl-hZX1BsYOk-wDNO26pT19W90o8n22aABvQ'); width: 100vw; background-position: bottom center; background-repeat: no-repeat; background-size: cover; height: 100%; }

 <div id="header"> <div id="header-image"> <div id="photo_section_one"> <div class="overlay" data-aos="fade-down-right"> <h1>Photography Logo</h1> </div> </div> <div id="photo_section_two"> <div class="overlay" data-aos="fade-down-right"> <h1>Photography Logo</h1> </div> </div> </div> </div>

Second solution using an array of images. The images change as on the site you showed.

 let anime = document.querySelector('#header-image'); let images = ['https://vjoy.cc/wp-content/uploads/2019/08/1-39.jpg', 'https://img.desktopwallpapers.ru/newyear/pics/wide/1920x1200/5f7ff83acdb7b743fb61468954e9c511.jpg']; let index = 0; setInterval(function(){ anime.style.backgroundImage = 'url(' + images[index] + ')'; index++; if (index >= images.length) { index = 0; } }, 5000);

 * { padding: 0; margin: 0; } #header { overflow: hidden; } #header-image { border: none; height: 100vh; transition: 1s; background-image: url('https://img.desktopwallpapers.ru/newyear/pics/wide/1920x1200/5f7ff83acdb7b743fb61468954e9c511.jpg'); width: 100%; background-position: bottom center; background-repeat: no-repeat; background-size: cover; }

 <div id="header"> <div id="header-image"> <div id="photo_section_one"> <div class="overlay" data-aos="fade-down-right"> <h1>Photography Logo</h1> </div> </div> </div> </div>

Answer 2

As far as I'm aware you cannot do exactly what you are asking for. But, you can create something similar though z-index and absolute positioning, some css, and some js. You would have to create a div behind the text and animate it using css, while using some js to make it continuously loop.

 setInterval(function() { if (document.getElementsByClassName("slide-pos-1")[0].= undefined) { document.getElementsByClassName("background-slide")[0].classList.add("slide-pos-2") setTimeout(function() { document.getElementsByClassName("background-slide")[0].classList.remove("slide-pos-1") document.getElementsByClassName("background-slide")[0].classList,remove("slide-pos-2") }. 1500) } else { document.getElementsByClassName("background-slide")[0].classList,add("slide-pos-1") } }, 6000)

 html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }.background-slide { position: absolute; top: 0; left: 0; width: 300%; height: 100%; display:flex; transform:translate(0,0); transition: transform 0s ease-out; }.slide-pos-1{ transform:translate(calc(-100% / 3),0); transition: transform 1s ease-out; }.slide-pos-2{ transform:translate(calc(-200% / 3),0); transition: transform 1s ease-out; }.header-image { width: 100%; height: 100%; }.overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }.image { flex:1; } img { object-fit: cover; width:100%; height:100%; margin:0; }

 <div class="header-image"> <div class="background-slide slide-pos-1"> <div class="image"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png" /></div> <div class="image"><img src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" /></div> <div class="image"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png" /></div> </div> <div class="overlay"> <h1>Photography Logo</h1> </div> </div>

Also, this one doesn't slide the text along with the image, and the slide direction is the same. Credit of s.kuznetsov for making me realize that and revise my answer.