Parallax Header Directive for Ionic
This directive enables parallax effect on ion-header elements to display a cover photo while on top of the page and transition it to the normal navbar when content is scrolled down.
Compatibility
| Stack | Tag |
|---|---|
  |
6.x.x |
  |
5.x.x |
  |
4.x.x |
  |
3.x.x |
  |
2.x.x |
Live Demo
Checkout the Live Demo here
| iOS | Android |
|---|---|
 |
 |
Set Up
- Install package:
npm i ionic-header-parallax. - Import the directive into your desired module (usually
appmodule.ts):
import { IonicHeaderParallaxModule } from 'ionic-header-parallax';
@NgModule({
imports: [
IonicHeaderParallaxModule,
...Usage
Just add the attribute parallax to any <ion-header> element:
<ion-header parallax imageUrl="https://picsum.photos/350" height="350" bgPosition="top">
<ion-toolbar color="primary">
<ion-title> Parallax Header </ion-title>
</ion-toolbar>
</ion-header>
<ion-content> Some content here </ion-content>| Parameter | Type | Description |
|---|---|---|
| imageUrl | string |
The background image to show while expanded. |
| height | number \| string |
The height for the header when expanded. If the value is a number, it will be set in px. If the value is a string it will be passed as is (eg: "20rem") |
| color | string |
The color (web hex formatted) to show while the header is expanded when no imageUrl is set. When scrolled, it will fade to the toolbar's color. |
| bgPosition | 'top' \| 'center' \| 'bottom' |
The position of the image in the header. This parameter slightly changes the feeling of the animation. Default: 'top' |
Contributing
I don't plan to be maintaining this package full-time, but as I'm usually developing in Ionic I'll be glad to update it any time I make some upgrades for myself. Code contributions, issues, and PRs are very welcome. Find the instructions in the CONTRIBUTING.md file.