最新公众号「双层叠加滑动」样式的教程来了！包会！

从去年开始，双层叠加滑动样式就被各大账号广泛应用，像自媒体公众号GQ实验室、吓老湿，品牌公众号奔驰、I DO、滴滴出行、万宝龙等，更是多次使用这个样式落地自己的创意。

也因此，老沙去年便写了双层叠加滑动样式的教程，让大家都能玩起来。不过现在在看那个教程，会有一些问题导致不能实现想要的效果。

所以，今天送上最新的教程！

双层滑动样式的使用分为两种情况：一张叠加图和两张叠加图。

一张叠加图

以“IDo官方”的推文《爱情手帐 | 谁是你的天生一对？》中的效果为例：

首先准备好两张图，并且需要满足以下的条件：

1、两张图的尺寸大小必须一样

2、叠加图（上面可以滑动的图）必须是 PNG 格式，且背景透明

3、叠加图必须要跟背景图（下面不能滑动的图）的位置相吻合

打开i排版编辑器（iPaiban.com)，在「特色样式」中找到下面小鸟的滑动样式。选中，准备编辑。

接下来是替换图片，打开 HTML，查看代码。

如下图所示，找到对应图片的网址并替换，返回到编辑页面就可以看到最新效果图了。

生成图片网址的方法：将图片上传至公众号后台，在多媒体素材的图片中-选择要生成网址的图片后点击“查看大图”-点击“查看原图”-获得网址

▲第1步

▲第2步

▲第3步

最后返回到编辑页面，查看效果图。部分童鞋可能会遇到图片不显示的情况，没有关系，这是微信限制的缘故，之后同步到公众号后台后就可以正常显示了。

方法要求与一张叠加图的情况相基本同，因为多出来一张叠加图，所以需要添加一行代码。代码下文中准备好了。

以“GQ实验室”推文《朋友圈里的情侣们越来越2，要不要屏蔽他们？》中的效果为例：

首先准备好三张图，并且需要满足以下的条件：

1、三张图的尺寸大小必须一样

2、两张叠加图必须是 PNG 格式，且背景透明

3、两张叠加图必须要跟背景图的位置相吻合

打开i排版编辑器（iPaiban.com)，同样找到并点击选择「特色样式」中的小鸟滑动样式。

打开 HTML，定位到代码的第8行，在前加上下方代码。

▲添加加代码的位置

▲加完之后的效果

接下来是替换图片，根据下方图片的标示，找到图片的网址并替换，返回到编辑页面就可以看到最新效果图了。

以上就是完整的教程了，全程主要就是替换几个网址。大家不要一看到代码就退缩，恰当适量地使用代码，会让排版出彩很多

前几天i排版刚推出了「三层叠加滑动」，只多了一层，实现难度却大了很多，欢迎感兴趣的企业或品牌联系玉兔微信（ID：Playhudong15）沟通定制。