效果图:
描述说明:
Warp drive是一个轻量级的jQuery插件。可以帮助您创建一个很酷的交互式星空背景特效,这个星空背景特效可通过配置参数进行灵活的配置,可用鼠标进行互动。
使用方法
在页面中引入jquery和jquery.warpdrive.min.js文件。
<script src=""path/to/js/jquery.min.js"></script> <script src=""path/to/js/jquery.warpdrive.min.js"></script>
HTML结构
使用空的一个<div>元素来作为星空背景的容器。
<div id='holder'></div>
初始化插件
在页面DOM元素加载完毕之后,可以通过纯js的方法来初始化该星空背景插件,或将它作为一个jquery插件来使用。
作为jquery插件来使用。
$( '#holder' ).warpDrive();
通过js方法来使用。
var warpdrive = new WarpDrive( document.getElementById( 'holder' ) );
配置参数
该html5星空背景特效插件的可用配置参数如下:
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*/ };
以jquery插件的方式来调用配置参数:
$( '#holder' ).warpDrive( settings );
通过纯js的方法来调用配置参数:
var warpdrive = new WarpDrive( document.getElementById( 'holder' ), settings );
方法
该html5星空背景特效插件有两个可用的方法用于暂停和继续播放星空动画。
jquery:
$( '#holder' ).warpDrive( 'pause' ); $( '#holder' ).warpDrive( 'unpause' );
js:
warpdrive.pause(); warpdrive.unpause();
转载请注明来源地址:小川编程 » https://www.youhutong.com/index.php/article/index/578.html