How can I loop the background into different images?
Question
***I started creating a new project in VSCode and saved a bunch of images in a folder. My idea is to change every 6 seconds the background of the whole tab. How can I use a for loop or any other tool in JavaScript to make the background change every set time and that the transition between images isn't abrupt. When the image changes, it starts to disappear and becomes the next image. All of my images are labeled, the first one is BG-1, the second one BG-2, and so on so forth.I'll leave the HTML and the two single lines of CSS that affect the background, the rest is irrelevant. Hope you guys can help me out ***
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<title>What's out there</title>
<link href="https://fonts.googleapis.com/css2?family=Varta&display=swap" rel="stylesheet">
<style>
</style>
<script>
</script>
<link rel='stylesheet' href='styles.css' />
</head>
<body>
<header class="Header">
<nav class="Header-Container">
<ul class="Blog">
<li><a href="#" class="Links">Blog</a></li>
</ul>
<ul class="Menu">
<li><a href="#">Home</a></li>
<li><a href="#">Q&A</a></li>
<li><a href="#">Images</a></li>
</ul>
</nav>
</header>
<article class="Tab-Body">
<h1> What's out There</h1>
<p> Discover the secrets of the universe</p>
<p> Observe astonishing images of the furthest away objects</p>
<p> Ask about the most fascinating topics</p>
<button id="HomeTabButton"><a href="#"> List of contents</a></button>
</article>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*Standard for everything*/
body {
font-size: 18px;
line-height: 1.8em;
font-weight: 300;
font-family: 'Varta', sans-serif;
color: white;
background-image: url('Images/BG-1.jpg');
}
2 answers
solution1
0 2020-07-26 03:14:06
You can switch the background image by writing some simple JavaScript.
let num = 1;
setInterval(() => {
document.body.style.backgroundImage = `./Image/BG-${num}.jpg`;
num++; //switch to the next image
num = num % 2 + 1 // assume you have 2 images only
}, 6000);
solution2
0 ACCPTED 2020-07-26 03:51:11
You can transition through background images using <img> and CSS opacity .
While it is not yet part of the specification to animate fading background-image , we can—however—animate opacity on <img> . We can also download all of the images in parallel using loading="eager" , meanwhile CSS only downloads images when it is visible on screen.
let curImg = 1; let bgImgs = document.querySelectorAll(".bg-imgs img"); setInterval(() => { /* if first image (curImg = 0), then unload last image */ let prevImg = curImg? curImg-1: bgImgs.length-1; bgImgs[prevImg].style.opacity = 0; bgImgs[curImg].style.opacity = 100; curImg++; /* if last image, go back to first image */ if (curImg >= bgImgs.length) { curImg = 0; } / *every 10 seconds */ }, 10000);
.bg-imgs img { position: absolute; z-index: -1; height: 100%; opacity: 0%; transition-delay: 5s; transition: opacity 5s; }
<div class="bg-imgs" aria-hidden="true"> <:--first img to be visible--> <img src="http.//lorempixel:com/1024/1024/animals/1/" loading="eager" style="opacity:100%"> <img src="http.//lorempixel:com/1024/1024/animals/2/" loading="eager"> <img src="http.//lorempixel:com/1024/1024/animals/3/" loading="eager"> <img src="http.//lorempixel.com/1024/1024/animals/4/" loading="eager"> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.