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.

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 < 7, check the previous tags of this package.

• Live Demo

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

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. Code contributions, issues and PRs are very welcome. Find the instructions in the CONTRIBUTING.md file.

ionic-header-parallax's Issues

Ignores rest of ion-buttons

This only shows the first ion-button on the header and ignores the rest.

How can I use this component with a status bar with overlayWebiews?

I am trying to use this component with overlaysWebView but the back button moves to the back of the status bar when it should be displayed below and not below the status bar.

I am using Ionic 5.

ERROR TypeError: Cannot read property 'style' of null

Hello,

Everything works fine but I'm getting this error message:

ERROR TypeError: Cannot read property 'style' of null
at DefaultDomRenderer2.setStyle (platform-browser.js:739)
at ionic-header-parallax.js:68

apparently this line:

this.renderer.setStyle(toolbarTitle, 'pointer-events', 'unset');

Any help ? :)

Thanks for this great module !

support to angular 14

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: @0.0.1
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR! @angular/common@"^14.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@">=12.0.0 <14.0.0" from [email protected]
npm ERR! node_modules/ionic-header-parallax
npm ERR! ionic-header-parallax@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /home//.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /home//.npm/_logs/2022-09-05T09_40_51_103Z-debug-0.log

Can you please update the plugin for angular v14 ?

Ionic v6 and Angular v13

Any plans to update the project for Ionic v6 and Angular v13?

Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'

Approximately once every 5 app startups the parallax header bugs out. The four other times it works completely as intended. This behaviour appears on Android 10. Any idea what is going on here, especially why it is inconsistent in it's execution?

Packages and Versioning:

• "@angular/xxx": "9.1.6"
• "@ionic/xxx": "5.0.0"
• "ionic-header-parallax": "2.2.2"

Error Message:

vendor.js:43157 ERROR TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
    at ParallaxDirective.push../node_modules/ionic-header-parallax/__ivy_ngcc__/fesm5/ionic-header-parallax.js.ParallaxDirective.initStyles (default~tabs-recipes-recipes-module~tabs-wines-wines-module.js:114)
    at default~tabs-recipes-recipes-module~tabs-wines-wines-module.js:41
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:3527)
    at Object.onInvokeTask (vendor.js:67162)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:3526)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (polyfills.js:3294)
    at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (polyfills.js:3609)
    at ZoneTask.invoke (polyfills.js:3598)
    at timer (polyfills.js:6140)

What it looks like on the UI:

Feature request to have a slider.

Can we user swiperjs in place of image? so user can swiper multiple image ?

Show an image inside prallax

Hello and thank you for your work.

is there a way to show an image inside the parallax

the code would be something like this

<ion-header parallax ....
....
<ion-title>
    <img [src]="logo">{{title}}
</ion-title>

Back button

Forgive me for being so annoying, the truth is that I look very good effect but does not appear my arrow to return.
Thanks a lot for your time.

A <ion-toolbar> element is needed inside <ion-header>

I used your example on Ionic 7.7 with Angular Standalone project.

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

When I add "parallax to ion-header, I get an console error and nothing happens:

A <ion-toolbar> element is needed inside <ion-header>

Any ideas?

Routing glitch

When routing to a page that has a parallax header the header shows up instantly rather than slides in like the rest of the page. When routing back there doesn't appear to be any issue. I've tried it on both NavController and Router services. Any recommendation?

titleColor not working as expected ionic4

How can I use this component with overlaysWebView?

I am trying to use this component with overlaysWebView but the back button moves to the back of the status bar when it should be displayed below and not below the status bar.

I am using Ionic 5.

ionic 4 angular 8

Hello,

Fresh install, I get

[ng] ERROR in ./src/app/app.module.ts 18:18-43
[ng] "export 'IonicHeaderParallaxModule' was not found in 'ionic-header-parallax'

Could not find a declaration file for module 'ionic-header-parallax'. '<app root>/node_modules/ionic-header-parallax/index.js' implicitly has an 'any' type.
  Try `npm install @types/ionic-header-parallax` if it exists or add a new declaration (.d.ts) file containing `declare module 'ionic-header-parallax';`ts(7016)

Thanks

dynamic error

I can not put the url dynamically, it goes incomplete

Image is flickering when test in Android/iOS devices

The main cause of this happen is when the directive change the height, use translate3d would be fine..

ion-back-button not work with ios

ion-back-button not work with ios when after scroll on top.

Documentation wrong

Hi,

In your install instructions you say:
npm ion-header-parallax

This should be:
npm install ionic-header-parallax

parallax not working

not able to see image

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

const routes: Routes = [
  {
    path: '',
    component: ArticlePage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes),
    IonicHeaderParallaxModule
  ],
  declarations: [ArticlePage]
})
export class BrowsePageModule { }

Not working for ionic4

Would it be possible to make this ionic4 compatible?

"Height" input changes are not applied correctly

Changing height input value during runtime doesn't seem to work. It only correctly applies the initial value.
It's an issue if you want to have different image height for different window height.

stackblitz example not working

please check your slackblitz code example
https://stackblitz.com/github/raschidjfr/ionic-header-parallax

its not working man

Cannot find name "ParallaxDirective"

Hi, im using this:

Ionic:

Ionic CLI : 5.0.0 (C:\Users\coroleu\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.1.0

Cordova:

Cordova CLI : 9.0.0 ([email protected])
Cordova Platforms : android 8.0.0, ios 5.0.1
Cordova Plugins : cordova-plugin-ionic-webview 1.2.1, (and 9 other plugins)

Utility:

cordova-res : 0.3.0
native-run : 0.2.2

System:

NodeJS : v8.11.3 (D:\Program Files\nodejs\node.exe)
npm : 6.9.0
OS : Windows 10

And i follow this steps:

https://www.npmjs.com/package/ionic-header-parallax/v/1.0.1

But Visual Studio Code show me this problem:

Cannot find name "ParallaxDirective"

Any idea why?
Thanks

ion-toolbar is off/ion-content is hidden behind image

As you can see from the images, this is what I see after implementing:

Basically, the ion-toolbar is off so my back button is way up, the contents of ion-contents are hidden behind the image. This might be due to my implementation of setting ion-content to fullscreen but I am not sure.

ionic v6 support?

Does this library officially support the just released ionic v6?

titleColor not working as expected ionic4

I set titleColor="white" by default and when i scroll up and then down backbutton color automatically changed to black.

header was not accepted attributed

React support/example

It would be nice to have also a React usage example. Is React officially supported by this library?

Render custom components when expanded

Are there any chances it will be able to render user defined components when the header is expanded other than just showing the title?

String values for height config don't seem to work

The docs state: If the value is a string it will be passed as is (eg: "20rem"), however it doesn't seem to work in the latest version. Setting height to a number seems to work fine but values like 35vh, 35% or simply 350px don't seem to be applied correctly. The image height becomes the same as the toolbar height in that case.

Library version: 3.0.2
Ionic: 6
Angular: 13

@RaschidJFR

EDIT: same issue can be reproduced in the demo app.

dynamically add url for imageurl not work

hi i am using
ionic-header-parallax i want to use a varriable to show image in header and it doesnt work. The maximum length of a path that is not set by a hardcorded URL but by a variable seems to be a length of 30.when i used url it is work but when used a varrible it dosnt work....

dont show complete link path in imageurl when use varriable

please help me