This directive adds a parallax effect to ion-header, displaying a cover photo that transitions to a toolbar on scroll.
| Stack | Tag |
|---|---|
  | 6.x.x |
  | 5.x.x |
  | 4.x.x |
  | 3.x.x |
  | 2.x.x |
Checkout the Live Demo here
| iOS | Android |
|---|---|
 |  |
-
Install package:
npm i ionic-header-parallax. -
Import the directive into your desired Module:
// app.module.ts import { IonicHeaderParallaxModule } from 'ionic-header-parallax'; @NgModule({ imports: [ IonicHeaderParallaxModule, // <- ...
…or standalone Component:
// my-standalone-component.page.ts import { ParallaxDirective } from 'ionic-header-parallax'; @Component({ imports: [ ParallaxDirective, // <- ...
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' |