Add some animations.

TeaWhen · Jun 26, 2014 · a2177e3 · a2177e3
1 parent bf91652
commit a2177e3
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/src/index.html b/src/index.html
@@ -21,6 +21,8 @@
         margin-top: 30px;
     }
     #title {
+        opacity: 0;
+
         float: left;
     }
     #title h1 {
@@ -33,6 +35,8 @@
         font-size: 22px;
     }
     #login {
+        opacity: 0;
+
         float: right;
         width: 170px;
         margin-top: 58px;
@@ -56,10 +60,23 @@
         top: 1px;
     }
     #screenshot {
-        display: block;
+        opacity: 0;
         margin: auto;
+        margin-top: 5px;
     }
 </style>
+<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+<script>
+    $(function() {
+        $("#title, #login").animate({
+            "opacity": 1
+        }, "slow");
+        $("#screenshot").animate({
+            "opacity": 1,
+            "margin-top": 0
+        }, "slow");
+    })
+</script>
 <body>
     <div id="header">
         <div id="title">

diff --git a/src/user.html b/src/user.html
@@ -27,7 +27,7 @@
 	<div class="container-fluid" id="container">
 		<div class="row" id="row">
 			<div id="sidebar">
-				<h1>Stargazer {{ username }}</h1>
+				<h1>Stargazer</h1>
 				<img id="avatar" src="{{ avatar }}" class="img-thumbnail" align="middle">
 				<input id="search" data-ng-model="searchText" type="text" placeholder="Search...">
 				<ul id="general">