{"id":13808649,"url":"https://github.com/hm21/ngx-image-hero","last_synced_at":"2026-01-27T17:03:34.696Z","repository":{"id":213254610,"uuid":"733438618","full_name":"hm21/ngx-image-hero","owner":"hm21","description":"A package to implement hero animations, allowing users to click on images and smoothly zoom them into a larger, immersive view, enhancing the user experience and interaction with images.","archived":false,"fork":false,"pushed_at":"2025-03-17T15:38:57.000Z","size":3716,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-21T18:45:23.863Z","etag":null,"topics":["angular","angular2","animation","hero","image","zoom"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hm21.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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":"2023-12-19T10:29:55.000Z","updated_at":"2025-07-24T14:37:20.000Z","dependencies_parsed_at":"2023-12-29T12:25:22.106Z","dependency_job_id":"1971336a-21ba-40cd-8340-f93eb22f5c5d","html_url":"https://github.com/hm21/ngx-image-hero","commit_stats":null,"previous_names":["hm21/ngx-image-hero"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/hm21/ngx-image-hero","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hm21%2Fngx-image-hero","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hm21%2Fngx-image-hero/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hm21%2Fngx-image-hero/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hm21%2Fngx-image-hero/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hm21","download_url":"https://codeload.github.com/hm21/ngx-image-hero/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hm21%2Fngx-image-hero/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28816571,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-27T12:25:15.069Z","status":"ssl_error","status_checked_at":"2026-01-27T12:25:05.297Z","response_time":168,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["angular","angular2","animation","hero","image","zoom"],"created_at":"2024-08-04T01:01:48.072Z","updated_at":"2026-01-27T17:03:34.677Z","avatar_url":"https://github.com/hm21.png","language":"TypeScript","funding_links":["https://github.com/sponsors/hm21"],"categories":["Third Party Components"],"sub_categories":["Images"],"readme":"\u003ch1\u003eAngular Image-Hero Animation\u003c/h1\u003e\n\n\u003cdiv\u003e\n\n[![npm version](https://badge.fury.io/js/ngx-image-hero.svg)](https://badge.fury.io/js/ngx-image-hero)\n[![NPM monthly downloads](https://img.shields.io/npm/dm/ngx-image-hero.svg)](https://badge.fury.io/js/ngx-image-hero)\n[![NPM total downloads](https://img.shields.io/npm/dt/ngx-image-hero.svg)](https://badge.fury.io/js/ngx-image-hero)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![Issues](https://img.shields.io/github/issues/hm21/ngx-image-hero)](https://github.com/hm21/ngx-image-hero/issues)\n[![Web Demo](https://img.shields.io/badge/web-demo---?\u0026color=0f7dff)](https://ngx-hm21.web.app/image-hero)\n\n\u003c/div\u003e\n\n\u003cimg src=\"https://github.com/hm21/ngx-image-hero/blob/master/assets/showcase.gif?raw=true\" width=450 /\u003e\n\n\u003ca href=\"https://ngx-hm21.web.app/image-hero\"\u003e\n      Demo Website\n\u003c/a\u003e\n\n\u003cbr/\u003e\n\nThis package is similar to the popular Flutter Hero animations.\n\n## Table of contents\n\n- [About](#about)\n- [Getting started](#getting-started)\n- [Documentation](#documentation)\n- [Example](#example)\n- [Contributing](#contributing)\n- [License](LICENSE)\n\n## About\n\nA package to implement hero animations, allowing users to click on images and smoothly zoom them into a larger, immersive view, enhancing the user experience and interaction with images.\n\n## Getting started\n\n### Installation\n\n```sh\nnpm install ngx-image-hero\n```\n\n### Import the directive\n\n```typescript\nimport { Component } from \"@angular/core\";\nimport { NgxImageHeroDirective } from \"ngx-image-hero\";\n\n@Component({\n  selector: \"app-root\",\n  standalone: true,\n  templateUrl: \"./app.component.html\",\n  styleUrl: \"./app.component.scss\",\n  imports: [NgxImageHeroDirective],\n})\nexport class AppComponent {}\n```\n\n\u003ch2\u003eDocumentation\u003c/h2\u003e\n\n### Inputs\n\n| Option             | Type          | Default          | Comment                                                                                                                                                                                                                                         |\n| ------------------ | ------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| highQualityPath    | string        |                  | The path to the high-quality image or content to be displayed, which seamlessly replaces the current picture when opened.                                                                                                                       |\n| fixedHero          | boolean       | false            | Specifies whether to use the fixed-hero mode when absolute positioning is not effective due to overflow issues.                                                                                                                                 |\n| supportedFormats   | string[]      |                  | An array of supported image formats, which is only required when using the `\u003cpicture\u003e` element where the browser automatically selects the format.                                                                                              |\n| backdropPosition   | 'documentEnd' | 'beforeHeroItem' | Insert backdrop at this position.                                                                                                                                                                                                               |\n| browserSupportAvif | boolean       |                  | If you have already manually determined whether the browser supports AVIF, you can set it using this option. Otherwise, the package will automatically perform the check. This option is only required when `supportedFormats` contains values. |\n| browserSupportWebP | boolean       |                  | If you have already manually determined whether the browser supports WebP, you can set it using this option. Otherwise, the package will automatically perform the check. This option is only required when `supportedFormats` contains values. |\n\n### Outputs\n\n| Option    | Type   | Comment                                   |\n| :-------- | :----- | :---------------------------------------- |\n| openHero  | output | Triggered when the hero animation starts. |\n| closeHero | output | Triggered when the hero animation ends.   |\n\n\u003ch2\u003eExample\u003c/h2\u003e\n\n#### Simple example\n\n```html\n\u003cimg ngxHero src=\"https://picsum.photos/id/200/400\" alt=\"demo-image\" /\u003e\n```\n\n#### Complete example demonstrating all properties\n\n```html\n\u003cpicture\u003e\n  @for (format of imgFormats; track format) {\n  \u003csource srcset=\"assets/img/demo.{{format}}\" type=\"image/{{ format }}\" /\u003e\n  }\n  \u003cimg ngxHero fixedHero=\"false\" highQualityPath=\"assets/img/demo_4x\" browserSupportAvif=\"supportAvif\" browserSupportWebP=\"supportWebP\" [supportedFormats]=\"['avif', 'webp', 'jpeg']\" (openHero)=\"onOpenHero()\" (closeHero)=\"onCloseHero()\" src=\"assets/img/demo.jpeg\" alt=\"demo-image\" /\u003e\n\u003c/picture\u003e\n```\n\n## Sponsors \n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/sponsors/hm21\"\u003e\n    \u003cimg src='https://raw.githubusercontent.com/hm21/sponsors/main/sponsorkit/sponsors.svg'/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Contributing\n\nI welcome contributions from the open-source community to make this project even better. Whether you want to report a bug, suggest a new feature, or contribute code, I appreciate your help.\n\n### Bug Reports and Feature Requests\n\nIf you encounter a bug or have an idea for a new feature, please open an issue on my [GitHub Issues](https://github.com/hm21/ngx-image-hero/issues) page. I will review it and discuss the best approach to address it.\n\n### Code Contributions\n\nIf you'd like to contribute code to this project, please follow these steps:\n\n1. Fork the repository to your GitHub account.\n2. Clone your forked repository to your local machine.\n\n```bash\ngit clone https://github.com/hm21/ngx-scroll-animations.git\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhm21%2Fngx-image-hero","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhm21%2Fngx-image-hero","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhm21%2Fngx-image-hero/lists"}