images fade in on click,scroll,resize

05/images-mwapi.js

@@ -14,8 +14,8 @@ $.ajax({
 	    var img_url = pages[key].imageinfo[0].thumburl;
 	    var img_w = pages[key].imageinfo[0].thumbwidth;
 	    var img_h = pages[key].imageinfo[0].thumbheight;
-	    var img_max_left = window_size.w;// - img_w;
+	    var img_max_left = window_size.w - img_w;
-	    var img_max_top =  window_size.h;// - img_h;
+	    var img_max_top =  window_size.h - img_h;
 	    var img_pos_left = ( getRandom(img_max_left).toString() )+"px";
 	    var img_pos_top = ( getRandom(img_max_top).toString() )+"px";
 	    
@@ -27,9 +27,9 @@ $.ajax({
 		.css('z-index', (getRandom(pages.length)).toString() ,'!important')
 		.css('display','block');	
 
-	    console.log(img_el, pages.length);	    
+//	    console.log(img_el, pages.length);	    
 //	    console.log(img, img_w, img_h);
-//	    $('div.background').append(img);
+
 	}
     }
 })
@@ -38,18 +38,7 @@ $.ajax({
 
 
 
-$(document).ready(
+$(window).on("click scroll resize", function(){ 
-    function(){
-	var wh = {w: ($(window).width()), h: ($(window).height())} ;
-	place_imgs(wh);
-    }
-)
-
-
-$(window).on('resize', function(){
 	var wh = {w: ($(window).width()), h: ($(window).height())} ;
 	place_imgs(wh);
-});
+})
-
-
-

05/style.css

@@ -88,4 +88,41 @@ div.background{z-index:-1;
 
 img.background{ position: fixed;
 		z-index:-1;
+		animation: fadein 3s;
+		-moz-animation: fadein 3s;/* Firefox */
+		-webkit-animation: fadein 3s;/* Safari & Chrome */
+		-o-animation: fadein 3s; /* Opera */
 	      }
+
+@keyframes fadein {
+    from {
+	opacity:0;
+    }
+    to {
+	opacity:1;
+    }
+}
+@-moz-keyframes fadein { /* Firefox */
+    from {
+	opacity:0;
+    }
+    to {
+	opacity:1;
+    }
+}
+@-webkit-keyframes fadein { /* Safari and Chrome */
+    from {
+	opacity:0;
+    }
+    to {
+	opacity:1;
+    }
+}
+@-o-keyframes fadein { /* Opera */
+    from {
+	opacity:0;
+    }
+    to {
+	opacity: 1;
+    }
+}