jQuery随机背景动画特效插件

jQuery随机背景动画特效插件

starlight.js是一款jQuery背景动画特效插件。该插件可以为页面添加随机动画的星星、圆形或其它形状的背景动画特效。

使用方法

在页面中引入下面的文件。

1
2
<script src="/path/to/jquery.js"></script>
<script src="/path/to/starlight.js"></script>

HTML结构

为你想要添加背景动画的容器添加starlight class。

1
2
3
<body class="starlight">
  content here
</body>

配置参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
var user_configuration={
 
    // "circle" or "square"
    shape:"circle",
 
    // star size in pixels
    initial_size:"12px",
 
    // final size of the stars after expansion
    final_size:"64px",
 
    // how fast the stars get bigger, in milliseconds
    expand_speed:"1s",
 
    // how long until the star fades out
    fade_delay:"0.5s",
 
    // how long the star fades for
    fade_duration:"0.5s",
 
    // The variety of colors of the stars. Can be any CSS complient color (eg. HEX, rgba, hsl)
    colors:["hsla(62, 50%,50%, 0.5)", "rgba(255,255,255,0.5)","hsla(180, 72%, 52%, 0.5)"],
 
    // how often a new wave of stars pop-out (in milliseconds. Bigger==longer)
    frequency:100,
 
    // how many stars pop out per wave
    density: 1,
 
    // whether the stars disappear after they are created
    keep_lit: false,
 
    // whether the stars rotate through out their expansion
    rotation: true,
 
    // how much of the element's area the stars will show up in (0-1)
    coverage:1,
 
    // the elements the script will target based on the class name
    target_class:'.starlight'
 
};
当前内容只有登录了才能查看,如果您已经注册,请登录
0

发表评论