ionic-header-parallax
ionic-header-parallax copied to clipboard
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.
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.
For Ionic versions
< 5
, check the previous tags of this packate.
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. |
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.