6.1.2 • Published 2 months ago
ionic-header-parallax v6.1.2
Parallax Header Directive for Ionic
This directive enables a parallax effect on ion-header
elements to display a cover photo while on top of the page and transition to the normal toolbar when scrolling 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
- 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-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' |
6.1.1-dev
2 months ago
6.1.0
3 months ago
6.1.2
2 months ago
6.1.1
2 months ago
6.1.2-rc
2 months ago
6.0.0
7 months ago
5.0.0
2 years ago
4.0.0
2 years ago
3.0.2
3 years ago
3.1.0
3 years ago
3.0.1
3 years ago
3.0.0-rc
3 years ago
3.0.0
4 years ago
0.0.1
4 years ago
3.0.0-dev
4 years ago
2.2.2
6 years ago
2.2.1
6 years ago
2.2.0
6 years ago
2.1.4
6 years ago
2.1.3
6 years ago
1.1.0
6 years ago
2.1.2
6 years ago
2.1.1
6 years ago
2.1.0
6 years ago
2.0.1
6 years ago
2.0.0
6 years ago
1.0.1
6 years ago
1.0.0
7 years ago