shadowtext是一款可以可以进行鼠标互动的文字阴影特效jQuery插件。使用该插件可以制作各种文字阴影效果,并且在鼠标移动到文字上面的时候,文字阴影会随着鼠标而变化,效果非常不错。
使用方法
使用该文字阴影特效要引入jQuery和jquery.shadowtext.js文件。
<script src="jquery.min.js"></script> <script src="jquery.shadowtext.js"></script>
初始化插件
在你需要制作文字阴影效果的文字的父容器上调用该插件:
$('.container').shadowtext();
配置参数
- blurClose:默认值:0。最接近文字时的模糊数量。
- blurFar:默认值:10。离文字最远时的模糊数量。
- color:默认值:
"#000000"
。设置阴影的颜色。接收3个或6个数字的十六进制颜色值,或rgba(),rgb()或颜色关键字。透明度值会被忽略。 - distance:默认值:10。阴影离文字的最大距离。
- easing:默认值:
''
。如果指定这个参数,会根据鼠标的距离来使用easing方法来决定阴影的距离。 - framerate:默认值:25。每秒的帧率。不要改变这个值,除非你想制作特殊效果。
- hideText:默认值:
false
。设置为true
时会隐藏文字,只显示阴影。 - mouseRange:默认值:500。When the mousepointer is at or beyond the specified mouseRange from the text, the shadow will be at it's farthest.
- opacityClose:默认值:1。最接近文字时透明度的数量。范围0-1。
- opacityFar:默认值:1。离文字最远时的透明度数量。范围0-1。