{"id":13504492,"url":"https://github.com/rrutsche/react-parallax","last_synced_at":"2025-05-13T12:56:28.104Z","repository":{"id":34348245,"uuid":"38269558","full_name":"rrutsche/react-parallax","owner":"rrutsche","description":"A React Component for parallax effect","archived":false,"fork":false,"pushed_at":"2025-03-25T19:55:06.000Z","size":30610,"stargazers_count":863,"open_issues_count":13,"forks_count":75,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-05-02T14:12:48.260Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rrutsche.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2015-06-29T20:27:18.000Z","updated_at":"2025-04-13T12:42:06.000Z","dependencies_parsed_at":"2024-01-16T10:38:03.098Z","dependency_job_id":"cf5dea18-489f-4d5a-8728-d1499ca26c0c","html_url":"https://github.com/rrutsche/react-parallax","commit_stats":{"total_commits":322,"total_committers":20,"mean_commits":16.1,"dds":0.3633540372670807,"last_synced_commit":"4abb4a240e64d14db88975fa794f93b5b8baa311"},"previous_names":[],"tags_count":74,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rrutsche%2Freact-parallax","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rrutsche%2Freact-parallax/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rrutsche%2Freact-parallax/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rrutsche%2Freact-parallax/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rrutsche","download_url":"https://codeload.github.com/rrutsche/react-parallax/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253016519,"owners_count":21840876,"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-08-01T00:00:44.061Z","updated_at":"2025-05-13T12:56:28.062Z","avatar_url":"https://github.com/rrutsche.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/rrutsche","https://img.buymeacoffee.com/button-api/?text=Buy"],"categories":["UI Animation","TypeScript","📦 Legacy \u0026 Inactive Projects"],"sub_categories":["Parallax"],"readme":"# react-parallax [![NPM version][npm-image]][npm-url]\n\n## Install\n\n```sh\nyarn add react-parallax\n```\n\n### [Demo on codesandbox](https://codesandbox.io/embed/r0yEkozrw?view=preview)\n\n## Contribute\n\nIf you find any bug or have problems and/or ideas regarding this library feel free to open an issue or pull request. Either way please create a working example so I can reproduce it. Link to a repository or even easier - fork the demo codesandbox project. This would help a lot.\n\nThis project is maintained during evenings and weekends. If you like it, please consider to buy me a coffee ;-) ...or contribute in other ways.\n\n\u003ca href=\"https://www.buymeacoffee.com/rrutsche\"\u003e\u003cimg src=\"https://img.buymeacoffee.com/button-api/?text=Buy me a coffee\u0026emoji=\u0026slug=rrutsche\u0026button_colour=FFDD00\u0026font_colour=000000\u0026font_family=Cookie\u0026outline_colour=000000\u0026coffee_colour=ffffff\"\u003e\u003c/a\u003e\n\n## Usage examples\n\n### Basic - background image with fixed blur effect\n\n```javascript\nimport { Parallax } from 'react-parallax';\n\nconst Container = () =\u003e (\n    \u003cParallax blur={10} bgImage=\"path/to/image.jpg\" bgImageAlt=\"the cat\" strength={200}\u003e\n        Content goes here. Parallax height grows with content height.\n    \u003c/Parallax\u003e\n);\n```\n\n### Dynamic blur and negative strength for reverse direction\n\n```javascript\nimport { Parallax, Background } from 'react-parallax';\n\nconst Container = () =\u003e (\n    \u003cParallax\n        blur={{ min: -15, max: 15 }}\n        bgImage={require('path/to/another/image.jpg')}\n        bgImageAlt=\"the dog\"\n        strength={-200}\n    \u003e\n        Blur transition from min to max\n        \u003cdiv style={{ height: '200px' }} /\u003e\n    \u003c/Parallax\u003e\n);\n```\n\n### Custom background element\n\nUse the background component for custom elements. Unlike the `bgImage` this one will not be scaled depending on the parent/window width.\n\n```javascript\nimport { Parallax, Background } from 'react-parallax';\n\nconst Container = () =\u003e (\n    \u003cParallax strength={300}\u003e\n        \u003cBackground className=\"custom-bg\"\u003e\n            \u003cimg src=\"http://www.fillmurray.com/500/320\" alt=\"fill murray\" /\u003e\n        \u003c/Background\u003e\n    \u003c/Parallax\u003e\n);\n```\n\n### Render prop\n\nCalculate your own stuff depending on the `percentage` value.\n\n```javascript\nimport { Parallax, Background } from 'react-parallax';\n\nconst Container = () =\u003e (\n    \u003cParallax\n        bgImage=\"/path/to/another/image\"\n        renderLayer={percentage =\u003e (\n            \u003cdiv\n                style={{\n                    position: 'absolute',\n                    background: `rgba(255, 125, 0, ${percentage * 1})`,\n                    left: '50%',\n                    top: '50%',\n                    width: percentage * 500,\n                    height: percentage * 500,\n                }}\n            /\u003e\n        )}\n    \u003e\n        \u003cp\u003e... Content\u003c/p\u003e\n    \u003c/Parallax\u003e\n);\n```\n\n## Background Component\n\nChild nodes inside this Background will be positioned like the bgImage behind the other children. Unlike the bgImage there is no automatic scaling.\n\n## Props\n\n| Name                  |   Type        | Default                   | Description                                                                                                                                                           | example                                                                                                |\n| --------------------- | :-----------: | :-----------------------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------| ------------------------------------------------------------------------------------------------------ |\n| **bgImage**           | `String`      |                           | path to the background image that makes parallax effect                                                                                                               |                                                                                                        |\n| **bgImageAlt**        | `String`      |                           | alt text for bgImage.                                                                                                                                                 |                                                                                                        |\n| **bgImageSize**       | `String`      |                           | img `sizes` attribute.                                                                                                                                                |                                                                                                        |\n| **bgImageSrcSet**     | `String`      |                           | img `srcset` attribute                                                                                                                                                |                                                                                                        |\n| **style**             | `Object`      |                           | style object for the component itself                                                                                                                                 |                                                                                                        |\n| **bgStyle**           | `Object`      |                           | additional style object for the bg image/children  [Valid style attributes](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference)                |                                                                                                        |\n| **bgClassName**       | `String`      |                           | custom classname for image                                                                                                                                            |                                                                                                        |\n| **contentClassName**  | `String`      | `react-parallax-content`  | custom classname for parallax inner                                                                                                                                   |                                                                                                        |\n| **bgImageStyle**      | `Object`      |                           | set background image styling                                                                                                                                          | `{height: '50px', maxWidth: '75px', opacity: '.5'}`                                                    |\n| **strength**          | `Number`      | `100`                     | parallax effect strength (in pixel). this will define the amount of pixels the background image is translated                                                         |                                                                                                        |\n| **blur**              | `Number`      | `0` or  `{min:0, max:5}`  | number value for background image blur or object in format `{min:0, max:5}` for dynamic blur depending on scroll position                                             |                                                                                                        |\n| **renderLayer**       | `Function`    |                           | Function that gets a percentage value of the current position as parameter for custom calculationa. It renders a layer above the actual background, below `children`. | `renderLayer={percentage =\u003e (\u003cdiv style={{ background:｀rgba(255, 125, 0, ${percentage * 1})｀}}/\u003e )}`  |\n| **disabled**          | `Boolean`     | `false`                   | turns off parallax effect if set to true                                                                                                                              | `{height: '50px', maxWidth: '75px', opacity: '.5'}`                                                    |\n| **className**         | `String`      |                           | set an additional className                                                                                                                                           |                                                                                                        |\n| **parent**           | `Node`        | `document`                | set optional parent for nested scrolling                                                                                                                              |                                                                                                        |\n| **children**          |               |                           | used to display any content inside the react-parallax component                                                                                                       |                                                                                                        |\n\n## Development\n\n```sh\n# setup\nyarn\n# Development, live reload, JSX transpiling, run:\nyarn dev\n```\n\nPort `3000` on all OS by default. Can be set with option -port=8080\n\n# License\n\nMIT\n\n[npm-image]: https://img.shields.io/npm/v/react-parallax.svg?style=flat-square\n[npm-url]: https://www.npmjs.com/package/react-parallax\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frrutsche%2Freact-parallax","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frrutsche%2Freact-parallax","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frrutsche%2Freact-parallax/lists"}