ionic-header-parallax

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.

• Live Demo
• Code Playground

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

Source Code / 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. Contributions are very welcome. Find the instructions in the CONTRIBUTING.md file.

Feel free to improve the code!

Credits

Raschid JF. Rafaelly

[e-mail]

https://raschidjfr.dev

Changelog

3.0.2 (2021-11-30)

BREAKING CHANGES

• Upgraded to Ionic v5 + Angular 12
• Dropped parameters showButtonsExpanded and titleColor
• Renamed parameters expandedColor and maximumHeight

Added

• Added parameter bgPosition

Changed

• Redid functions with a simpler dom structure. Ionic elements are no longer being cloned or moved. This allows to keep the toolbar's original structure unaltered

Fixed

• Added recursive initializer to avoid error when view not ready yet (#29) (Thanks @AdaLollA)
• Fixed #34: TypeError: Cannot read property 'style' of null