{"id":13546935,"url":"https://github.com/NiklasKnaack/jquery-warpdrive-plugin","last_synced_at":"2025-04-02T19:32:04.545Z","repository":{"id":21292877,"uuid":"92149806","full_name":"NiklasKnaack/jquery-warpdrive-plugin","owner":"NiklasKnaack","description":"Warp drive is a lightweight jQuery plugin that helps you create a cool, interactive, configurable, HTML5 canvas based warp drive/starfield effect.","archived":false,"fork":false,"pushed_at":"2022-06-01T03:51:56.000Z","size":45,"stargazers_count":63,"open_issues_count":3,"forks_count":24,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-19T05:33:49.473Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/NiklasKnaack.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":"2017-05-23T08:41:52.000Z","updated_at":"2025-01-15T03:34:46.000Z","dependencies_parsed_at":"2022-09-18T18:17:21.400Z","dependency_job_id":null,"html_url":"https://github.com/NiklasKnaack/jquery-warpdrive-plugin","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NiklasKnaack%2Fjquery-warpdrive-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NiklasKnaack%2Fjquery-warpdrive-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NiklasKnaack%2Fjquery-warpdrive-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NiklasKnaack%2Fjquery-warpdrive-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NiklasKnaack","download_url":"https://codeload.github.com/NiklasKnaack/jquery-warpdrive-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246880115,"owners_count":20848816,"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-08-01T12:00:48.325Z","updated_at":"2025-04-02T19:32:04.161Z","avatar_url":"https://github.com/NiklasKnaack.png","language":"JavaScript","funding_links":[],"categories":["🚀 A series of exquisite and compact web page cool effects"],"sub_categories":["Background Decoration"],"readme":"# Warp drive jQuery plugin\n(jquery-warpdrive-plugin)\n\n## Preview\n\n![Alt text](https://cloud.githubusercontent.com/assets/10435486/26393070/052133f0-4069-11e7-8f6b-1d6f79cfcd12.gif \"Preview\")\n\n## Description\n\nWarp drive is a lightweight jQuery plugin that helps you create a cool, interactive, configurable, HTML5 canvas based warp drive/starfield effect. \n\n## Demos \u0026 Examples\n\n### Overview \u0026 Examples\n\n* \u003chttp://blog.niklasknaack.de/2017/05/warp-drive-jquery-plugin.html\u003e\n\n### CodePen Demo (old version)\n\n* \u003chttps://codepen.io/NiklasKnaack/pen/OmwgKb\u003e\n\n### More Examples\n\n* \u003chttp://nkunited.de/jquery/plugins/warpdrive/example1.html\u003e\n* \u003chttp://nkunited.de/jquery/plugins/warpdrive/example2.html\u003e\n* \u003chttp://nkunited.de/jquery/plugins/warpdrive/example3.html\u003e\n* \u003chttp://nkunited.de/jquery/plugins/warpdrive/example4.html\u003e\n* \u003chttp://nkunited.de/jquery/plugins/warpdrive/example5.html\u003e\n* \u003chttp://nkunited.de/jquery/plugins/warpdrive/example6.html\u003e\n* \u003chttp://nkunited.de/jquery/plugins/warpdrive/example7.html\u003e\n* \u003chttp://nkunited.de/jquery/plugins/warpdrive/example8.html\u003e\n\n### Showcase\n\n* \u003chttp://blog.niklasknaack.de/?header=WarpDrive\u003e\n\n## Installation\n\nComing soon.\n\n## Example Usage\n\n### jQuery\n\n```js\n$( '#holder' ).warpDrive();\n```\n\n### jQuery with parameters:\n\n```js\nvar settings = {\n\n    width: 480,/*width*/\n    height: 480,/*height*/\n    autoResize: false,/*enable/disable autoResize*/\n    autoResizeMinWidth: null,/*set autoResize min width*/\n    autoResizeMaxWidth: null,/*set autoResize max width*/\n    autoResizeMinHeight: null,/*set autoResize min height*/\n    autoResizeMaxHeight: null,/*set autoResize max height*/\n    addMouseControls: true,/*enable/disable mouse controls*/\n    addTouchControls: true,/*enable/disable touch controls*/\n    hideContextMenu: true,/*enable/disable canvas context menu*/\n    starCount: 6666,/*count of active/moving stars*/\n    starBgCount: 2222,/*count of inactive/background stars*/\n    starBgColor: { r:255, g:255, b:255 },/*background stars color*/\n    starBgColorRangeMin: 10,/*background stars color range min of starBgColor*/\n    starBgColorRangeMax: 40,/*background stars color range max of starBgColor*/\n    starColor: { r:255, g:255, b:255 },/*stars color*/\n    starColorRangeMin: 10,/*stars color range min of starBgColor*/\n    starColorRangeMax: 100,/*stars color range max of starBgColor*/\n    starfieldBackgroundColor: { r:0, g:0, b:0 },/*background color*/\n    starDirection: 1,/*stars moving in which direction*/\n    starSpeed: 20,/*stars moving speed*/\n    starSpeedMax: 200,/*stars moving speed max*/\n    starSpeedAnimationDuration: 2,/*time in seconds from starSpeed to starSpeedMax*/\n    starFov: 300,/*field of view*/\n    starFovMin: 200,/*field of view min*/\n    starFovAnimationDuration: 2,/*time in seconds from starFov to starFovMin*/\n    starRotationPermission: true,/*enable/disable rotation*/\n    starRotationDirection: 1,/*rotation direction*/\n    starRotationSpeed: 0.0,/*rotation speed*/\n    starRotationSpeedMax: 1.0,/*rotation speed max*/\n    starRotationAnimationDuration: 2,/*time in seconds from starRotationSpeed to starRotationSpeedMax*/\n    starWarpLineLength: 2.0,/*line length*/\n    starWarpTunnelDiameter: 100,/*tunnel diameter*/\n    starFollowMouseSensitivity: 0.025,/*mouse follow sensitivity*/\n    starFollowMouseXAxis: true,/*enable/disable mouse follow x axis*/\n    starFollowMouseYAxis: true/*enable/disable mouse follow y axis*/\n\n};\n\n$( '#holder' ).warpDrive( settings );\n```\n\n### JS\n\n```js\nvar warpdrive = new WarpDrive( document.getElementById( 'holder' ) );\n```\n\n### JS with parameters:\n\n```js\nvar settings = {\n\n    width: 480,/*width*/\n    height: 480,/*height*/\n    autoResize: false,/*enable/disable autoResize*/\n    autoResizeMinWidth: null,/*set autoResize min width*/\n    autoResizeMaxWidth: null,/*set autoResize max width*/\n    autoResizeMinHeight: null,/*set autoResize min height*/\n    autoResizeMaxHeight: null,/*set autoResize max height*/\n    addMouseControls: true,/*enable/disable mouse controls*/\n    addTouchControls: true,/*enable/disable touch controls*/\n    hideContextMenu: true,/*enable/disable canvas context menu*/\n    starCount: 6666,/*count of active/moving stars*/\n    starBgCount: 2222,/*count of inactive/background stars*/\n    starBgColor: { r:255, g:255, b:255 },/*background stars color*/\n    starBgColorRangeMin: 10,/*background stars color range min of starBgColor*/\n    starBgColorRangeMax: 40,/*background stars color range max of starBgColor*/\n    starColor: { r:255, g:255, b:255 },/*stars color*/\n    starColorRangeMin: 10,/*stars color range min of starBgColor*/\n    starColorRangeMax: 100,/*stars color range max of starBgColor*/\n    starfieldBackgroundColor: { r:0, g:0, b:0 },/*background color*/\n    starDirection: 1,/*stars moving in which direction*/\n    starSpeed: 20,/*stars moving speed*/\n    starSpeedMax: 200,/*stars moving speed max*/\n    starSpeedAnimationDuration: 2,/*time in seconds from starSpeed to starSpeedMax*/\n    starFov: 300,/*field of view*/\n    starFovMin: 200,/*field of view min*/\n    starFovAnimationDuration: 2,/*time in seconds from starFov to starFovMin*/\n    starRotationPermission: true,/*enable/disable rotation*/\n    starRotationDirection: 1,/*rotation direction*/\n    starRotationSpeed: 0.0,/*rotation speed*/\n    starRotationSpeedMax: 1.0,/*rotation speed max*/\n    starRotationAnimationDuration: 2,/*time in seconds from starRotationSpeed to starRotationSpeedMax*/\n    starWarpLineLength: 2.0,/*line length*/\n    starWarpTunnelDiameter: 100,/*tunnel diameter*/\n    starFollowMouseSensitivity: 0.025,/*mouse follow sensitivity*/\n    starFollowMouseXAxis: true,/*enable/disable mouse follow x axis*/\n    starFollowMouseYAxis: true/*enable/disable mouse follow y axis*/\n\n};\n\nvar warpdrive = new WarpDrive( document.getElementById( 'holder' ), settings );\n```\n\n### Color settings/valid formats for starColor, starBgColor \u0026 starfieldBackgroundColor\n\n```js\nstarBgColor: { r:255, g:255, b:255 }\n```\n```js\nstarBgColor: '#ffffff'\n```\n```js\nstarBgColor: '#fff'\n```\n```js\nstarBgColor: 'rgb(255,255,255)'\n```\n\n### Pause/unpause\n\n### jQuery\n\n```js\n$( '#holder' ).warpDrive( 'pause' );\n$( '#holder' ).warpDrive( 'unpause' );\n```\n\n### JS\n\n```js\nwarpdrive.pause();\nwarpdrive.unpause();\n```\n\nPause/unpause example:\n* \u003chttp://nkunited.de/jquery/plugins/warpdrive/example8.html\u003e\n\n### Destroy\n\n### jQuery\n\n```js\n$( '#holder' ).warpDrive( 'destroy' );\n```\n\n### JS\n\n```js\nwarpdrive.destroy();\n```\n\n## License\n\nThis plugin is available under [the MIT license](http://mths.be/mit).\n\n## Author\n\n_– [Niklas](http://niklasknaack.de/)_","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNiklasKnaack%2Fjquery-warpdrive-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FNiklasKnaack%2Fjquery-warpdrive-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNiklasKnaack%2Fjquery-warpdrive-plugin/lists"}