PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact

Background Image Fade In / Out

Door - Diov - op 14-08-2013 16:53
2.020 views
Hoi,

Ik wil dat de achtergrond van de site om de 20 seconden ofzo verspringt naar een andere afbeelding.
Dit werkt half:

	var images = ['http://www.ngewall.com/images/2013/07/amazing-sunset-landscape-pictures-wallpapers-nature-amp-landscape.jpg', 'http://hdwallpaperfreedownload.com/wp-content/gallery/white-landscape-hd/white-landscape-wallpaper-hd-1.png', 'http://duggal.com/connect/wp-content/uploads/2013/06/Landscape-Nature-for-Wallpaper-Dekstop-.jpg'];
	var i = 0;
	
	setInterval(function(){
		$('#wrap').animate({opacity: 0}, 1000, function(){
		    $('#wrap').css( 'background-image', function() {
		        if (i >= images.length) {
		            i=0;
		        }
		        return 'url(' + images[i++] + ')'; 
		    });
		 }).animate({opacity: 1}, 2000);
	}, 5000);


(Afbeeldingen zijn gewoon van internet als test !!)
Dit werkt, maar nu gaat ook al de content (tekst, divjes) eventjes weg ...

Kan dit opgelost worden?
Hij doet maar 1 ding verkeerd:
Er is geen effect, ...

En ik
Frank Nietbelangrijk
14-08-2013 19:15 gewijzigd op 14-08-2013 19:16 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body {
	transition: background 1.25s linear;
	background-image:url(http://duggal.com/connect/wp-content/uploads/2013/06/Landscape-Nature-for-Wallpaper-Dekstop-.jpg);
	font-size:36px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
    var images = ['http://www.ngewall.com/images/2013/07/amazing-sunset-landscape-pictures-wallpapers-nature-amp-landscape.jpg', 'http://hdwallpaperfreedownload.com/wp-content/gallery/white-landscape-hd/white-landscape-wallpaper-hd-1.png', 'http://duggal.com/connect/wp-content/uploads/2013/06/Landscape-Nature-for-Wallpaper-Dekstop-.jpg'];
    var i = 0;
    
	$(document).ready(function() {
		setInterval(function(){
				$('body').css( 'background-image', function() {
					if (i >= images.length) {
						i=0;
					}
					return 'url(' + images[i++] + ')'; 
				});
		}, 5000);
	});
</script>
</head>

<body>
<div id="wrap">fjajfpjfpiajpi</div>
</body>
</html>
- Diov -
15-08-2013 11:28
Hi, bedankt.
Maar hoe werkt dat dan met een effect?
Frank Nietbelangrijk
15-08-2013 19:08 gewijzigd op 15-08-2013 19:09
Diov, Ik heb hier geen firefox, maar probeer het eens met:

transition: background-image 1.25s linear;


Toevoeging op 15/08/2013 19:10:19:

ps bij mij doet hij het wel zei het me een witte flits af en toe (chrome)
- Diov -
15-08-2013 19:51
@ Frank, bij mij doet hij het.

Die witte flits is omdat hij de afbeeldingen nog moet laden denk ik, maar dat kan je oplossen door ze vooraf te laden.

Alleen bij Firefox, en IE werkt het niet.
Ik heb nu ook dit gedaan:

     -webkit-transition: background 1.25s linear;
       -moz-transition: background 1.25s linear;
        -ms-transition: background 1.25s linear;
         -o-transition: background 1.25s linear;
            transition: background 1.25s linear;


Toevoeging op 15/08/2013 19:56:38:

Vond iets op internet:

Found the answer in the MDN docs.

http://oli.jp/2010/css-animatable-properties/#background-image

    background-image

    This is still a little up in the air, with “only gradients” in the current Working Draft, no background-image at all in the current Editor’s Draft, and “Animatable: no” for background-image in CSS Backgrounds and Borders Module Level 3 Editor’s Draft. However, support has appeared in Chrome 19 Canary, and this is something that designers want. Until widespread support arrives this can be faked via image sprites and background-position or opacity.'

At this time I have found that nobody actually supports gradients (Chrome 17, FF 12, IE9). Only Chrome supports background-image (that's why it doesn't work in FF for me).


Dusja, hoe los ik dit op :O?
R
Rodney Broekhuijs
10-02-2014 12:49
Ik zou aan dit script graag background-size en no-repeat willen meegeven, maar dat werkt niet.
zijn er ook nog andere opties?
Mich
10-02-2014 14:01
@Rodney; zoek eens naar jQuery CSS

    var images = ['http://www.ngewall.com/images/2013/07/amazing-sunset-landscape-pictures-wallpapers-nature-amp-landscape.jpg', 'http://hdwallpaperfreedownload.com/wp-content/gallery/white-landscape-hd/white-landscape-wallpaper-hd-1.png', 'http://duggal.com/connect/wp-content/uploads/2013/06/Landscape-Nature-for-Wallpaper-Dekstop-.jpg'];
    var i = 0;
    
    $(document).ready(function() {
        setInterval(function(){
      $('body').css( { 'background-repeat' : 'no-repeat', 'background-size' : '100px 100px', 'background-image': function() {
                    if (i >= images.length) {
                        i=0;
                    }
                      return 'url(' + images[i++] + ')'; 
                }
				});
        }, 5000);
    });

Reageren

Inloggen om te reageren