• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 99
  • Last Modified:

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
0
gabrielPennyback
Asked:
gabrielPennyback
  • 2
  • 2
1 Solution
 
Jan LouwerensSoftware EngineerCommented:
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

0
 
Jan LouwerensSoftware EngineerCommented:
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.
0
 
gabrielPennybackReliability Business Tools Analyst IIAuthor Commented:
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
0
 
gabrielPennybackReliability Business Tools Analyst IIAuthor Commented:
Forgot the link: http://www.dijitalrealm.com/JCMusic/SweetLittleRomanticsKisses.html. It's on a 10 second cycle.
0
Question has a verified solution.

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

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now