先上效果：

要实现这个效果，首先要思考如何给文字添加背景图，且只给文字添加。

1. 先简单的实现文字：

<view class="text">Coolui Scroll</view>

.text {
	font-size: 40px;
	font-weight: bold;
	color: black;
}

效果是这样的：

2. 然后给文字加上背景

.text {
      font-size: 40px;
      font-weight: bold;
      color: black;
      background-image: url('https://test.wzs.pub/pic/bg2.jpg');
      background-size: cover;
}

效果是这样的：

3. 如何只把背景加到文字上呢？
利用css的background-clip: text;来实现

.text {
     font-size: 40px;
     font-weight: bold;
     color: black;
     background-image: url('https://test.wzs.pub/pic/bg2.jpg');
     background-size: cover;
     background-clip: text;
     -webkit-background-clip: text;
   }

效果是这样的：

4. ？？没有达到想要的效果？
那是因为你的文字颜色没有透明，所以没有显现出背景图

.text {
     font-size: 40px;
     font-weight: bold;
     color: transparent;
     background-image: url('https://test.wzs.pub/pic/bg2.jpg');
     background-size: cover;
     background-clip: text;
     -webkit-background-clip: text;
   }

效果达到预期了：

效果不明显？我们换张图：

5. 接下来就是如何让文字动起来了
我们设置背景图片不重复，去改变background-position的值

.text {
     font-size: 40px;
     font-weight: bold;
     color: transparent;
     background-image: url('https://n.sinaimg.cn/sinacn15/0/w2048h1152/20180618/b195-heauxvz0078139.jpg');
     background-size: cover;
     background-repeat: no-repeat;
     background-clip: text;
     -webkit-background-clip: text;
     background-position: -120px center;
   }

效果是这样的：

后面的文字因为透明并没有显示出来，如此以来我们改变background-position的值就能让文字一个一个显示出来。结合小程序scroll-view下拉刷新的移动值threshold就能实现随着下拉文字出现的效果了

示例 demo

请微信扫码打开小程序查看

详细文档

gitee文档入口
github文档入口