HTML5 canvas炫酷星空背景特效

所属分类:其他-动画效果

 10601  67  查看评论 (10)
HTML5 canvas炫酷星空背景特效 ie兼容8

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();
相关插件-动画效果

纯CSS3实现打火机火焰动画

这又是一款很酷的纯CSS3动画特效,它是一个可以点燃的打火机,当你用鼠标滑过这只打火机时,打火机就会打开,然后开始出现火焰燃烧的动画特效。另外要说明的是,整个动画都是利用纯CSS3实现的
  动画效果
 13423  32

CSS3模仿四季交替动画

HTML5 CSS3卡通风格一年四季交替动画特效
  动画效果
 5336  48

html5图标动画

HTML5 SVG实现喜欢点赞动画特效
  动画效果
 20306  436

可自定义形状文字的烟花(原创)

canvas仿烟花效果,代码注释全
  动画效果
 1413  13

讨论这个项目(10)回答他人问题或分享插件使用方法奖励jQ币

    森七 0
    2018/6/11 14:15:49
    能改变星星大小吗,求指教
    回复
    森七 0
    2018/6/9 11:34:16
    星星能改变吗? 回复
    ?? 0
    2018/1/8 11:50:34
    Kiss rain 0
    2018/1/4 15:15:26

    能修改星星大小吗

        有你真好0
        2018/4/28 14:49:19
        同问!
    回复
    Uncle 0
    2017/12/22 17:55:47

    这特效看得我头晕了...

    回复
    if you 0
    2017/12/21 12:04:16

    眼睛都看花了;饿

        不减肥成功决不改名0
        2017/12/21 15:26:22

        别天天看代码呀,偶尔出去走一走,旅旅游,然后你会发现还特么不如在家里看代码。哈哈

        SiriBen0
        2017/12/22 9:26:17

        他指的眼花不是代码,而是星空,哈哈哈

        不减肥成功决不改名0
        2017/12/23 18:32:29

        有种老司机开车,漂移想吐的感觉

    回复
取消回复