Solved

Fading background images in and out

Posted on 2016-08-16
4
74 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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses four methods for overlaying images in a container on a web page
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

791 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