一看就会，超有用活字格技能：一百四十、随着页面向下滚动时，文字渐显的效果

如何实现这种页面向下滚动时，文字渐入的效果呢？



通过 jQuery，可以实现元素的淡入淡出效果：
jQuery 效果 – 淡入淡出 | 菜鸟教程 (runoob.com)


以fadeIn() 、fadeOut() 方法为例：

使用效果：


这里以向下滚动时文字淡入的效果为例，在页面上，可以这样来设置：
1.为需要渐显效果的单元格，和需要触发命令的单元格设置单元格名称；
2.因为元素要在浏览时淡入显示，所以可以在页面加载时先通过hide()方法将对应元素隐藏；

2.上传页面级别的JS文件，获取浏览器中的滚动条距离，当滚动距离到达某个值时，通过executeCellCommand执行指定名称单元格的命令。
注册指定页面的JavaScript文件 - 活字格V7帮助手册 - 葡萄城产品文档中心 (grapecity.com.cn)

示例代码如下：

1. window.onscroll = function() {
   
2.     //document.documentElement.scrollTop和document.body.scrollTop用于获取滚动条滚动后的距离
   
3.     var t = document.documentElement.scrollTop || document.body.scrollTop;
   
4.     if (t >= 360) {
   
5.         Forguncy.CommandHelper.executeCellCommand("渐显")
   
6.         //滚动距离大于等于360时，执行名称为“渐显”的单元格的命令
   
7.     }
   
8. }

复制代码

最终效果：


附上demo，可以参考一下~
文本渐显.fgcc (88.37 KB, 下载次数: 73)

2022-4-29 16:57 上传

点击文件名下载附件