Solved

Fading background images in and out

Posted on 2016-08-16
4
81 Views
Last Modified: 2016-08-18
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
Comment
Question by:gabrielPennyback
  • 2
  • 2
4 Comments
 
LVL 5

Expert Comment

by:Jan Louwerens
ID: 41758694
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
 
LVL 5

Accepted Solution

by:
Jan Louwerens earned 500 total points
ID: 41758698
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
 
LVL 1

Author Closing Comment

by:gabrielPennyback
ID: 41761433
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
 
LVL 1

Author Comment

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

Featured Post

SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question