Warp drive jQuery plugin
(jquery-warpdrive-plugin)
Preview
Description
Warp drive is a lightweight jQuery plugin that helps you create a cool, interactive, configurable, HTML5 canvas based warp drive/starfield effect.
Demos & Examples
Overview & Examples
CodePen Demo (old version)
More Examples
- http://nkunited.de/jquery/plugins/warpdrive/example1.html
- http://nkunited.de/jquery/plugins/warpdrive/example2.html
- http://nkunited.de/jquery/plugins/warpdrive/example3.html
- http://nkunited.de/jquery/plugins/warpdrive/example4.html
- http://nkunited.de/jquery/plugins/warpdrive/example5.html
- http://nkunited.de/jquery/plugins/warpdrive/example6.html
- http://nkunited.de/jquery/plugins/warpdrive/example7.html
- http://nkunited.de/jquery/plugins/warpdrive/example8.html
Showcase
Installation
Coming soon.
Example Usage
jQuery
$( '#holder' ).warpDrive();
jQuery with parameters:
var settings = { width: 480,/*width*/ height: 480,/*height*/ autoResize: false,/*enable/disable autoResize*/ autoResizeMinWidth: null,/*set autoResize min width*/ autoResizeMaxWidth: null,/*set autoResize max width*/ autoResizeMinHeight: null,/*set autoResize min height*/ autoResizeMaxHeight: null,/*set autoResize max height*/ addMouseControls: true,/*enable/disable mouse controls*/ addTouchControls: true,/*enable/disable touch controls*/ hideContextMenu: true,/*enable/disable canvas context menu*/ starCount: 6666,/*count of active/moving stars*/ starBgCount: 2222,/*count of inactive/background stars*/ starBgColor: { r:255, g:255, b:255 },/*background stars color*/ starBgColorRangeMin: 10,/*background stars color range min of starBgColor*/ starBgColorRangeMax: 40,/*background stars color range max of starBgColor*/ starColor: { r:255, g:255, b:255 },/*stars color*/ starColorRangeMin: 10,/*stars color range min of starBgColor*/ starColorRangeMax: 100,/*stars color range max of starBgColor*/ starfieldBackgroundColor: { r:0, g:0, b:0 },/*background color*/ starDirection: 1,/*stars moving in which direction*/ starSpeed: 20,/*stars moving speed*/ starSpeedMax: 200,/*stars moving speed max*/ starSpeedAnimationDuration: 2,/*time in seconds from starSpeed to starSpeedMax*/ starFov: 300,/*field of view*/ starFovMin: 200,/*field of view min*/ starFovAnimationDuration: 2,/*time in seconds from starFov to starFovMin*/ starRotationPermission: true,/*enable/disable rotation*/ starRotationDirection: 1,/*rotation direction*/ starRotationSpeed: 0.0,/*rotation speed*/ starRotationSpeedMax: 1.0,/*rotation speed max*/ starRotationAnimationDuration: 2,/*time in seconds from starRotationSpeed to starRotationSpeedMax*/ starWarpLineLength: 2.0,/*line length*/ starWarpTunnelDiameter: 100,/*tunnel diameter*/ starFollowMouseSensitivity: 0.025,/*mouse follow sensitivity*/ starFollowMouseXAxis: true,/*enable/disable mouse follow x axis*/ starFollowMouseYAxis: true/*enable/disable mouse follow y axis*/ }; $( '#holder' ).warpDrive( settings );
JS
var warpdrive = new WarpDrive( document.getElementById( 'holder' ) );
JS with parameters:
var settings = { width: 480,/*width*/ height: 480,/*height*/ autoResize: false,/*enable/disable autoResize*/ autoResizeMinWidth: null,/*set autoResize min width*/ autoResizeMaxWidth: null,/*set autoResize max width*/ autoResizeMinHeight: null,/*set autoResize min height*/ autoResizeMaxHeight: null,/*set autoResize max height*/ addMouseControls: true,/*enable/disable mouse controls*/ addTouchControls: true,/*enable/disable touch controls*/ hideContextMenu: true,/*enable/disable canvas context menu*/ starCount: 6666,/*count of active/moving stars*/ starBgCount: 2222,/*count of inactive/background stars*/ starBgColor: { r:255, g:255, b:255 },/*background stars color*/ starBgColorRangeMin: 10,/*background stars color range min of starBgColor*/ starBgColorRangeMax: 40,/*background stars color range max of starBgColor*/ starColor: { r:255, g:255, b:255 },/*stars color*/ starColorRangeMin: 10,/*stars color range min of starBgColor*/ starColorRangeMax: 100,/*stars color range max of starBgColor*/ starfieldBackgroundColor: { r:0, g:0, b:0 },/*background color*/ starDirection: 1,/*stars moving in which direction*/ starSpeed: 20,/*stars moving speed*/ starSpeedMax: 200,/*stars moving speed max*/ starSpeedAnimationDuration: 2,/*time in seconds from starSpeed to starSpeedMax*/ starFov: 300,/*field of view*/ starFovMin: 200,/*field of view min*/ starFovAnimationDuration: 2,/*time in seconds from starFov to starFovMin*/ starRotationPermission: true,/*enable/disable rotation*/ starRotationDirection: 1,/*rotation direction*/ starRotationSpeed: 0.0,/*rotation speed*/ starRotationSpeedMax: 1.0,/*rotation speed max*/ starRotationAnimationDuration: 2,/*time in seconds from starRotationSpeed to starRotationSpeedMax*/ starWarpLineLength: 2.0,/*line length*/ starWarpTunnelDiameter: 100,/*tunnel diameter*/ starFollowMouseSensitivity: 0.025,/*mouse follow sensitivity*/ starFollowMouseXAxis: true,/*enable/disable mouse follow x axis*/ starFollowMouseYAxis: true/*enable/disable mouse follow y axis*/ }; var warpdrive = new WarpDrive( document.getElementById( 'holder' ), settings );
Color settings/valid formats for starColor, starBgColor & starfieldBackgroundColor
starBgColor: { r:255, g:255, b:255 }
starBgColor: '#ffffff'
starBgColor: '#fff'
starBgColor: 'rgb(255,255,255)'
Pause/unpause
jQuery
$( '#holder' ).warpDrive( 'pause' ); $( '#holder' ).warpDrive( 'unpause' );
JS
warpdrive.pause(); warpdrive.unpause();
Pause/unpause example:
Destroy
jQuery
$( '#holder' ).warpDrive( 'destroy' );
JS
warpdrive.destroy();
License
This plugin is available under the MIT license.
Author
– Niklas