1

Aloha Stockoverflow.

In advance, thank you! I am trying to modify my randomly changing background on my webpage, to add a FADE effect, so the change from 1 background to another is not so sudden and sharp. I have tried to search through the web endlessly for a solution to my issue, but it all points towards adding a jQuery plugin which I would preferably avoid if it is possible.

My working code is as follows and needs to have added some kind of fadein / fadeout effect.

<script type="text/javascript"> var num; var temp=0; var speed=5000; /* this is set for 5 seconds, edit value to suit requirements */ var preloads=[]; /* add any number of images here */ preload( 'images/bg1.jpg', 'images/bg2.jpg', 'images/bg3.jpg', 'images/bg4.jpg', 'images/bg5.jpg' ); function preload(){ for(var c=0;c<arguments.length;c++) { preloads[preloads.length]=new Image(); preloads[preloads.length-1].src=arguments[c]; } } function rotateImages() { num=Math.floor(Math.random()*preloads.length); if(num==temp){ rotateImages(); } else { document.body.style.backgroundImage='url('+preloads[num].src+')'; temp=num; setTimeout(function(){rotateImages()},speed); } } if(window.addEventListener){ window.addEventListener('load',rotateImages,false); } else { if(window.attachEvent){ window.attachEvent('onload',rotateImages); } } </script>

Thank you very much for taking the time to look at it. :)

Improve this question

1 Answer 1

Reset to default
1

How to do it without plugins:

  • Use 2 layers for the background image, position them on top of each other.
  • Init the page with the first image on the bottom layer, make the top layer invisible (using CSS opacity property, make sure to Google this, different browsers use different approaches).

When fading:

  • Set the new image for the top layer.
  • Use a short, looping (frameduration < 40ms) setTimeout to increment the opacity of your top layer to 1. Use increments of 1/(speed/frameduration).
  • When comletely faded in, set the bottom layer to use the new (now visible) image, and set the top layer to opacity 0.

Like this:

<html> <head> <script type="text/javascript"> var num; var current=0; var speed=5000; /* this is set for 5 seconds, edit value to suit requirements */ var fps = 25; var fadeDuration = 1000; var opacityIncrement = 1/(fadeDuration/(1000/fps)); var preloads=[]; var topLayerOpacity = 0; var topLayer = document.createElement("div"); var bottomLayer = document.createElement("div"); setOpacity(topLayer, 0); /* add any number of images here */ preload( 'images/bg1.jpg', 'images/bg2.jpg', 'images/bg3.jpg', 'images/bg4.jpg' ); function loadComplete(){ //add layers to background div document.getElementById('backgroundContainer').appendChild(bottomLayer); document.getElementById('backgroundContainer').appendChild(topLayer); rotateImages(); } function preload(){ //preload images for(var c=0;c<arguments.length;c++) { preloads[preloads.length]=new Image(); preloads[preloads.length-1].src=arguments[c]; } } // selecte new random image from preloads and start fade-in function rotateImages() { num=Math.floor(Math.random()*preloads.length); //don't select current image if(num==current){ rotateImages(); } else { topLayer.style.backgroundImage = 'url('+preloads[num].src+')'; current=num; //start fade-in fadeIn(); setTimeout(function(){rotateImages()},speed); } } // fade in topLayer function fadeIn(){ if (topLayerOpacity < 1){ topLayerOpacity += opacityIncrement; setOpacity(topLayer, topLayerOpacity);// opacityIncrement); setTimeout(fadeIn, 1000/fps); }else{ fadeInComplete(); } } //return opacity for element function getOpacity(el){ alert (el.style.opacity); return el.style.opacity; } //sets opacity on element function setOpacity(el, val){ el.style.opacity = val; el.style.filter = 'alpha(opacity=' + val*100 + ')'; } //called when fadeIn completed function fadeInComplete(){ bottomLayer.style.backgroundImage = topLayer.style.backgroundImage; topLayerOpacity = 0; setOpacity(topLayer, topLayerOpacity); } if(window.addEventListener){ window.addEventListener('load',loadComplete,false); } else { if(window.attachEvent){ window.attachEvent('onload',loadComplete); } } </script> <style type="text/css"> #backgroundContainer{ width:100%; height:100%; position:absolute; /*background-color:green;*/ } #backgroundContainer div{ width:100%; height:100%; position:absolute; top:0; } .page { width:100%; text-align:center; position:absolute; } .contents{ width:400px; margin:0 auto; background-color:lightblue; } </style> </head> <body> <!-- holds background layers --> <div id="backgroundContainer"></div> <!-- substitutes for 'body' on this webpage --> <div class="page"> <!-- contents for your webpage, through css centered within page-div --> <div class="contents"> <p>Contents</p> </div> </div> </body> </html>

OR

Use jQuery/mootools/script.aculo.us/...

Best of luck!

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Okay, I should have pointed out, I am no shark to CSS nor HTML. I did research on opacity before asking the question and I remember it required some different steps to make it work in all browsers. I have no clue how to use 2 layers. :/ I can program Java but the above code is not my work, so I would need a more extensive / childlike explanation or simply the code. :s Thanks for your reply by the way! @arne

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.