dio-v
1/29/2016 - 2:06 PM

simple div background fader slider

simple div background fader slider

simple div background fader.html
content_copyfile_download
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>The all mighty div</title>
<style>
#banner {
	width:80%;
	height:600px;
	margin:0 auto;
	position:relative;

	}
.divForPadding{
	position:relative;
	padding:4em;
	color:#fff;
	text-shadow: 2px 2px 2px #000;	
}
.backgroundFader{
	position:absolute;
	z-index:-2;
	width:100%;
	height:100%;
	background-image:url("http://scienceblogs.com/lifelines/files/2014/01/13243547332073393725diving-with-great-white-sharks.jpg");
	background-attachment: fixed;
	background-position:  top center;
	background-repeat: no-repeat;
	background-size: cover; 		
}
.backgroundFader.new{
	opacity:0;
	z-index:-1;
}
	img.stupid {max-width:50%; max-height:200px}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$( document ).ready(function() {
	$('.backgroundFader').each(function(){
		var vT = $(this);
		var arrImages = ['https://coubsecure-a.akamaihd.net/get/b4/p/coub/simple/cw_timeline_pic/f57234f62a3/7838b918a5419830088c0/big_1411415882_1397234707_image.jpg', 'http://massappeal.com/wp-content/uploads/2014/01/buttse.jpg', 'http://vignette2.wikia.nocookie.net/dragonball/images/5/5c/Nyan_cat.png/revision/latest?cb=20130430195139'];
		var vNum = 0;
		var vWait = 4000;
		var vFadeDuration = 1000;
    simpleslider();
    var vFader = setInterval(function() { simpleslider() }, vWait);
    function simpleslider() {
        console.log('slider called');
        var newBg = $('<div>').addClass('backgroundFader new').css({ 'background-image': 'url(' + arrImages[vNum] + ')' });
        vT.after(newBg);
        newBg.animate({ 'opacity': '1' }, vFadeDuration, function () {
            vT.css({ 'background-image': 'url(' + arrImages[vNum] + ')' });
            newBg.remove();
            vNum++;
            if (vNum === arrImages.length) {
                vNum = 0;
            }
        });
    }
	
	});
});

</script>
</head>

<body>

    <div id="banner">
    	<div class="backgroundFader">
	    </div>
        <div class="divForPadding">
            <h1>Hello Dio</h1>
            <p>It would be nice if this background picture would fade into another.</p>
            <p>Like,<br>
            background1.jpg<br>
            background2.jpg<br>
            background3.jpg<br>
            background4.jpg<br>
            background5.jpg<br>
            </p>
            <p>But i can't do it. I'm too stupid.</p>
            <img src="http://www.simpsoncrazy.com/content/pictures/homer/homer-pythagoras.png" class="stupid"/>
            <p>W.</p>
        </div>
	</div>
</body>
</html>