Aside

ionic/components/app/test/music/index.js

@@ -16,7 +16,7 @@ import {
 @Component({selector: 'ion-view'})
 @View({
   templateUrl: 'pages/app.html',
-  directives: [Content, Button]
+  directives: [Nav, List, Item, Content, Button, HeaderTemplate, Toolbar]
 })
 class AppPage {
   constructor(nav: NavController) {
@@ -93,12 +93,16 @@ export class ParallaxEffect {
   parallaxItems() {
     let list = this.domElement;
     console.log('Moving items', this.parallax);
-    var x = Math.max(0, (1 - this.parallax) * 40);
+    var x = Math.max(0, (1 - this.parallax) * 20);
+    var y = 0;//Math.max(0, (1 - this.parallax) * 10);
+    var scale = Math.min(1, (0.9 + 0.1 * this.parallax));
     list.style['opacity'] = Math.min(this.parallax, 1);
-    list.style['transform'] = 'translate3d(' + x + 'px, 0, 0)';
+    list.style['transform'] = 'translate3d(' + x + 'px, ' + y + 'px, 0) scale(' + scale + ')';
   }
 }
 
+//300
+//1 to 0.9
 export function main() {
   bootstrap(IonicApp);
 }

ionic/components/app/test/music/main.html

@@ -37,25 +37,37 @@
       background: url('http://ionic-io-assets.s3.amazonaws.com/menu.jpg');
       background-size: cover;
     }
-    #menu ion-item {
+    .platform-ios ion-list .item {
       background: transparent;
       min-height: 55px;
     }
-    #menu ion-item .item-content {
+    .platform-ios ion-list .item .item-content {
       background: transparent;
       color: rgba(255,255,255,0.8);
       padding: 10px;
     }
+    .platform-ios .toolbar-ios ion-title {
+      color: white;
+      font-size: 14px;
+      font-weight: normal;
+      letter-spacing: 2px;
+    }
     #menu ion-item .item-label {
       font-size: 22px;
     }
+    ion-content {
+      background: transparent !important;
+    }
     .platform-ios #menu .item-content:after {
       background: none;
     }
-    .platform-ios #menu .item:first-of-type:before {
-      background: none;
+    .platform-ios .item:first-of-type:before {
+      background: none !important;
     }
-    .platform-ios #menu .item:last-of-type:after {
+    .platform-ios .item:last-of-type:after {
+      background: none !important;
+    }
+    .platform-ios .toolbar-container-ios:after {
       background: none;
     }
 

ionic/components/app/test/music/pages/app.html

@@ -1,3 +1,22 @@
-<div>
-  <h3>Music</h3>
-</div>
+<ion-toolbar *header>
+
+  <ion-title>YOUR MUSIC</ion-title>
+
+</ion-toolbar>
+
+<ion-content>
+  <ion-list>
+    <ion-item>
+      Playlight
+    </ion-item>
+    <ion-item>
+      Songs
+    </ion-item>
+    <ion-item>
+      Albums
+    </ion-item>
+    <ion-item>
+      Artists
+    </ion-item>
+  </ion-list>
+</ion-content>