https://github.com/RaschidJFR/ionic-header-parallax

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.
https://github.com/RaschidJFR/ionic-header-parallax

ionic4 parallax

Last synced: 3 months ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/RaschidJFR/ionic-header-parallax
• Owner: RaschidJFR
• Created: 2018-10-06T05:17:50.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2024-07-17T13:16:58.000Z (11 months ago)
• Last Synced: 2024-09-23T12:46:50.149Z (8 months ago)
• Topics: ionic4, parallax
• Language: TypeScript
• Size: 19.2 MB
• Stars: 35
• Watchers: 2
• Forks: 14
• Open Issues: 3
• Metadata Files:
  • Readme: Readme.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md

Awesome Lists containing this project

• awesome-angular - ionic-header-parallax - 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. (Table of contents / Third Party Components)
• fucking-awesome-angular - ionic-header-parallax - 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. (Table of contents / Third Party Components)

README

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

| -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- |

| ![](https://img.shields.io/badge/-v8-white?logo=ionic) ![](https://img.shields.io/badge/-v16-red?logo=angular) | [6.x.x](https://www.npmjs.com/package/ionic-header-parallax?activeTab=versions) |

| ![](https://img.shields.io/badge/-v7-white?logo=ionic) ![](https://img.shields.io/badge/-v14-red?logo=angular) | [5.x.x](https://www.npmjs.com/package/ionic-header-parallax?activeTab=versions) |

| ![](https://img.shields.io/badge/-v6-white?logo=ionic) ![](https://img.shields.io/badge/-v13-red?logo=angular) | [4.x.x](https://www.npmjs.com/package/ionic-header-parallax?activeTab=versions) |

| ![](https://img.shields.io/badge/-v5-white?logo=ionic) ![](https://img.shields.io/badge/-v12-red?logo=angular) | [3.x.x](https://www.npmjs.com/package/ionic-header-parallax?activeTab=versions) |

| ![](https://img.shields.io/badge/-v4-white?logo=ionic) ![](https://img.shields.io/badge/-v8-red?logo=angular)  | [2.x.x](https://www.npmjs.com/package/ionic-header-parallax?activeTab=versions) |

## Live Demo

Checkout the Live Demo [here](https://raschidjfr.github.io/ionic-header-parallax)

| iOS                                                                                       | Android                                                                                       |

| ----------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |

| ![](https://raw.githubusercontent.com/raschidJFR/ionic-header-parallax/5.0.0/img/ios.gif) | ![](https://raw.githubusercontent.com/raschidJFR/ionic-header-parallax/5.0.0/img/android.gif) |

## Set Up

1. Install package: `npm i ionic-header-parallax`.

2. Import the directive into your desired Module:

    ```ts

    // app.module.ts

    

    import { IonicHeaderParallaxModule } from 'ionic-header-parallax';

    @NgModule({

      imports: [

        IonicHeaderParallaxModule,  // <-

        ...

    ```

    …or standalone Component:

    ```ts

    // my-component.page.ts

    import { ParallaxDirective } from 'ionic-header-parallax';

    @Component({

      imports: [

        ParallaxDirective,    // <-

        ...

    ```

## Usage

Just add the attribute `parallax` to any `` element:

```html

  

     Parallax Header 

  

 Some content here 

```

| 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'`                                     |