html5星空效果图,HTML5 canvas炫酷星空背景特效
jquery-warpdrive-plugin是一款可以制作基于HTML5 canvas的炫酷星空背景特效的jquery插件。这个星空背景特效可通过配置参数进行灵活的配置,可用鼠标进行互动。
使用方法
在页面中引入jquery和jquery.warpdrive.min.js文件。
HTML结构
使用空的一个
初始化插件
在页面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();
html5星空效果图,HTML5 canvas炫酷星空背景特效相关推荐
- 153.炫酷粒子背景特效
效果 (源码网盘地址在最后) 最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了. github 地址:https://github.co ...
- html 星空效果,html5 canvas炫酷旋转银河系星空背景特效
这是一款html5 canvas炫酷旋转银河系星空背景特效.该特效通过canvas来绘制银河系星盘,并制作星系旋转的效果,非常炫酷. 使用方法 HTML结构 该旋转银河系星空背景特效的HTML结果只需 ...
- 五款炫酷精美动态登录页面,彩虹气泡动态云层深海灯光水母炫酷星空蛛网HTMLCSS源码
完整源码详见 微信公众号:创享日记 对话框发送:登录页面 获取HTML+CSS+js等源码文件 一.彩虹气泡登录页面 效果图: HTML源码: <!DOCTYPE html> <ht ...
- 炫酷星空个人主页动态特效引导页面 浏览器源码 手机自适应引导页HTML
炫酷星空个人主页动态特效引导页面 浏览器源码 手机自适应引导页HTML 效果: 完整版 链接: https://pan.baidu.com/s/1DbGaiqB5-29uoVbPK0fxCw 提取码: ...
- html5融合效果,7种炫酷HTML5 SVG液态水滴融合动画特效
这是一组使用HTML5 SVG过滤器制作的炫酷液态水滴融合动画特效.这些SVG动画特效使一些HTML元素,如菜单.分页按钮.APP.选择框等元素的过渡动画像几粒水滴一样融合分解,效果非常的酷. SVG ...
- Canvas炫酷3D线条动画背景
下载地址 Canvas炫酷3D线条动画背景,可以变色的颜色渐变网页动态背景特效. dd:
- canvas炫酷时钟
canvas炫酷时钟 实现的功能 主要用到canvas的一些基础api 直接看效果 html: <canvas id="myCanvas" width="500&q ...
- 三个canvas炫酷背景动画js特效
下载地址 使用三个canvas实现的炫酷网页背景,很酷的网页动画特效. dd:
- H5炫酷特效系列4——炫酷粒子变化特效
这个示例虽然没有相对比较实用的特性,但是表现出来的效果确实非常震撼眼球.先上效果图,让各位同胞感受一下: 特效的表现感很强,有兴趣的读者可以仔细学习一下下面的代码,尝试着理解其中的逻辑. <!D ...
最新文章
- mysql binlog 回退_MYSQL Binglog分析利器:binlog2sql使用详解
- Python3.8安装 jupyter报错 NotImplementedError
- jQuery Mobile弹出对话框后不刷新原页面,保持原页面内容不变
- C4D插件:Springy for Mac 动​​画对象添加重叠动作插件
- 带你自学Python系列(十四):Python函数的用法(四)
- oracle 10g inctype参数使用,ORACLE 10G 重要命令及参数详解
- 中国冷链行业市场供需与战略研究报告
- 玛雅Maya 2022 for Mac(三维动画制作软件)
- maven无法找到依赖(手动使用maven导入依赖包解决)
- html日历修改,HTML精美日历插件
- Centos 6 版本下载
- Ubuntu安装英伟达显卡驱动
- 聊聊flink的consecutive windowed operations 1
- 汉语言文学与茶2019EI会议论文的融合探析
- android /linux休眠与唤醒(一)
- 机器学习学习过程记录
- Java Swing界面设计UI(全)
- 小a与星际探索(dp)
- 看雪题库REVERSE的马到成功
- 机器学习初体验(傻瓜拖拽式)