NativeScript Parallax View Plugin for Android & iOS.
Parallax Scroll
Parallax Scroll with Anchor.
Install
$ tns plugin add nativescript-parallax
Example xml
Example css
To use the parallax plugin you need to first import it into your xml layout with xmlns:parallax="nativescript-parallax"
when using the parallax plugin you need at least two layout views inside of the <parallax:ParallaxView>
element. <parallax:Header>
and <parallax:Content>
. there is an optional third view called
<parallax:Anchored>
which will positions it's self below the Header and once it reaches the top of the screen anchor it's self there.
To add views such as labels you want to fade out in the <parallax:Parallaxiew>
add the controlsToFade
attribute and pass it a comma delimited string with each control ID you want to fade out. In the above example it looks like controlsToFade="headerLabel,headerLabel2"
and will fade out both of those labels.
The <parallax:Anchored>
has a property called dropShadow
if set to true it will create a small drop shadow effect on the bottom of the anchor.
If the inner content of <parallax:Content>
isn't long enough to cause the page to scroll. If not it will not show the Parallax effect.
As of version 1.1.0 the bounce/overscroll effect is disable by default to turn it back on set bounce=true
on the ParallaxView element.
Events
- scroll: Happens on scroll
- anchored: When the anchor hits
- unanchored: When the anchor comes loose
Plugin Development Work Flow.
- Clone repository to your machine.
- First run
npm install
- Then run
npm run setup
to prepare the demo project - Build with
npm run build
- Run and deploy to your device or emulator with
npm run demo.android
ornpm run demo.ios
Special thanks to:
Nathanael Anderson for helping with understand how plugins in {N} work. Also Thanks to Nathan Walker for setting up the {N} 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-plugin-seed Also maybe Steve McNiven-Scott for optimizations, events and getting plugin working on v3+