{"id":15764671,"url":"https://github.com/ctf0/vue-proximity-feedback","last_synced_at":"2025-03-31T10:23:29.596Z","repository":{"id":84058343,"uuid":"145170333","full_name":"ctf0/vue-proximity-feedback","owner":"ctf0","description":"https://github.com/codrops/ProximityFeedback/ \"not exactly\"","archived":false,"fork":false,"pushed_at":"2023-01-03T23:06:21.000Z","size":7,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-11T12:18:54.847Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ctf0.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":"ctf0"}},"created_at":"2018-08-17T22:03:24.000Z","updated_at":"2023-01-03T23:06:24.000Z","dependencies_parsed_at":"2023-04-27T22:21:25.729Z","dependency_job_id":null,"html_url":"https://github.com/ctf0/vue-proximity-feedback","commit_stats":{"total_commits":9,"total_committers":2,"mean_commits":4.5,"dds":0.4444444444444444,"last_synced_commit":"f5ee9962c6b3c771d6eab09c6b6858ef134ea1e4"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctf0%2Fvue-proximity-feedback","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctf0%2Fvue-proximity-feedback/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctf0%2Fvue-proximity-feedback/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ctf0%2Fvue-proximity-feedback/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ctf0","download_url":"https://codeload.github.com/ctf0/vue-proximity-feedback/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246451248,"owners_count":20779590,"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-10-04T12:04:24.524Z","updated_at":"2025-03-31T10:23:29.573Z","avatar_url":"https://github.com/ctf0.png","language":"Vue","funding_links":["https://github.com/sponsors/ctf0"],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\" style=\"border: none\"\u003e\n    Vue Proximity Feedback\n    \u003cbr\u003e\n    \u003ca href=\"https://www.npmjs.com/package/vue-proximity-feedback\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vue-proximity-feedback.svg?style=for-the-badge\" alt=\"npm\" /\u003e\u003c/a\u003e \u003ca href=\"https://www.npmjs.com/package/vue-proximity-feedback\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/vue-proximity-feedback.svg?style=for-the-badge\" alt=\"npm\" /\u003e\u003c/a\u003e\n\u003c/h1\u003e\n\n## Installation\n\n```bash\nnpm install vue-proximity-feedback --save\n```\n\n\u003cbr\u003e\n\n## Usage\n\n- register the component.\n\n    ```js\n    window.Vue = require('vue')\n\n    Vue.component(ProximityFeedback, require('vue-proximity-feedback').default)\n    ```\n\n- create a css animation\n    ```css\n    @keyframes pulse {\n        to {\n            transform: scale(1.4);\n        }\n    }\n\n    .pulse {\n        animation: pulse 0.25s ease infinite alternate;\n    }\n    ```\n\n- usage\n    ```html\n    \u003cproximity-feedback\n        ref=\"pfb\"\n        tag=\"div\"\n        animation-class=\"pulse\"\n        :distance=\"{min: 10, max: 400}\"\n        :divide-by=\"125\"\n        @click.native=\"doSomthing()\"\u003e\n\n        \u003ci class=\"fa-search\"\u003e\u003c/i\u003e\n    \u003c/proximity-feedback\u003e\n    ```\n\n    - you can conditionaly start / stop the mouse tracking through\n        ```vue\n        this.$refs.pfb.stop()\n        this.$refs.pfb.start()\n        ```\n\n    |      prop      |      required      |  type  |      default       |              description               |\n    |----------------|--------------------|--------|--------------------|----------------------------------------|\n    | tag            | :x:                | string | span               |                                        |\n    | animationClass | :white_check_mark: | string |                    |                                        |\n    | distance       | :x:                | object | {min: 0, max: 100} |                                        |\n    | divideBy       | :x:                | number | 100                | proximity / divideBy = animation speed |\n\n\u003cbr\u003e\n\n## TODO\n- fix frame stutter when animation speed change.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fctf0%2Fvue-proximity-feedback","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fctf0%2Fvue-proximity-feedback","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fctf0%2Fvue-proximity-feedback/lists"}