Experts Exchange connects you with the people and services you need so you can get back to work.

Fading background images in and out

Re: www.dijitalrealm.com/JCMusic/BGSlideShow.html
I have a simple code (the easiest one for me to understand and implement among the resources I found online) that toggles between 2 background images. How do I modify the code so that the images fade in over each other for about 1 second? Also how do i eliminate the 5 sec pause before the first image appears? If there's an altogether different code that accomplished my goal, that of course would be fine as well.

body{
background-attachment:fixed;
background-repeat: no-repeat;
background-position: center center;
}
</style>

<script language="JavaScript1.2">
var bgimages=new Array()
bgimages[0]="images/RitaHayworthCameo.jpg"
bgimages[1]="images/GirlWithHeart.jpg"

//preload images
var pathToImg=new Array()
for (i=0;i<bgimages.length;i++){
pathToImg[i]=new Image()
pathToImg[i].src=bgimages[i]
}

var inc=-1

function bgSlide(){
if (inc<bgimages.length-1)
inc++
else
inc=0
document.body.background=pathToImg[inc].src
}

if (document.all||document.getElementById)
window.onload=new Function('setInterval("bgSlide()",5000)')

</script>

</head>

<body>
</body>

Open in new window

Thanks!
John

gabrielPennyback

Asked: 2016-08-16

Advertise Here

1 Solution

LVL 8

Jan LouwerensSoftware EngineerCommented: 2016-08-16

To eliminate the 5 second lapse, you'll need to change this line of code:

var inc=-1

Open in new window

to these two lines:

var inc=0;
document.body.background=pathToImg[0].src

Open in new window

LVL 8

Jan LouwerensSoftware EngineerCommented: 2016-08-16

To make them fade in over each other is a much bigger problem. Since your body element can only have one background image, you can't fade them in over each other (this would require both backgrounds at the same time.)

What you can do is have 2 divs within the body tag, that take up the full space of the body tag (ie, width and height both 100%), each one of them having a background image. They can both start with full opacity (which would mean we would only see the image on top), then, over a 1 second period, animate the opacity of the top image down to 0. Then you could swap the z-index of the divs (putting the top one on the bottom), then changing that div's background to the next image, and setting the opacity back to full. Then just repeat the process once every 5 seconds.

LVL 1

gabrielPennybackReliability Business Tools Analyst IIAuthor Commented: 2016-08-18

Thanks, Jan. I found something online based on your parameters and was able to tweak it so that it works with other content. You can see the page and the source code here. Please let me know if there's a way to make it more elegant and "best practices" as possible.

Thanks!
John

LVL 1

gabrielPennybackReliability Business Tools Analyst IIAuthor Commented: 2016-08-18

Forgot the link: http://www.dijitalrealm.com/JCMusic/SweetLittleRomanticsKisses.html. It's on a 10 second cycle.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Fading background images in and out

Join & Write a Comment Already a member? Login.

Featured Post