当前位置：首页 > 网页特效 > 背景

jQuery背景动画特效插件starlight.js

分类：背景日期：2024-05-14 点击(0) 评论(0)

简介

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

```html
<script src="/path/to/jquery.js"></script>
<script src="/path/to/starlight.js"></script>   
```       
#####  HTML结构
为你想要添加背景动画的容器添加starlight class。

```html
<body class="starlight">
  content here
</body>
```
#####  配置参数
```html
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'
 
};    
```

web299.com

jQuery背景动画特效插件starlight.js

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果