garevn Posted August 6, 2013 Share Posted August 6, 2013 I dont know how to fade in through this.. I just need to simple fade in the next coming image. <script language="JavaScript"> var john=['0.jpg','1.jpg','2.jpg'];for (var img,pic=0;pic<john.length;pic++){img=john[pic];john[pic]=new Image();john[pic].src=img;}var bac=0,to=null;function ImageRotate(){bac=++bac%john.length;document.getElementById('name').style.backgroundImage='url('+john[bac].src+')';to=setTimeout(function(){ ImageRotate(); },2000);}</script></head><body id="name" onLoad="ImageRotate();"></body></html> Link to comment Share on other sites More sharing options...
justsomeguy Posted August 6, 2013 Share Posted August 6, 2013 For fading you need to use a function that alters the CSS opacity of the image, which gets called every few milliseconds to change the opacity a little bit each time. You would use setTimeout or setInterval to do that, like you're using already. Several libraries like jQuery automate things like that where you only need to call one function to do a fade, but under the hood that's how they do it. Link to comment Share on other sites More sharing options...
garevn Posted August 7, 2013 Author Share Posted August 7, 2013 (edited) At the moment i succeded the rotation images background. And the fadeIn-fadeOut at the content of the body... But i need to fadeIn-FadeOut the background images not the content of body.. I am spaced out.. <script language="JavaScript"> var john=['0.jpg','1.jpg','2.jpg'];for (var img,pic=0;pic<john.length;pic++){img=john[pic];john[pic]=new Image();john[pic].src=img;}var bac=0;function ImageRotate(){bac=++bac%john.length;document.getElementById('name').style.backgroundImage='url('+john[bac].src+')';setTimeout(function(){ImageRotate();},5000);$('body').fadeOut("slow");$('body').fadeIn("slow");}</script></head><body id="name" onLoad="ImageRotate();"> Edited August 7, 2013 by garevn Link to comment Share on other sites More sharing options...
justsomeguy Posted August 7, 2013 Share Posted August 7, 2013 Background images do not support opacity, opacity doesn't make sense for a background image. You might be able to simulate it, for example by putting an element over the background that is white, and fading that element in. It will appear like the background is fading to white. You can set the opacity on an entire element that has a background image, but it's going to affect everything in that element also. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now