https://github.com/nativescript-community/ui-parallax
Parallax scrolling effect on IOS/Android
https://github.com/nativescript-community/ui-parallax
Last synced: over 1 year ago
JSON representation
Parallax scrolling effect on IOS/Android
- Host: GitHub
- URL: https://github.com/nativescript-community/ui-parallax
- Owner: nativescript-community
- License: other
- Created: 2022-12-01T01:14:58.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-12-01T18:04:48.000Z (over 3 years ago)
- Last Synced: 2024-04-26T17:23:29.178Z (about 2 years ago)
- Language: TypeScript
- Size: 1.4 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
- License: LICENSE
Awesome Lists containing this project
README
# @nativescript-community/ui-parallax
[](https://www.npmjs.com/package/@nativescript-community/ui-parallax)
[](https://www.npmjs.com/package/@nativescript-community/ui-parallax.svg)
### Install
`$ npm install @nativescript-community/ui-parallax`
### Example xml
```xml
```
### Example CSS
```css
#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: 200;
}
.body-template TextView{
font-size:20;
padding:5 15;
border:none;
}
.anchor{
height: 55;
width:100%;
background-color:#616161;
}
#titleLabel{
font-weight:bold;
font-size:25;
padding:5 15;
color:#fff;
}
```
When using the parallax plugin you need at least two layout views inside of the ```` element. ```` and ````.
There is an optional third view called ```` which will positions it's self below the Header and once it reaches the top of the screen anchor it's self there.
### Attributes
| Property | Description |
| ------------------- | ---------------------------------------------------------------------------- |
| controlsToFade | 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"`` |
| dropShadow | The ```` has a property called `` if set to true it will create a small drop shadow effect on the bottom of the anchor |
| bounce | on parallaxView you can set bounce to true to cause bounce effect |
| onScroll | function to handle onscroll event |
| anchored | function to handle anchored event |
| unanchored | function to handle unanchored event |
### React
In the root app.ts file
```
import { registerParallax } from "@nativescript-community/ui-parallax/react"
registerParallax()
```
### Component
```
{
args.object.on('anchored', () => console.log('anchored'))
args.object.on('unanchored', () => console.log('unanchored'))
args.object.on('scroll', () => console.log('scroll'))
}}>
```
### 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` or `npm run demo.ios`
### Special thanks to:
[JoshDSommer](https://github.com/JoshDSommer/nativescript-parallax) who developed the original plugin.
## License
[MIT](/LICENSE)