Starlight.js是一款可以制作炫酷网页背景灯光闪烁特效的jQuery插件。你可以通过该插件定义任何比例的闪烁灯光效果,也可以在多个元素中应用灯光效果。在Banner中使用它可以得到非常炫酷的效果。
使用方法
使用该灯光闪烁特效需要引入jQuery和starlight.js,以及sample.css文件。
<link rel="stylesheet" href="css/sample.css">
<script src="js/jquery.min.js"></script>
<script src="js/starlight.js"></script>
HTML结构
在你需要制作灯光闪烁效果的元素上添加starlight class。
<div class="starlight"></div>
完成上面的步骤之后就可以使用该灯光闪烁效果了。
配置参数
如果你需要自定义该灯光闪烁特效的一些参数,可以直接在starlight.js文件中修改user_configuration配置。可用的参数如下:
shape:灯光的形状,可以是circle或square。initial_size:灯光的初始尺寸,例如32px。final_size:灯光扩展后的最终尺寸。expand_speed:灯光扩展(闪烁)的速度,CSS时间,例如1s。fade_delay:灯光开始闪烁前的延迟时间,CSS时间,例如1s。fade_duration:灯光闪烁的持续时间,CSS时间,例如0.5s。colors:一组可用的灯光颜色,灯光闪烁时会随机挑选一种颜色。可以使任何CSS可用的颜色,例如rgba(255,255,255,0.5)。frequency:灯光产生时间的延迟,单位毫秒,例如250。density:每一波有多少灯光产生,例如:5。keep_lit:灯光是否淡出。可以设置true或false。rotation:灯光是否旋转。可以设置true或false。coverage:灯光会出现在元素区域的位置。可选范围0-1,例如0.75表示75%的元素区域。target_class:灯光闪烁的元素的class,例如.starlight。custom_svg:该属性目前还未被支持。是否使用自己的SVG图形来替代灯光图形。