Warp drive is a lightweight jQuery plugin that helps you create a cool, interactive, configurable, HTML5 canvas based warp drive/starfield effect.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
js
.gitignore
README.md
example1.html
example2.html
example3.html
example4.html
example5.html
example6.html
example8.html

README.md

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