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图形来替代灯光图形。