jquery-gradientify是一款可以制作网页背景渐变色平滑过渡动画的jQuery插件。该插件使用简单,它通过参数的方式来提供一组渐变色,并使元素的背景色在这组渐变色之间反复平滑过渡。
使用方法
在页面中引入jquery2.0+和jquery.gradientify.min.js文件。
<script type="text/javascript" src="path/to/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="dist/jquery.gradientify.min.js"></script>
初始化插件
例如为<body>
元素设置一组背景渐变色过渡动画的js代码如下:
$('body').gradientify({ gradients: [ { start: [49,76,172], stop: [242,159,191] }, { start: [255,103,69], stop: [240,154,241] }, { start: [33,229,241], stop: [235,236,117] } ] });
配置参数
jquery-gradientify插件的可用配置参数如下:
参数 | 默认值 | 描述 |
gradients | [] | 渐变的开始和结束颜色,RGB值,必填参数。 |
angle | 0deg | 渐变的角度,可选参数。 |
fps | 60 | 每秒钟的频率。值越大则过渡动画越平滑,但对性能的影响也越大。可选参数。 |
transition_time | 8 | 两个渐变过渡之间的时间间隔。可选参数。 |
jquery-gradientify背景渐变过渡动画插件的github地址为:https://github.com/codefog/jquery-gradientify