I Am a Child of God: Changing Background Image in Fade In and Out

Changing Background Image in Fade In and Out

Check out this Changing Background Image in Fade In and Out using JavaScript for your web design. Just change the image link of your selection, and you're good to go. Here's the script below -

<style>
body { margin:0; }

/* Background layers */

.bg {
position:fixed;
inset:0;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
transition:opacity 2.5s ease-in-out;
z-index:-2;
}

#bg1 { opacity:1; }
#bg2 { opacity:0; }
</style>

<script>
const images = [
"https://churchofjesuschristtemples.org/assets/img/temples/cebu-city-philippines-temple/cebu-city-philippines-temple-4000.jpg",
"https://churchofjesuschristtemples.org/assets/img/temples/cebu-city-philippines-temple/cebu-city-philippines-temple-33251.jpg",
"https://churchofjesuschristtemples.org/assets/img/temples/cebu-city-philippines-temple/cebu-city-philippines-temple-3999.jpg",
"https://churchofjesuschristtemples.org/assets/img/temples/manila-philippines-temple/manila-philippines-temple-44347.jpg",
"https://churchofjesuschristtemples.org/assets/img/temples/manila-philippines-temple/manila-philippines-temple-44348.jpg",
"https://churchofjesuschristtemples.org/assets/img/temples/manila-philippines-temple/manila-philippines-temple-44350.jpg",
"https://churchofjesuschristtemples.org/assets/img/temples/manila-philippines-temple/manila-philippines-temple-44351.jpg",
"https://churchofjesuschristtemples.org/assets/img/temples/manila-philippines-temple/manila-philippines-temple-44352.jpg",
"https://churchofjesuschristtemples.org/assets/img/temples/manila-philippines-temple/manila-philippines-temple-7439.jpg",
"https://churchofjesuschristtemples.org/assets/img/temples/urdaneta-philippines-temple/urdaneta-philippines-temple-45863.jpg",
"https://churchofjesuschristtemples.org/assets/img/temples/urdaneta-philippines-temple/urdaneta-philippines-temple-45864.jpg",
"https://churchofjesuschristtemples.org/assets/img/temples/urdaneta-philippines-temple/urdaneta-philippines-temple-45865.jpg",
"https://churchofjesuschristtemples.org/assets/img/temples/urdaneta-philippines-temple/urdaneta-philippines-temple-45866.jpg",
"https://churchofjesuschristtemples.org/assets/img/temples/urdaneta-philippines-temple/urdaneta-philippines-temple-45872.jpg",
"https://churchofjesuschristtemples.org/assets/img/temples/urdaneta-philippines-temple/urdaneta-philippines-temple-45873.jpg",
"https://churchofjesuschristtemples.org/assets/img/temples/urdaneta-philippines-temple/urdaneta-philippines-temple-45874.jpg",
"https://churchofjesuschristtemples.org/assets/img/temples/urdaneta-philippines-temple/urdaneta-philippines-temple-45876.jpg",
"https://churchofjesuschristtemples.org/assets/img/temples/alabang-philippines-temple/alabang-philippines-temple-66139.jpg",
"https://churchofjesuschristtemples.org/assets/img/temples/alabang-philippines-temple/alabang-philippines-temple-65306.jpg",
"https://churchofjesuschristtemples.org/assets/img/temples/alabang-philippines-temple/64760.jpg",
"https://churchofjesuschristtemples.org/assets/img/temples/alabang-philippines-temple/alabang-philippines-temple-8191.jpg"
];

// Create two background layers
const bg1 = document.createElement("div");
const bg2 = document.createElement("div");

bg1.id = "bg1";
bg2.id = "bg2";

bg1.className = "bg";
bg2.className = "bg";

document.body.prepend(bg1);
document.body.prepend(bg2);

let showingFirst = true;

function randomImage(){
return images[Math.floor(Math.random()*images.length)];
}

function setBG(el,img){
el.style.backgroundImage =
`linear-gradient(to right,
#F5DFDC30,
#F5EBDC80,
#F3F5DC80,
#DCF5DF80,
#DCE6F580,
#F5DCF330),
url('${img}')`;
}

// Initial image
setBG(bg1, randomImage());
setInterval(()=>{
const next = randomImage();
if(showingFirst){
setBG(bg2,next);
bg2.style.opacity=0.5;
bg1.style.opacity=0;
}else{
setBG(bg1,next);
bg1.style.opacity=0.5;
bg2.style.opacity=0;
}
showingFirst=!showingFirst;
},8000);
</script>

No comments:

Subscribe to: Post Comments (Atom)