{"id":13591687,"url":"https://github.com/webdiscus/parallax-3d-lens-effect","last_synced_at":"2025-04-13T05:13:32.796Z","repository":{"id":197501538,"uuid":"698741945","full_name":"webdiscus/parallax-3d-lens-effect","owner":"webdiscus","description":"3D parallax effect by mouse moving using CSS transform","archived":false,"fork":false,"pushed_at":"2024-10-30T10:40:11.000Z","size":11653,"stargazers_count":66,"open_issues_count":0,"forks_count":9,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-13T05:13:19.897Z","etag":null,"topics":["3d","bundler","css","effect","html","js","parallax","plugin","responsive","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webdiscus.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-09-30T20:26:00.000Z","updated_at":"2025-04-02T00:54:21.000Z","dependencies_parsed_at":"2024-11-06T12:48:19.103Z","dependency_job_id":null,"html_url":"https://github.com/webdiscus/parallax-3d-lens-effect","commit_stats":null,"previous_names":["webdiscus/parallax-3d-lens-effect"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdiscus%2Fparallax-3d-lens-effect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdiscus%2Fparallax-3d-lens-effect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdiscus%2Fparallax-3d-lens-effect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webdiscus%2Fparallax-3d-lens-effect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webdiscus","download_url":"https://codeload.github.com/webdiscus/parallax-3d-lens-effect/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248665746,"owners_count":21142123,"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":["3d","bundler","css","effect","html","js","parallax","plugin","responsive","webpack"],"created_at":"2024-08-01T16:01:00.667Z","updated_at":"2025-04-13T05:13:32.769Z","avatar_url":"https://github.com/webdiscus.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# parallax-3d-lens-effect\n\nThe demonstration how to create the 3D parallax effect when moving mouse using the CSS `transform`.\n\nIn JavaScript, we only need to listen the mousemove event and set the transformation values into CSS variables.\nThe background \"rain effect\" is created with canvas and animated using JavaScript.\n\nTo generate static HTML with assets from their source files is used the [html-bundler-webpack-plugin](https://github.com/webdiscus/html-bundler-webpack-plugin).\n\n\u003cdiv style=\"text-align: center\"\u003e\n  \u003cimg src=\"docs/images/parallax-3d-lens-effect.gif\" alt=\"Parallax 3D lens effect demo\"\u003e\n\u003c/div\u003e\n\n\u003e This example uses the assets created by @agragregra WebDesign Master.\n\n## View and edit in browser\n\n[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/parallax-3d-lens-effect?file=README.md)\n\n## Setup\n```\ngit clone https://github.com/webdiscus/parallax-3d-lens-effect.git\ncd parallax-3d-lens-effect\nnpm i\n```\n\n## View app\n```\nnpm run view\n```\n\n## Start development\n```\nnpm start\n```\n\n## Build app\n```\nnpm run build\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebdiscus%2Fparallax-3d-lens-effect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebdiscus%2Fparallax-3d-lens-effect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebdiscus%2Fparallax-3d-lens-effect/lists"}