From 90de179419b7a81062acfad1ca0ca9511ed343d5 Mon Sep 17 00:00:00 2001
From: Castro0o <andre@andrecastro.info>
Date: Fri, 23 Mar 2018 22:34:20 +0100
Subject: [PATCH] images fade in on click,scroll,resize

---
 05/images-mwapi.js | 23 ++++++-----------------
 05/style.css       | 37 +++++++++++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/05/images-mwapi.js b/05/images-mwapi.js
index b14a610..70552f9 100644
--- a/05/images-mwapi.js
+++ b/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_top =  window_size.h;// - img_h;
+	    var img_max_left = window_size.w - img_w;
+	    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(
-    function(){
-	var wh = {w: ($(window).width()), h: ($(window).height())} ;
-	place_imgs(wh);
-    }
-)
-
-
-$(window).on('resize', function(){
+$(window).on("click scroll resize", function(){ 
 	var wh = {w: ($(window).width()), h: ($(window).height())} ;
 	place_imgs(wh);
-});
-
-
-
+})
diff --git a/05/style.css b/05/style.css
index 0e9eb80..e6d4f50 100644
--- a/05/style.css
+++ b/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;
+    }
+}