yay animations!

Logo now animated when mouse enters
SkyBirdSoar · Aug 11, 2014 · b44fd73 · b44fd73
1 parent 66b9447
commit b44fd73
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 3 deletions.
diff --git a/mathpw/acknowledgements.html b/mathpw/acknowledgements.html
@@ -3,6 +3,7 @@
   <head>
     <title>Gift Boxes :: Acknowledgements</title>
     <link rel="stylesheet" type="text/css" href="/res/common/nav.css">
+    <link rel="stylesheet" type="text/css" href="/mathpw/res/nav/nav.css">
     <link rel="stylesheet" type="text/css" href="/res/common/helper.css">
     <link rel="stylesheet" type="text/css" href='/res/common/font.css'>
     <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>

diff --git a/mathpw/giftboxes.html b/mathpw/giftboxes.html
@@ -3,6 +3,7 @@
   <head>
     <title>Gift Boxes :: Buy</title>
     <link rel="stylesheet" type="text/css" href="/res/common/nav.css">
+    <link rel="stylesheet" type="text/css" href="/mathpw/res/nav/nav.css">
     <link rel="stylesheet" type="text/css" href="/res/common/helper.css">
     <link rel="stylesheet" type="text/css" href="/mathpw/res/giftboxes/style.css">
     <link rel="stylesheet" type="text/css" href='/res/common/font.css'>

diff --git a/mathpw/index.html b/mathpw/index.html
@@ -3,6 +3,7 @@
   <head>
     <title>Gift Boxes :: Home</title>
     <link rel="stylesheet" type="text/css" href="/res/common/nav.css">
+    <link rel="stylesheet" type="text/css" href="/mathpw/res/nav/nav.css">
     <link rel="stylesheet" type="text/css" href="/res/common/helper.css">
     <link rel="stylesheet" type="text/css" href="/mathpw/res/index/style.css">
     <link rel="stylesheet" type="text/css" href='/res/common/font.css'>

diff --git a/mathpw/res/nav/nav.css b/mathpw/res/nav/nav.css
@@ -0,0 +1,19 @@
+#logo {
+  height: 30%;
+  width: 30%;
+}
+
+.fade {
+  -webkit-transition: all 0.2s ease-in-out;
+     -moz-transition: all 0.2s ease-in-out;
+       -o-transition: all 0.2s ease-in-out;
+      -ms-transition: all 0.2s ease-in-out;
+          transition: all 0.2s ease-in-out;
+}
+
+#nav {
+  width :102%;
+  background: #e6e6e6;
+  position: absolute;
+  bottom: 0;
+}
diff --git a/mathpw/res/nav/nav.html b/mathpw/res/nav/nav.html
@@ -1,8 +1,8 @@
 <div class="centralise-vertically" style="text-align:center;">
-  <img src="/mathpw/res/images/logo.png" alt="logo" style="height:30%;width:30%;" />
+  <img src="/mathpw/res/images/logo.png" alt="logo" id="logo" />
   <p class="h1">Gift Boxes</p>
 </div>
-<div id="nav" style="width:102%;background:#e6e6e6;position:absolute;bottom:0;">
+<div id="nav">
   <table>
     <tr>
       <td><a href="/mathpw/">Home</a></td>
@@ -15,4 +15,18 @@
 <script type="text/javascript">
   var s = "#nav td:nth-child(" + window.NAV_INDEX + ")";
   $(s).addClass('highlight');
+  $("#logo").mouseover(function(e) {
+    var ele = $(this);
+    ele.animate({
+      width: "32%",
+      height: "32%",
+      opacity: "0.5"
+    }, 600, "", function() {
+      ele.animate({
+        width: "30%",
+        height: "30%",
+        opacity: "1"
+      });
+    });
+  });
 </script>
diff --git a/res/common/nav.css b/res/common/nav.css
@@ -37,7 +37,7 @@ body {
 }
 
 .highlight {
-  background-color: #d1f0f8;
+  background-color: lightgray;
 }
 
 #nav a {