Parallax NativeScript + Angular plugin.
npm install nativescript-ng2-parallax#NativeScript Angular2 parallax view component



###Install$ tns plugin add nativescript-ng2-parallax
###Example useage
``typescript
import {Component} from '@angular/core';
// import parallaxView
import {ParallaxView} from 'nativescript-ng2-parallax/nativescript-ng2-parallax';
@Component({
selector: 'app',
template:
,
directives: [
ParallaxView
],
styles: [
#headerLabel2{
font-size: 45;
horizontal-align: center;
margin-top:-25;
color:#B2EBF2;
}
#headerLabel{
font-size: 45;
horizontal-align: center;
padding-top:75;
color:#B2EBF2;
}
.header-template{
background-color:#212121;
background-image:url('~/images/mountains.png');
background-size:cover;
height:250;
}
.body-template textview{
font-size:20;
padding:5 15;
border:none;
}
#titleLabel{
font-weight:bold;
font-size:30;
padding:5 15;
}]
})
class DemoComponent {
public message: string = "Your {N} + Angular 2 plugin is working."
constructor() { }
}
`
To use the parallax scroll view you need to have to containers inside of the tag.head
one container needs the attribute and the other the body. In the above example they are both StackLayouts
You can specify the head containers height with
If you have controls you want to fade out with the scroll of the head container their id's can be passed as array of strings like so:.
Both the head-height and controls-to-fade are not required. If no head-height value is set then it defaults to 300`.
Special thanks to Nathan Walker for setting up the Angular 2 Plugin seed that I used to help get this plugin up and running. More info can be found about it here:
https://github.com/NathanWalker/nativescript-ng2-plugin-seed
* Josh Sommer (TheOriginalJosh)
* Nathan Walker (NathanWalker)
* Leo Caseiro (leocaseiro)
* Michael Solati (MichaelSolati)
##License