From 907ad1b025932f0c622e05ab0f580c5a5ac418b2 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Wed, 23 Oct 2013 19:33:41 -0500
Subject: [PATCH] Fun weather scroll effects

---
 starters/weather/index.html  | 24 +++++++++++++++++++++---
 starters/weather/weather.css |  5 +++++
 2 files changed, 26 insertions(+), 3 deletions(-)
diff --git a/starters/weather/index.html b/starters/weather/index.html
index b11ed44fbf..e34dbacbb5 100644
--- a/starters/weather/index.html
+++ b/starters/weather/index.html
@@ -21,6 +21,8 @@
     <script src="app.js"></script>
   </head>
   <body ng-controller="WeatherCtrl">
+    <div id="bg-image"></div>
+
     <header id="header" class="bar bar-header bar-clear">
       <h1 class="title">
         <span class="city">{{current.display_location.city}}</span><br>
@@ -42,15 +44,31 @@
 
   <script>
     var s = document.getElementById('scroller');
+    var bgImage = document.getElementById('bg-image');
+    var header = document.getElementById('header');
+
     var scroll = new ionic.views.Scroll({
       el: s,
-      decelerationRate: 0.87
+      decelerationRate: 0.87,
+      inertialEventInterval: 100
     });
 
     var height = window.innerHeight;
     s.addEventListener('momentumScrolled', function(e) {
-      // here you might add a nice blur or header fade effect
-      // based on how far the scrolling has gone up
+      setTimeout(function() {
+        var bgAmount = e.detail.scrollTop;
+        bgImage.style.top = -(bgAmount / 50);
+
+        //var blurAmount = Math.min(3, e.detail.scrollTop / 200);
+
+        var brightness = 1;
+        if(e.detail.scrollTop > 200) {
+          var diff = Math.min(600, e.detail.scrollTop - 200);
+          var per = 1 - (diff / 600);
+          brightness = Math.max(0.7, per);
+        }
+        bgImage.style.webkitFilter = 'brightness(' + brightness + ')';
+      });
     });
   </script>
 </html>
diff --git a/starters/weather/weather.css b/starters/weather/weather.css
index abe4979990..e436dd5223 100644
--- a/starters/weather/weather.css
+++ b/starters/weather/weather.css
@@ -1,4 +1,9 @@
 body {
+}
+#bg-image {
+  position: fixed;
+  width: 120%;
+  height: 120%;
   background: url('madison3.jpg') no-repeat transparent;
   background-size: cover;
 }
