正文
原文中点赞最多的留言也是关于这个排版的,足足是第2条留言点赞数的两倍多。
后来很多公众号都使用过这个效果,这两天又有小伙伴拿着玛莎拉蒂的案例来问这到底是怎么实现的。
x-_p-_o-[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]-o_q-_-x
点此查看原文
开头的 Demo 和苹果、玛莎拉蒂的效果其实是使用了同
一原理实现的。
熟悉交互排版的小伙伴大概可以猜到,这是利用图片间的色彩关系,使用
中间不动上下两层滑动的
三层滑动
制作的。
x-_p-_o-[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]-o_q-_-x
具体怎么制作的,今天情人节,「粉碎爱情」后闲着也是闲着,老沙干脆为以玛莎拉蒂的为例大家全面解密一下,从素材的制作到最后的排版一步一步告诉你。
素材的制作
我们先看下素材:
这里面有3张图需要单独看一下,中间层是一张有一块镂空的GIF: