javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fun weather scroll effects

Browse Source
This commit is contained in:
Max Lynch
2013-10-23 19:33:41 -05:00
parent dd1acc44e1
commit 907ad1b025
2 changed files with 26 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
starters/weather/index.html
View File

@@ -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>

5
starters/weather/weather.css
View File

@@ -1,4 +1,9 @@
body {
}
#bg-image {
position: fixed;
width: 120%;
height: 120%;
background: url('madison3.jpg') no-repeat transparent;
background-size: cover;
}