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; + } +}