100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > php+js+背景特效 基于canvas+html5炫酷星空背景动画特效

php+js+背景特效 基于canvas+html5炫酷星空背景动画特效

时间:2022-10-06 20:52:32

相关推荐

php+js+背景特效 基于canvas+html5炫酷星空背景动画特效

【温馨提示】源码包解压密码:

效果图:

描述说明:

Warp drive是一个轻量级的jQuery插件。可以帮助您创建一个很酷的交互式星空背景特效,这个星空背景特效可通过配置参数进行灵活的配置,可用鼠标进行互动。

使用方法

在页面中引入jquery和jquery.warpdrive.min.js文件。

HTML结构

使用空的一个

元素来作为星空背景的容器。

初始化插件

在页面DOM元素加载完毕之后,可以通过纯js的方法来初始化该星空背景插件,或将它作为一个jquery插件来使用。

作为jquery插件来使用。$('#holder').warpDrive();

通过js方法来使用。varwarpdrive=newWarpDrive(document.getElementById('holder'));

配置参数

该html5星空背景特效插件的可用配置参数如下:varsettings={

width:480,/*width*/

height:480,/*height*/

autoResize:false,/*enable/disableautoResize*/

autoResizeMinWidth:null,/*setautoResizeminwidth*/

autoResizeMaxWidth:null,/*setautoResizemaxwidth*/

autoResizeMinHeight:null,/*setautoResizeminheight*/

autoResizeMaxHeight:null,/*setautoResizemaxheight*/

addMouseControls:true,/*enable/disablemousecontrols*/

addTouchControls:true,/*enable/disabletouchcontrols*/

hideContextMenu:true,/*enable/disablecanvascontextmenu*/

starCount:6666,/*countofactive/movingstars*/

starBgCount:2222,/*countofinactive/backgroundstars*/

starBgColor:{r:255,g:255,b:255},/*backgroundstarscolor*/

starBgColorRangeMin:10,/*backgroundstarscolorrangeminofstarBgColor*/

starBgColorRangeMax:40,/*backgroundstarscolorrangemaxofstarBgColor*/

starColor:{r:255,g:255,b:255},/*starscolor*/

starColorRangeMin:10,/*starscolorrangeminofstarBgColor*/

starColorRangeMax:100,/*starscolorrangemaxofstarBgColor*/

starfieldBackgroundColor:{r:0,g:0,b:0},/*backgroundcolor*/

starDirection:1,/*starsmovinginwhichdirection*/

starSpeed:20,/*starsmovingspeed*/

starSpeedMax:200,/*starsmovingspeedmax*/

starSpeedAnimationDuration:2,/*timeinsecondsfromstarSpeedtostarSpeedMax*/

starFov:300,/*fieldofview*/

starFovMin:200,/*fieldofviewmin*/

starFovAnimationDuration:2,/*timeinsecondsfromstarFovtostarFovMin*/

starRotationPermission:true,/*enable/disablerotation*/

starRotationDirection:1,/*rotationdirection*/

starRotationSpeed:0.0,/*rotationspeed*/

starRotationSpeedMax:1.0,/*rotationspeedmax*/

starRotationAnimationDuration:2,/*timeinsecondsfromstarRotationSpeedtostarRotationSpeedMax*/

starWarpLineLength:2.0,/*linelength*/

starWarpTunnelDiameter:100,/*tunneldiameter*/

starFollowMouseSensitivity:0.025,/*mousefollowsensitivity*/

starFollowMouseXAxis:true,/*enable/disablemousefollowxaxis*/

starFollowMouseYAxis:true/*enable/disablemousefollowyaxis*/

};

以jquery插件的方式来调用配置参数:$('#holder').warpDrive(settings);

通过纯js的方法来调用配置参数:varwarpdrive=newWarpDrive(document.getElementById('holder'),settings);

方法

该html5星空背景特效插件有两个可用的方法用于暂停和继续播放星空动画。

jquery:$('#holder').warpDrive('pause');

$('#holder').warpDrive('unpause');

js:warpdrive.pause();

warpdrive.unpause();

浏览器启用弹出窗口过滤功能,将无法跳转到下载页。在浏览器地址栏右边符号提示处点击允许就可以了!

【温馨提示】源码包解压密码:

郑重声明:

1、本站源码仅供个人学习研究和交流使用,请于下载后二十四小时内删除

2、本站大多资源来源于互联网、用户分享,仅供学习交流使用,本站不提供任何技术支持

3、本站联系方式Email:admin@ ,收到邮件会第一时间处理。

4、如侵犯到任何版权问题,请立即告知本站(立即在线告知),本站将及时删除并致以最深的歉意

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。