6.1.2 • Published 2 months ago

ionic-header-parallax v6.1.2

Weekly downloads
43
License
ISC
Repository
github
Last release
2 months ago

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

StackTag
npm.io npm.io6.x.x
npm.io npm.io5.x.x
npm.io npm.io4.x.x
npm.io npm.io3.x.x
npm.io npm.io2.x.x

Live Demo

Checkout the Live Demo here

iOSAndroid
npm.ionpm.io

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-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>
ParameterTypeDescription
imageUrlstringThe background image to show while expanded.
heightnumber \| stringThe 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")
colorstringThe 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