Project Description

更新日期: 2017-11-01

用来实现这种效果,圈的颜色、大小、圈内文字/icon等都是可设置调整的。

tabs element设置界面

编辑界面

tabs element设置界面

设置选项

  • Add / Edit Items,可以新增和编辑相应的元素,会有如下设置选项:
    • Filled Area Percentage,圆圈填充区域的百分比
    • Filled Color,填充颜色
    • Unfilled Color,未填充区域的颜色
    • Size of the Counter,圆圈的大小,和设置字体大小类似,单位是px,不过在这里只需要填写数字,不要带px
    • Show Scales,设置是否显示圆圈周围的刻度
    • Countdown,设置是否让圆圈逆时针方向进行填充
    • Animation Speed,动画速度,通常设置1500以上,也就是动画持续的时间是1.5s,时间设置的太短,动画就有点太仓促了
    • Counter Circle Text,圆圈中的文字,如果填写百分比的话,就和Filled Area Percentage的百分比一致,这样圆圈显示的填充百分比就和文字所表达的符合了
  • Offset of Animation,这个设置的意思是什么情况下触发动画效果
    • Top of element hits bottom of viewport,元素的顶部到了浏览器窗口最下沿的位置,也就当我们流量一个比较长的页面的时候,这个动画效果在马上就要出现在我们视线的时候,就已经开始动了,默认是这个效果,也就是浏览的时候,动画效果出现的会比较自然些。 关于Offset of Animation的默认值的修改,可以到 Theme Options -> Fusion Builder Elements -> Animations 中进行设置
    • Top of element hits middle of viewport,元素的顶部到了浏览器窗口的中间位置,才会开始触发动画效果
    • Bottom of element enters viewport,元素的底部进入了浏览器窗口之时,就触发了动画效果
  • Element Visibility,默认不修改,此选项和适配移动端有关系,可参考《设置移动端适配》
  • CSS Class / CSS ID,默认不需填写内容,需要针对此内容进行单独的样式调整时才考虑使用这2个选项

效果示意

19%
33%
65%
87%

Avada版本

适用:Avada5.2.2