Artforge
diff --git a/‎public/zoom_to_background/index.html
Lines changed: 21 additions & 11 deletions b/‎public/zoom_to_background/index.html
Lines changed: 21 additions & 11 deletions
diff --git a/‎public/zoom_to_background/logo_menu.png
8 KB b/‎public/zoom_to_background/logo_menu.png
8 KB
diff --git a/‎public/zoom_to_background/post_it_aqua.png
-114 KB b/‎public/zoom_to_background/post_it_aqua.png
-114 KB
diff --git a/‎public/zoom_to_background/post_it_blue.png
-117 KB b/‎public/zoom_to_background/post_it_blue.png
-117 KB
diff --git a/‎public/zoom_to_background/post_it_green.png
-117 KB b/‎public/zoom_to_background/post_it_green.png
-117 KB
diff --git a/‎public/zoom_to_background/post_it_orange.png
-104 KB b/‎public/zoom_to_background/post_it_orange.png
-104 KB
diff --git a/‎public/zoom_to_background/post_it_pink.png
-105 KB b/‎public/zoom_to_background/post_it_pink.png
-105 KB
diff --git a/‎public/zoom_to_background/post_it_yellow.png
-114 KB b/‎public/zoom_to_background/post_it_yellow.png
-114 KB
@@ -5,7 +5,7 @@
 		<title>Zoom to Background</title>
 
 		<script type="text/javascript" src="/javascripts/jquery.min.js"></script>
-		<script type="text/javascript" src="/javascripts/jquery-ui.min.js"></script>
+		<script type="text/javascript" src="/javascripts/jquery.easing.1.3.js"></script>
 
 		<style>
 			#actions{
@@ -14,13 +14,19 @@
 				right:25px;
 			}
 			#container{
+				background:#fafafa;
 				position:relative;
 				width:960px;
 				height:500px;
 				border:1px solid #ccc;
 				margin:50px auto;
 				overflow:hidden;
 			}
+			
+			#logo_menu{
+				margin-left:125px;
+				opacity:0.0;
+			}
 			#boots{
 				position:absolute;
 				top:150px;
@@ -36,7 +42,7 @@
 			#explore_header{
 				display:block;
 				position:relative;
-				margin:50px auto 0;
+				margin:25px auto 0;
 				opacity:0.0;
 			}
 
@@ -49,8 +55,8 @@
 			}
 
 			.post-it{
-				width:195px;
-				height:170px;
+				width:190px;
+				height:175px;
 				float:left;
 				margin-left:-0px;
 			}
@@ -78,8 +84,8 @@
 
 	<body>
 		<div id="container">
-			
-			<img src="explore_header.png" width="753" height="92" alt="Explore Header" id="explore_header">
+			<img src="logo_menu.png" width="500" height="41" alt="Logo Menu" id="logo_menu" class="header">
+			<img src="explore_header.png" width="753" height="92" alt="Explore Header" id="explore_header" class="header">
 
 			<div class="post-its">
 				<div id="post_it_1">
@@ -98,10 +104,10 @@
 		</div>
 	</body>
 
-	<div id="actions">
-	<div id="clickback">Close</div>
-	<div id="fade">Fade</div>
-	</div>
+	<!-- <div id="actions">
+		<div id="clickback">Close</div>
+		<div id="fade">Fade</div>
+		</div> -->
 
 	<script type="text/javascript">
 
@@ -119,7 +125,7 @@
 			}
 		});
 
-		$('#clickback').click(function() {
+		$('#logo_menu').click(function() {
 			if ($("#boots").css("opacity") != 1){
 				returnBootsToForeground();
 				slideOutPostIts();
@@ -164,11 +170,15 @@
 
 		function fadeInExploreHeader(){
 			console.log("fade In ExploreHeader");	
+			$("#logo_menu").animate({opacity: 0.8},
+			{queue:false, duration:250, easing: "easeOutSine"});
 			$("#explore_header").animate({opacity: 0.8},
 			{queue:false, duration:250, easing: "easeOutSine", complete: exploreLoadComplete});
 		}
 
 		function fadeOutExploreHeader(){
+			$("#logo_menu").animate({opacity: 0.0},
+			{queue:false, duration:250, easing: "easeOutSine"});
 			$("#explore_header").animate({opacity: 0.0},
 			{queue:false, duration:250, easing: "easeOutSine"});
 		}