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

Scale

Browse Source
This commit is contained in:
Max Lynch
2015-06-11 15:49:57 -05:00
parent f18fcc71a4
commit 7839c69a37
2 changed files with 15 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
ionic/components/app/test/profile/index.js
View File

@@ -7,6 +7,7 @@ import {FormBuilder, Control, ControlGroup, Validators, formDirectives} from 'an
import {Modal, ModalRef, Nav, Segment, Animation,
SegmentButton, Slides, Slide, Content, Button, List, Item} from 'ionic/ionic';
import {NavController, NavbarTemplate, NavParams, Navbar} from 'ionic/ionic';
import {dom} from 'ionic/util';
@Component({ selector: 'ion-app' })
@View({
@@ -40,11 +41,19 @@ export class ParallaxEffect {
this.domElement = elementRef.domElement;
this.scroller = this.domElement.querySelector('.scroll-content');
this.scroller.addEventListener('scroll', (e) => {
this.counter.innerHTML = e.target.scrollTop;
//this.counter.innerHTML = e.target.scrollTop;
dom.raf(() => {
this.parallax.style[dom.CSS.transform] = 'translateY(' + -Math.min(300, (e.target.scrollTop / 4)) + 'px) scale(1)';
if(e.target.scrollTop < 0) {
this.parallax.style[dom.CSS.transform] = 'translateY(0) scale(' + (1 + Math.abs(e.target.scrollTop / 500)) + ')';
}
})
});
setTimeout(() => {
console.log('Watching', this.parallax, this.counter);
console.log('Watching', this.target, this.counter);
})
}
}

8
ionic/components/app/test/profile/main.html
View File

@@ -3,14 +3,14 @@
<div id="face">
</div>
</div>
<ion-content [parallax]="profile" [counter]="counter">
<ion-content [parallax]="profile"><!-- [counter]="counter">-->
<ion-list inset>
<ion-item *ng-for="#item of items">
{{item.title}}
</ion-item>
</ion-list>
</ion-content>
<div id="counter" #counter></div>
<!--<div id="counter" #counter></div>-->
</ion-view>
@@ -28,7 +28,7 @@
#profile {
position: absolute;
top: 0;
height: 250px;
height: 300px;
width: 100%;
background: url('http://ionic-io-assets.s3.amazonaws.com/demos/bus.jpg') no-repeat transparent;
background-size: cover;
@@ -48,6 +48,6 @@ ion-content {
background: transparent !important;
}
.scroll-content {
padding-top: 250px;
padding-top: 300px;
}
</style>