Html Code:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<meta charset="utf-8">
<title>Demo by Roko C.B.</title>
</head>
<body>
<div id="bg"></div>
</body>
</html>
Css Code:
*{margin:0;padding:0;
}
html, body{height:100%;width:100%;}
body{
font:normal normal 200 118.6%/1.2 "Helvetica Neue", "Arial Narrow", Helvetica, Arial, sans-serif;
color:#fff;
}
body, #bg{
background: #000 none 0 50% / cover no-repeat;
}
#bg, #page{
position:absolute;
overflow:auto; /* ADDED! */
top:0;
bottom:0;
left:0;
right:0;
width:100%;
height:100%;
}
#content{
margin: 0 auto;
width:800px;
background:rgba(255,255,255,0.4);
border:5px dashed;
height:3000px;
}
#page{ background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACBJREFUeNpiZGBg6GGAgEUggokBDTACsR6yAIYKgAADAE0GAWM9RhAyAAAAAElFTkSuQmCC);
}
Js Code:
var images = [
"http://i.imgur.com/squw4Fw.jpg",
"http://i.imgur.com/XyX3hgS.jpg",
"http://i.imgur.com/YB58Zzs.jpg"
];
var $body = $("body"),
$bg = $("#bg"),
n = images.length,
c = 0; // Loop Counter
// Preload Array of images...
for(var i=0; i<n; i++){
var tImg = new Image();
tImg.src = images[i];
}
$body.css({backgroundImage : "url("+images[c]+")"});
(function loopBg(){
$bg.hide().css({backgroundImage : "url("+images[++c%n]+")"}).delay(3000).fadeTo(1200, 1, function(){
$body.css({backgroundImage : "url("+images[c%n]+")"});
loopBg();
});
}());
No comments:
Post a Comment