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:









Ut at consequat libero, at pharetra purus. Integer mi lorem, luctus eget porttitor vitae, pharetra et urna. Morbi et euismod lacus. Vestibulum a massa odio. Aenean at neque hendrerit, consequat sem et, congue mi. Sed egestas, ante feugiat lacinia tempus, lacus lorem laoreet magna, a hendrerit augue leo vitae risus. Integer ornare odio nec libero elementum malesuada. Cras sem sapien, aliquet eget nibh molestie, finibus dictum augue. Nulla mi metus, finibus id arcu nec, molestie venenatis libero. Morbi a pharetra odio. Maecenas viverra, quam at sollicitudin sodales, diam purus lacinia dolor, vitae scelerisque erat mi nec nibh. Quisque egestas et nunc in pharetra. Sed vitae tincidunt justo, dictum tincidunt nisi. Quisque tempus dolor urna, et mattis velit porta vitae.">



,
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.
one container needs the head 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

Contributors

* Josh Sommer (TheOriginalJosh)
* Nathan Walker (NathanWalker)
* Leo Caseiro (leocaseiro)
* Michael Solati (MichaelSolati)

##License

MIT