{"id":26170046,"url":"https://github.com/RaschidJFR/ionic-header-parallax","last_synced_at":"2025-03-11T19:04:58.106Z","repository":{"id":45496468,"uuid":"151807374","full_name":"RaschidJFR/ionic-header-parallax","owner":"RaschidJFR","description":"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.","archived":false,"fork":false,"pushed_at":"2024-07-17T13:16:58.000Z","size":20087,"stargazers_count":35,"open_issues_count":3,"forks_count":14,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-09-23T12:46:50.149Z","etag":null,"topics":["ionic4","parallax"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RaschidJFR.png","metadata":{"files":{"readme":"Readme.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-10-06T05:17:50.000Z","updated_at":"2024-02-14T19:01:30.000Z","dependencies_parsed_at":"2024-10-26T20:21:05.439Z","dependency_job_id":null,"html_url":"https://github.com/RaschidJFR/ionic-header-parallax","commit_stats":{"total_commits":44,"total_committers":7,"mean_commits":6.285714285714286,"dds":"0.34090909090909094","last_synced_commit":"abfa58d0d4a8e19a178425f8159e6dd542594338"},"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RaschidJFR%2Fionic-header-parallax","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RaschidJFR%2Fionic-header-parallax/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RaschidJFR%2Fionic-header-parallax/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RaschidJFR%2Fionic-header-parallax/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RaschidJFR","download_url":"https://codeload.github.com/RaschidJFR/ionic-header-parallax/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243076259,"owners_count":20232430,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ionic4","parallax"],"created_at":"2025-03-11T19:01:18.072Z","updated_at":"2025-03-11T19:04:58.083Z","avatar_url":"https://github.com/RaschidJFR.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["UI Library and Framework Ionic"],"readme":"# Parallax Header Directive for Ionic\n\nThis 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.\n\n### Compatibility\n\n| Stack                                                                                                          | Tag                                                                             |\n| -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- |\n| ![](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) |\n| ![](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) |\n| ![](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) |\n| ![](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) |\n| ![](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) |\n\n## Live Demo\n\nCheckout the Live Demo [here](https://raschidjfr.github.io/ionic-header-parallax)\n\n| iOS                                                                                       | Android                                                                                       |\n| ----------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |\n| ![](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) |\n\n## Set Up\n1. Install package: `npm i ionic-header-parallax`.\n2. Import the directive into your desired Module:\n\n    ```ts\n    // app.module.ts\n    \n    import { IonicHeaderParallaxModule } from 'ionic-header-parallax';\n\n    @NgModule({\n      imports: [\n        IonicHeaderParallaxModule,  // \u003c-\n        ...\n    ```\n    …or standalone Component:\n    ```ts\n    // my-component.page.ts\n\n    import { ParallaxDirective } from 'ionic-header-parallax';\n\n    @Component({\n      imports: [\n        ParallaxDirective,    // \u003c-\n        ...\n    ```\n\n## Usage\n\nJust add the attribute `parallax` to any `\u003cion-header\u003e` element:\n\n```html\n\u003cion-header parallax imageUrl=\"https://picsum.photos/350\" height=\"350\" bgPosition=\"top\"\u003e\n  \u003cion-toolbar color=\"primary\"\u003e\n    \u003cion-title\u003e Parallax Header \u003c/ion-title\u003e\n  \u003c/ion-toolbar\u003e\n\u003c/ion-header\u003e\n\n\u003cion-content\u003e Some content here \u003c/ion-content\u003e\n```\n\n| Parameter  | Type                            | Description                                                                                                                                                 |\n| ---------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| imageUrl   | `string`                        | The background image to show while expanded.                                                                                                                |\n| 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\"`) |\n| 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.           |\n| bgPosition | `'top' \\| 'center' \\| 'bottom'` | The position of the image in the header. This parameter slightly changes the feeling of the animation. Default: `'top'`                                     |\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRaschidJFR%2Fionic-header-parallax","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FRaschidJFR%2Fionic-header-parallax","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRaschidJFR%2Fionic-header-parallax/lists"}