{"id":13423920,"url":"https://github.com/vue-comps/vue-parallax","last_synced_at":"2025-09-12T07:41:24.881Z","repository":{"id":54478275,"uuid":"56017428","full_name":"vue-comps/vue-parallax","owner":"vue-comps","description":"Scrolls a image slower than the window to create a neat optical effect.","archived":false,"fork":false,"pushed_at":"2016-10-29T10:40:37.000Z","size":507,"stargazers_count":84,"open_issues_count":2,"forks_count":14,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-06-25T21:52:22.335Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vue-comps.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-04-12T00:20:39.000Z","updated_at":"2025-05-05T02:42:06.000Z","dependencies_parsed_at":"2022-08-13T17:10:20.370Z","dependency_job_id":null,"html_url":"https://github.com/vue-comps/vue-parallax","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/vue-comps/vue-parallax","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-comps%2Fvue-parallax","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-comps%2Fvue-parallax/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-comps%2Fvue-parallax/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-comps%2Fvue-parallax/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vue-comps","download_url":"https://codeload.github.com/vue-comps/vue-parallax/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-comps%2Fvue-parallax/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262842917,"owners_count":23373165,"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-07-31T00:00:45.008Z","updated_at":"2025-06-30T20:05:03.096Z","avatar_url":"https://github.com/vue-comps.png","language":"Vue","funding_links":[],"categories":["Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","Vue","UI组件","Components \u0026 Libraries","UI Components","Awesome Vue.js","UI Components [🔝](#readme)"],"sub_categories":["Component Collections","视差","UI Components","Parallax"],"readme":"# vue-parallax\n\nScrolls a image slower than the window to create a neat optical effect.\n\n### [Demo](https://vue-comps.github.io/vue-parallax)\n\n\n# Install\n\n```sh\nnpm install --save-dev vue-parallax\n// vue@1.0\nnpm install --save-dev vue-parallax@1\n```\nor include `build/bundle.js`.\n\n## Usage\n```coffee\n# in your component\ncomponents:\n  \"parallax\": require(\"vue-parallax\")\n# or, when using bundle.js\ncomponents:\n  \"parallax\": window.vueComps.parallax\n```\n```html\n\u003cparallax src=\"path/to/img\"\u003e\n  \u003cdiv slot=\"loading\"\u003eloading...\u003c/div\u003e\n  \u003cdiv\u003econtent\u003c/div\u003e\n\u003c/parallax\u003e\n```\ncontent will be shown after loading\n\nFor examples see [`dev/`](dev/).\n\n### ERROR: Module build failed: SyntaxError: 'with' in strict mode\nCurrently [buble](https://gitlab.com/Rich-Harris/buble) is injecting `strict` mode in all processed js files. The down to ES5 compiled component contains `with`, which is forbidden in `strict` mode.\nBuble is used, for example, in rollup, which is used in laravel.\n\nIf you are running in this problem, make sure to exclude this component from processing with buble.\n\n#### Webpack\nIf your assets are organized by webpack, this should work:\n```html\n\u003cparallax src=require('../assets/your-image.jpg')\u003e\u003c/parallax\u003e\n```\n\n#### Props\nName | type | default | description\n---:| --- | ---| ---\nsrc | String | - | (required) path to image\nheight | Number | 500 | height of the parallax element\nspeed | Number | 0.2 | 0.0 means the image will appear fixed in place, and 1.0 the image will flow at the same speed as the page content.\n\n#### Events\nName |  description\n---:| --- | ---| ---\nimage-loaded |  will be called when the image is loaded\nloaded |  will be called when the first calculation - after a image is loaded - is finished\n\n## Changelog\n- 2.1.3  \nbugfix in portrait mode  \n\n- 2.1.2  \nnow working on devices in portrait mode\n\n- 2.1.1  \nbugfix  \n\n- 2.1.0  \nchanged way the picture moves, now in line with other parallax implementations  \n\n- 2.0.0  \nnow compatible with vue 2.0.0  \n\n- 1.0.0  \nsome cleaning  \nadded unit tests  \nnow working with firefox  \n\n# Development\nClone repository.\n```sh\nnpm install\nnpm run dev\n```\nBrowse to `http://localhost:8080/`.\n\n## License\nCopyright (c) 2016 Paul Pflugradt\nLicensed under the MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvue-comps%2Fvue-parallax","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvue-comps%2Fvue-parallax","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvue-comps%2Fvue-parallax/lists"}