🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Warp drive is a lightweight jQuery plugin that helps you create a cool, interactive, configurable, HTML5 canvas based warp drive/starfield effect.

Animation HTML5 Plugins

Documentation

Warp drive jQuery plugin

(jquery-warpdrive-plugin)

Preview

Alt text

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

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


You May Also Like