Parallax Header Directive for Ionic

This directive adds a parallax effect to ion-header, displaying a cover photo that transitions to a toolbar on scroll.

Version 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:

   // 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,    // <-
       ...
   

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'