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

1. Install package: npm i ionic-header-parallax.
2. 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.