Interactive Warp Drive Starfield Effect With jQuery - Warp Drive

A fancy jQuery plugin used to create an interactive, pretty cool, highly customizable Warp Drive Starfield effects using HTML5 canvas API.

How to use it:

1. Load the minified version of the jQuery Warp Drive plugin after jQuery:

<script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src='js/jquery.warpdrive.min.js'></script>

2. Create a container element in which you want to display the Warp Drive Starfield effect:

<div id='demo'></div>

3. Activate the Warp Drive Starfield effect with default options.

$('#demo').warpDrive();

4. Customize the Warp Drive Starfield effect by overriding the following parameters as per your needs.

$('#demo').warpDrive({
  width: 480,
  height: 480,
  autoResize: false,
  autoResizeMinWidth: null,
  autoResizeMaxWidth: null,
  autoResizeMinHeight: null,
  autoResizeMaxHeight: null,
  addMouseControls: true,
  addTouchControls: true,
  hideContextMenu: true,
  starCount: 6666,
  starBgCount: 2222,
  starBgColor: { r:255, g:255, b:255 },
  starBgColorRangeMin: 10,
  starBgColorRangeMax: 40,
  starColor: { r:255, g:255, b:255 },
  starColorRangeMin: 10,
  starColorRangeMax: 100,
  starfieldBackgroundColor: { r:0, g:0, b:0 },
  starDirection: 1,
  starSpeed: 20,
  starSpeedMax: 200,
  starSpeedAnimationDuration: 2,
  starFov: 300,
  starFovMin: 200,
  starFovAnimationDuration: 2,
  starRotationPermission: true,
  starRotationDirection: 1,
  starRotationSpeed: 0.0,
  starRotationSpeedMax: 1.0,
  starRotationAnimationDuration: 2,
  starWarpLineLength: 2.0,
  starWarpTunnelDiameter: 100,
  starFollowMouseSensitivity: 0.025,
  starFollowMouseXAxis: true,
  starFollowMouseYAxis: true
});

5. API methods.

// pause the animation
$('#demo').warpDrive('pause');

// resume the animation
$('#demo').warpDrive('unpause');

About Author:

Author: Niklas Knaack

Website: http://blog.niklasknaack.de/?header=WarpDrive

---

This awesome jQuery plugin is developed by NiklasKnaack. For more Advanced Usages, please check the demo page or visit the official website.