animation and request new pictures

encore-rit · May 5, 2016 · 6b94686 · 6b94686
1 parent 20e3118
commit 6b94686
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 16 deletions.
diff --git a/css/main.css b/css/main.css
@@ -19,7 +19,7 @@ body {
 /* ---- grid ---- */
 
 .grid {
-  background: #DDD;
+  background: #333333;
   position: relative;
   height: 100%;
   overflow: auto;
@@ -34,10 +34,6 @@ body {
 
 section {
   position: relative;
-  /*min-height: 300px;*/
-  /*max-height: 1000px;*/
-  /*height: 900px;*/
-  /*height: 0%;*/
 }
 
 /* ---- .grid-item ---- */
@@ -54,14 +50,18 @@ section {
 
 .artistInfo {
   color: #333;
-  font-size: 10px;
-  letter-spacing: -.5px;
+  font-size: 12px;
+  letter-spacing: -.2px;
   background: rgba(255, 255, 255, 0.8);
-  padding: 10px;
+  padding: 14px;
   vertical-align: bottom;
   position: absolute;
   bottom: 0;
   left: 0;
   max-height: 340px; 
 }
 
+.artistInfo p{
+  margin: 0;
+}
+
diff --git a/script.js b/script.js
@@ -35,18 +35,33 @@
   		});
 	}); 
 
-    var animate = function(){
-    	$('body').animate({scrollTop: $(document).scrollTop() + $(document).height()}, 15000, function(){
-    		var $clone = $('.grid section:last').clone();
-    		$('.grid').append($clone).packery('appended', $clone);
-    		$('.grid section:first').remove();
-    		animate();
-    	}); 
+    function animate() {
+      getNewData();
+      $('.grid section:first').remove();
+      $("body").animate({scrollTop: $(document).height()}, 30000, animate);
     }
 
-    animate();
+    animate()
   };
 
+  function getNewData(){
+    $.ajax({
+      url: "data.json",
+      method: 'GET',
+      dataType: 'json',
+      success: function(data){
+        $newSection = $('<section>');
+        $.each(data, function(i, value) {
+          $newSection.append($('<div>').attr('class','grid-item').append($('<img>').attr('src',value.photoUrl)).append($('<div>').attr('class','artistInfo').append($('<div>').append($('<p>').text(value.bio)))));
+        });
+        $('.grid').append($newSection).packery('appended', $newSection);
+      },
+      error: function(err) {
+        console.log('err', err)
+      }
+    });
+  }
+
       // Load first data from the API.
   loadData();
 })(jQuery);