{"id":13404057,"url":"https://github.com/apertureless/vue-parallax","last_synced_at":"2025-05-16T03:02:09.458Z","repository":{"id":14640134,"uuid":"76790473","full_name":"apertureless/vue-parallax","owner":"apertureless","description":"🌌  Vue.js component for parallax image scroll effects","archived":false,"fork":false,"pushed_at":"2022-12-06T23:14:15.000Z","size":1058,"stargazers_count":636,"open_issues_count":17,"forks_count":87,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-05-10T23:04:32.690Z","etag":null,"topics":["fast","image","parallax","scrolling","vue","vuejs","vuejs2"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/apertureless.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-18T15:21:24.000Z","updated_at":"2025-02-28T03:02:38.000Z","dependencies_parsed_at":"2023-01-11T20:22:15.602Z","dependency_job_id":null,"html_url":"https://github.com/apertureless/vue-parallax","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apertureless%2Fvue-parallax","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apertureless%2Fvue-parallax/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apertureless%2Fvue-parallax/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apertureless%2Fvue-parallax/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/apertureless","download_url":"https://codeload.github.com/apertureless/vue-parallax/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254459077,"owners_count":22074604,"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":["fast","image","parallax","scrolling","vue","vuejs","vuejs2"],"created_at":"2024-07-30T19:01:38.353Z","updated_at":"2025-05-16T03:02:09.411Z","avatar_url":"https://github.com/apertureless.png","language":"JavaScript","funding_links":["https://ko-fi.com/C0C1WP7C"],"categories":["JavaScript","实用库","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","UI组件","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["Libraries \u0026 Plugins","视差","UI Components","Parallax"],"readme":"# vue-parallaxy\n[![npm version](https://badge.fury.io/js/vue-parallaxy.svg)](https://badge.fury.io/js/vue-parallaxy)\n[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/apertureless/vue-parallax/blob/master/LICENSE.txt)\n\n[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/C0C1WP7C)\n\nIs a compontent for fast 60fps parallax scroll effects in vue 2.\n\n## Demo\n\n[Demo here](https://apertureless.github.io/vue-parallax/)\n\n## Install\n\n`npm install vue-parallaxy` or `yarn add vue-parallaxy`\n\n## Usage\n*vue-parallax* works with slots. So you can pass an image or even srcsets for better mobile experiences.\n\n```html\n// Image.vue\n\n\u003ctemplate\u003e\n  \u003cparallax\u003e\n    \u003cimg src=\"path/cool-background-image.jpg\" alt=\"very cool bg\"\u003e\n  \u003c/parallax\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import Parallax from 'vue-parallaxy'\n  export default {\n    components: {\n      Parallax\n    }\n  }\n\u003c/script\u003e\n```\n\n\n## Props\n\n| Prop   |      Type      |  Default Value | Description\n|----------|:-------------:|------|------|\n| parallax |  Boolean | true | Activates parallax effect |\n| speedFactor |  Number   | 0.15 | factor on how strong the effect is|\n| direction |  String   | 'up' | Either 'up' or 'down', determines scroll direction of image |\n| fixed | Boolean | false | Other parallax effect. Image is fixed in position |\n| sectionHeight | Number | 70 | section height for mobile |\n| breakpoint | String | '(min-width: 968px)' | Media query for mobile deactivation |\n| sectionClass | String | 'Masthead' | CSS class of the outer section tag |\n| containerClass | String | 'Masthead__image' | CSS class of the container holding the  image |\n| parallaxClass | String | 'is-parallax' | Modifier class for the parallax effect |\n| fixedClass | String | 'is-fixed' | Modifier class for the fixed parallax effect |\n\n## Customizing\n\nYou can change some of the behavior by changing the css classes. To be more clean, you can change them over the props. No need to overwrite or `!important` the existing classes.\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n\n# run unit tests\nnpm run unit\n\n# run all tests\nnpm test\n```\n\nFor detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).\n\n\n## Contributing\n\n1. Fork it ( https://github.com/apertureless/vue-parallax/fork )\n2. Create your feature branch (`git checkout -b my-new-feature`)\n3. Commit your changes (`git commit -am 'Add some feature'`)\n4. Push to the branch (`git push origin my-new-feature`)\n5. Create a new Pull Request\n\n## License\n\nThis software is distributed under [MIT license](LICENSE.txt).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapertureless%2Fvue-parallax","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapertureless%2Fvue-parallax","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapertureless%2Fvue-parallax/lists"}