{"id":19547427,"url":"https://github.com/lemehovskiy/parallax-content","last_synced_at":"2025-04-26T19:32:50.464Z","repository":{"id":57318805,"uuid":"88861748","full_name":"lemehovskiy/parallax-content","owner":"lemehovskiy","description":"Vanilla JS parallax content plugin based on GSAP","archived":false,"fork":false,"pushed_at":"2023-12-21T13:31:59.000Z","size":2112,"stargazers_count":18,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-13T06:02:26.389Z","etag":null,"topics":["greensock","gsap","parallax","parallax-plugin","parallax-scrolling","typescript"],"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":"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}},"created_at":"2017-04-20T12:13:11.000Z","updated_at":"2023-12-18T12:20:56.000Z","dependencies_parsed_at":"2023-12-18T12:52:39.459Z","dependency_job_id":"ea3b214b-8a2a-460e-875e-60058fc432b3","html_url":"https://github.com/lemehovskiy/parallax-content","commit_stats":null,"previous_names":["lemehovskiy/parallax-content","lemehovskiy/parallax_content"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lemehovskiy%2Fparallax-content","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lemehovskiy%2Fparallax-content/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lemehovskiy%2Fparallax-content/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lemehovskiy%2Fparallax-content/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lemehovskiy","download_url":"https://codeload.github.com/lemehovskiy/parallax-content/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":["greensock","gsap","parallax","parallax-plugin","parallax-scrolling","typescript"],"created_at":"2024-11-11T03:49:38.344Z","updated_at":"2025-04-26T19:32:48.012Z","avatar_url":"https://github.com/lemehovskiy.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## parallax-content\n\nCreate captivating parallax contents effortlessly with the ParallaxContent plugin. This lightweight Vanilla JavaScript plugin, powered by GSAP animation, supports Scroll and Gyroscope events.\n\nFeatures:\n\n* Vanilla JavaScript and GSAP powered\n* Scroll, Gyroscope events\n* Customizable shift and animation duration\n\n### Demo\n\n[Basic demo](https://codesandbox.io/p/devbox/parallax-content-basic-demo-pk4crm)\n\n### Package Managers\n\n```sh\n# NPM\nnpm install parallax_content\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=\"parallaxContent.umd.js\"\u003e\u003c/script\u003e\n```\n\n#### Set HTML\n\n```html\n\u003cdiv class=\"parallax-title\"\u003eParallax title\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 ParallaxContent(document.querySelector('.parallax-title'));\n  //Initialize with jQuery\n  $(document).ready(function () {\n    $('.parallax-title').parallaxContent();\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    \u003cdiv class=\"parallax-title\"\u003eParallax title\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    \u003cscript src=\"https://code.jquery.com/jquery-3.7.1.js\"\u003e\u003c/script\u003e\n    //optional for jQuery initialize\n    \u003cscript src=\"node_modules/parallax_content/dist/parallaxContent.umd.js\"\u003e\u003c/script\u003e\n\n    \u003cscript type=\"text/javascript\"\u003e\n      $(document).ready(function () {\n        $('.parallax-title').parallaxContent();\n      });\n    \u003c/script\u003e\n    \u003cscript type=\"text/javascript\"\u003e\n      //Initialize with Vanilla JavaScript\n      new ParallaxContent(document.querySelector('.parallax-title'));\n      //Initialize with jQuery\n      $(document).ready(function () {\n        $('.parallax-title').parallaxContent();\n      });\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Data Attribute Settings\n\nIn parallaxContent you can add settings using the data-parallax-content attribute. You still need to call\nnew ParallaxContent(selector)\nto initialize parallaxContent on the element.\n\nExample:\n\n```html\n\u003cdiv data-parallax-content='{\"shift\": 10, \"duration\": 4}'\u003e\u003c/div\u003e\n```\n\n### Settings\n\n| Option          | Type  | Default            |\n| --------------- | ----- | ------------------ |\n| events          | [SCROLL, GYRO] | [SCROLL] |\n| shift           | int   | 10                 |\n| duration        | int   | 1.5                |\n| gyroSensitivity | int   | 30                 |\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-content 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-content","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flemehovskiy%2Fparallax-content","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flemehovskiy%2Fparallax-content/lists"}