其他代码

Starlight 背景动画特效jQuery插件

面包多

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

使用方法

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

也想出现在这里?联系我们
创客主机
  1. <script src="/path/to/jquery.js"></script>
  2. <script src="/path/to/starlight.js"></script>

HTML 结构

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

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

配置参数

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

Github 网址:https://github.com/sergei1152/Starlight.js

(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!