简要教程
starlight.js是一款jQuery背景动画特效插件。该插件可以为页面添加随机动画的星星、圆形或其它形状的背景动画特效。
使用方法
在页面中引入下面的文件。
<scriptsrc="/path/to/jquery.js"></script>
<scriptsrc="/path/to/starlight.js"></script>
HTML结构
为你想要添加背景动画的容器添加starlightclass。
<bodyclass="starlight">
contenthere
</body>
配置参数
varuser_configuration={
//"circle"or"square"
shape:"circle",
//starsizeinpixels
initial_size:"12px",
//finalsizeofthestarsafterexpansion
final_size:"64px",
//howfastthestarsgetbigger,inmilliseconds
expand_speed:"1s",
//howlonguntilthestarfadesout
fade_delay:"0.5s",
//howlongthestarfadesfor
fade_duration:"0.5s",
//Thevarietyofcolorsofthestars.CanbeanyCSScomplientcolor(eg.HEX,rgba,hsl)
colors:["hsla(62,50%,50%,0.5)","rgba(255,255,255,0.5)","hsla(180,72%,52%,0.5)"],
//howoftenanewwaveofstarspop-out(inmilliseconds.Bigger==longer)
frequency:100,
//howmanystarspopoutperwave
density:1,
//whetherthestarsdisappearaftertheyarecreated
keep_lit:false,
//whetherthestarsrotatethroughouttheirexpansion
rotation:true,
//howmuchoftheelement'sareathestarswillshowupin(0-1)
coverage:1,
//theelementsthescriptwilltargetbasedontheclassname
target_class:'.starlight'
};
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jQuery