{"id":19220087,"url":"https://github.com/nativescript-community/ui-parallax","last_synced_at":"2025-02-23T09:20:51.523Z","repository":{"id":64126122,"uuid":"572762505","full_name":"nativescript-community/ui-parallax","owner":"nativescript-community","description":"Parallax scrolling effect on IOS/Android","archived":false,"fork":false,"pushed_at":"2022-12-01T18:04:48.000Z","size":1464,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-04-26T17:23:29.178Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nativescript-community.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-12-01T01:14:58.000Z","updated_at":"2022-12-01T01:15:11.000Z","dependencies_parsed_at":"2022-12-07T11:24:44.305Z","dependency_job_id":null,"html_url":"https://github.com/nativescript-community/ui-parallax","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-parallax","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-parallax/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-parallax/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-parallax/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nativescript-community","download_url":"https://codeload.github.com/nativescript-community/ui-parallax/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240293301,"owners_count":19778474,"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":[],"created_at":"2024-11-09T14:33:55.699Z","updated_at":"2025-02-23T09:20:51.497Z","avatar_url":"https://github.com/nativescript-community.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @nativescript-community/ui-parallax \n\n[![npm](https://img.shields.io/npm/v/@nativescript-community/ui-parallax.svg)](https://www.npmjs.com/package/@nativescript-community/ui-parallax)\n[![npm](https://img.shields.io/npm/dt/@nativescript-community/ui-parallax.svg?label=npm%20downloads)](https://www.npmjs.com/package/@nativescript-community/ui-parallax.svg)\n\n### Install\n`$ npm install @nativescript-community/ui-parallax`\n\n### Example xml\n\n```xml\n\u003cPage xmlns=\"http://schemas.nativescript.org/tns.xsd\"\n\t xmlns:parallax=\"@nativescript-community/ui-parallax\"\n\tloaded=\"pageLoaded\"\u003e\n  \t\u003cparallax:ParallaxView controlsToFade=\"headerLabel,headerLabel2\"\u003e\n\t\t\u003cparallax:Header class=\"header-template\" dropShadow=\"true\"\u003e\n\t\t\t\u003cLabel id=\"headerLabel\" text=\"Parallax\"\u003e\u003c/Label\u003e\n\t\t\t\u003cLabel id=\"headerLabel2\" text=\"Component\"\u003e\u003c/Label\u003e\n\t\t\u003c/parallax:Header\u003e\n\t\t\u003cparallax:Anchored class=\"anchor\"\u003e\n\t\t\t\u003cLabel id=\"titleLabel\" text=\"Parallax Template\"\u003e\u003c/Label\u003e\n\t\t\u003c/parallax:Anchored\u003e\n\t\t\u003cparallax:Content class=\"body-template\"\u003e\n\t\t\t\u003cTextView editable=\"false\" text=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque, est in viverra vehicula, enim lacus fermentum mi, vel tincidunt libero diam quis nulla. In sem tellus, eleifend quis egestas at, ultricies a neque. Cras facilisis lacinia velit ut lacinia. Phasellus fermentum libero et est ultricies venenatis sit amet ac lectus. Curabitur faucibus nisi id tellus vehicula luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc condimentum est id nibh volutpat tempor. Phasellus sodales velit vel dui feugiat, eget tincidunt tortor sollicitudin. Donec nec risus in purus interdum eleifend. Praesent placerat urna aliquet orci suscipit laoreet. In ac purus nec sapien rhoncus egestas.\"\u003e\n\t\t\t\u003c/TextView\u003e\n\t\t\u003c/parallax:Content\u003e\n\t\u003c/parallax:ParallaxView\u003e\n\u003c/Page\u003e\n```\n### Example CSS\n```css\n#headerLabel2\n{\n\tfont-size: 45;\n\thorizontal-align: center;\n\tmargin-top:-25;\n\tcolor:#B2EBF2;\n}\n#headerLabel{\n\tfont-size: 45;\n\thorizontal-align: center;\n\tpadding-top:75;\n\tcolor:#B2EBF2;\n}\n.header-template{\n\tbackground-color:#212121;\n\tbackground-image:url('~/images/mountains.png');\n\tbackground-size: cover;\n\theight: 200;\n}\n.body-template TextView{\n\tfont-size:20;\n\tpadding:5 15;\n\tborder:none;\n}\n.anchor{\n\theight: 55;\n\twidth:100%;\n\tbackground-color:#616161;\n}\n#titleLabel{\n\tfont-weight:bold;\n\tfont-size:25;\n\tpadding:5 15;\n\tcolor:#fff;\n\n}\n```\nWhen using the parallax plugin you need at least two layout views inside of the ``\u003cparallax:ParallaxView\u003e`` element. ``\u003cparallax:Header\u003e`` and ``\u003cparallax:Content\u003e``.  \nThere is an optional third view called ``\u003cparallax:Anchored\u003e`` which will positions it's self below the Header and once it reaches the top of the screen anchor it's self there.\n\n### Attributes\n\n| Property            | Description                                                                  |\n| ------------------- | ---------------------------------------------------------------------------- |\n| controlsToFade         | pass it a comma delimited string with each control ID you want to fade out. In the above example it looks like ``controlsToFade=\"headerLabel,headerLabel2\"``                     |\n| dropShadow             | The ``\u003cparallax:Anchored\u003e`` has a property called `` if set to true it will create a small drop shadow effect on the bottom of the anchor               |\n| bounce       | on parallaxView you can set bounce to true to cause bounce effect    |\n| onScroll              | function to handle onscroll event                                        |\n| anchored           | function to handle anchored event     |\n| unanchored       | function to handle unanchored event    |\n\n### React\nIn the root app.ts file\n```\nimport { registerParallax } from \"@nativescript-community/ui-parallax/react\"\nregisterParallax()\n```\n\n### Component\n```\n        \u003cparallaxView bounce controlsToFade=\"headerLabel,headerLabel2\"\n            onLoaded={(args) =\u003e {\n                args.object.on('anchored', () =\u003e console.log('anchored'))\n                args.object.on('unanchored', () =\u003e console.log('unanchored'))\n                args.object.on('scroll', () =\u003e console.log('scroll'))\n            }}\u003e\n            \u003cparallaxHeader class=\"header-template\" height=\"300\"\u003e\n                \u003clabel id=\"headerLabel\" backgroundColor=\"purple\" text=\"Parallax\" width=\"100%\" /\u003e\n                \u003clabel id=\"headerLabel2\" text=\"Header Component\" /\u003e\n            \u003c/parallaxHeader\u003e\n            \u003cparallaxAnchored className=\"anchor\" iosIgnoreSafeArea\u003e\n                \u003clabel id=\"titleLabel\" text=\"Mr. Anchor\" /\u003e\n            \u003c/parallaxAnchored\u003e\n            \u003cparallaxContent class=\"body-template\"\u003e\n                \u003clabel text=\"Content\" class=\"header\" textWrap=\"true\" /\u003e\n\n                \u003clabel textWrap=\"true\" text=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque, est in viverra vehicula, enim lacus fermentum mi, vel tincidunt libero diam quis nulla. In sem tellus, eleifend quis egestas at, ultricies a neque. Cras facilisis lacinia velit ut lacinia. Phasellus fermentum libero et est ultricies venenatis sit amet ac lectus. Curabitur faucibus nisi id tellus vehicula luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc condimentum est id nibh volutpat tempor. Phasellus sodales velit vel dui feugiat, eget tincidunt tortor sollicitudin. Donec nec risus in purus interdum eleifend. Praesent placerat urna aliquet orci suscipit laoreet.\"\u003e\n                \u003c/label\u003e\n            \u003c/parallaxContent\u003e\n        \u003c/parallaxView\u003e\n```\n\n### Plugin Development Work Flow.\n\n* Clone repository to your machine.\n* First run `npm install`\n* Then run `npm run setup` to prepare the demo project\n* Build with `npm run build`\n* Run and deploy to your device or emulator with `npm run demo.android` or `npm run demo.ios`\n\n\n### Special thanks to:\n [JoshDSommer](https://github.com/JoshDSommer/nativescript-parallax) who developed the original plugin.\n\n## License\n[MIT](/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript-community%2Fui-parallax","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnativescript-community%2Fui-parallax","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript-community%2Fui-parallax/lists"}