{"id":19547420,"url":"https://github.com/lemehovskiy/parallax-background","last_synced_at":"2025-07-05T19:14:27.686Z","repository":{"id":57318806,"uuid":"86436939","full_name":"lemehovskiy/parallax-background","owner":"lemehovskiy","description":"Vanilla JS parallax background plugin based on GSAP","archived":false,"fork":false,"pushed_at":"2023-12-18T12:23:11.000Z","size":2573,"stargazers_count":29,"open_issues_count":0,"forks_count":9,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-04T17:47:22.579Z","etag":null,"topics":["animation","greensock","gsap","parallax","typescript","vanilla-js"],"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/lemehovskiy.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}},"created_at":"2017-03-28T08:50:45.000Z","updated_at":"2023-12-12T17:25:19.000Z","dependencies_parsed_at":"2023-12-18T13:35:13.742Z","dependency_job_id":null,"html_url":"https://github.com/lemehovskiy/parallax-background","commit_stats":null,"previous_names":["lemehovskiy/parallax-background","lemehovskiy/parallax_background"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lemehovskiy%2Fparallax-background","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lemehovskiy%2Fparallax-background/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lemehovskiy%2Fparallax-background/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lemehovskiy%2Fparallax-background/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lemehovskiy","download_url":"https://codeload.github.com/lemehovskiy/parallax-background/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251041674,"owners_count":21527236,"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":["animation","greensock","gsap","parallax","typescript","vanilla-js"],"created_at":"2024-11-11T03:49:37.434Z","updated_at":"2025-04-26T19:32:47.842Z","avatar_url":"https://github.com/lemehovskiy.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"parallax-background\n-------\n\nCreate captivating parallax backgrounds effortlessly with the ParallaxBackground plugin. This lightweight Vanilla JavaScript plugin, powered by GSAP animation, supports Scroll, Mouse Move, and Gyroscope events. Choose from Rotate or Shifting animations, and easily configure zoom and animation duration for a personalized touch.\n\nFeatures:\n\n* Vanilla JavaScript and GSAP powered\n* Scroll, Mouse Move, Gyroscope events\n* Rotate or Shifting animations\n* Customizable zoom and animation duration\n\n### Demo\n\n[Basic demo](https://codesandbox.io/p/devbox/parallax-background-basic-demo-r3qmzy)\u003cbr\u003e\n[Events types and animation types demo](https://codesandbox.io/p/devbox/parallax-background-demo-events-animation-types-48fk64)\n\n### Package Managers\n\n```sh\n# NPM\nnpm install parallax_background\n```\n\n### Installation\n\n#### Include js\n\n```html\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"parallaxBackground.umd.js\"\u003e\u003c/script\u003e\n```\n\n#### Set HTML\n\n```html\n\u003cdiv class=\"parallax-background\"\u003e\n  \u003cdiv class=\"parallax-inner\" style=\"background-image: url('https://placekitten.com/1280/720')\"\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n#### Call the plugin\n\n```html\n\u003cscript type=\"text/javascript\"\u003e\n      //Initialize with Vanilla JavaScript\n      new ParallaxBackground(document.querySelector(\".parallax-background\"));\n      //Initialize with jQuery\n      $(document).ready(function() {\n        $('.parallax-background').parallaxBackground();\n      });\n\u003c/script\u003e\n```\n\n#### In result\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n  \u003ctitle\u003eMy website\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n\n  \u003cdiv class=\"parallax-background\"\u003e\n    \u003cdiv class=\"parallax-inner\" style=\"background-image: url('https://placekitten.com/1280/720')\"\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\n  \u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js\"\u003e\u003c/script\u003e\n  //optional for jQuery initialize\n  \u003cscript src=\"https://code.jquery.com/jquery-3.7.1.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"parallaxBackground.umd.js\"\u003e\u003c/script\u003e\n\n  \u003cscript type=\"text/javascript\"\u003e\n      //Initialize with Vanilla JavaScript\n      new ParallaxBackground(document.querySelector(\".parallax-background\"));\n       //Initialize with jQuery\n      $(document).ready(function() {\n        $('.parallax-background').parallaxBackground();\n      });\n  \u003c/script\u003e\n\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Data Attribute Settings\n\nIn parallax-background you can add settings using the data-parallax-background attribute. You still need to call\nnew ParallaxBackground(selector)\nto initialize parallax-background on the element.\n\nExample:\n\n```html\n\u003cdiv class=\"parallax-background\" data-parallax-background='{\"duration\": 3, \"zoom\": 30}'\u003e\n  \u003cdiv class=\"parallax-inner\" style=\"background-image: url('background-image.jpg')\"\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Settings\n\nOption | Type | Default\n--- | --- | ---\nevents | [SCROLL, MOUSE, GYRO] | [SCROLL]\nanimationType | SHIFT \\| ROTATE | SHIFT\nzoom | int | 20\nrotatePerspective | int | 1400\nanimateDuration | int | 1\n\n### Browser support\n\n* Chrome\n* Firefox\n\n### Dependencies\n\n* GSAP animation library (Version 3.10.4)\n\n## Contributing\n\nIf you'd like to get involved, please consider opening an issue or submitting a pull request. Your input is highly valued, and I'm enthusiastic about collaborating to enhance this tool.\n\n## License\n\nparallax-background is released under the MIT License. See the [LICENSE](LICENSE) file for comprehensive details regarding the terms and conditions of use.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flemehovskiy%2Fparallax-background","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flemehovskiy%2Fparallax-background","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flemehovskiy%2Fparallax-background/lists"}