如何利用简单的SVG技术使微信公众号文章脱颖而出？

今天想要分享一篇比较有意思的微信公众号交互图文，奔驰在其官方微信公众号「梅赛德斯-奔驰」发布的一篇推送《拨开迷雾》：

传送链接：

拨开迷雾

奔驰这篇交互以「迷雾」元素作为切入点，引出奔驰五周年生日、聚焦女性力量的主题。迷雾开头可以有效吸引读者注意力，「点击雾散」四个字用SVG做闪烁效果，与受众进行第一次互动，第二次互动为雾气自然向下散开巧妙加入「展开」效果，使得品牌与主题衔接无比自然。加入「浮层左右滑动」的交互效果，受众自然而然拨开大片的叶子，从而展示出「物欲」「标签」「束缚」这三大主题，在巧妙植入产品的同时也升华了产品主题。

上次做这个交互效果比较出色的还是今年9月份微信公众号「VOGUE」发布的一篇《THE9-虞书欣 │ stripes》

传送链接：

THE9-虞书欣 │ stripes

这两篇都是属于技术简单，但效果出彩的典型案例。

在这两篇中使用到的主要效果为：左右滑动。左右滑动布局是交互图文中较为简单的一类。通常情况下，浏览器中的默认滑动方向为向左滑动（也最符合用户阅读习惯）。利用属性（控制文本从右往左排列），可实现向右滑动。VOGUE这篇交互也采用了同样的技术逻辑，但创意令人惊艳：全文用带子遮挡，均可向左向右滑开，滑开后露出底图和视频。用户可保留部分带子在屏幕中，与背景壁纸构成新的画面。

基于上述技术原理，我司首发了图文内的左右滑动分割创意，并产出了多篇优质的商业案例：

切蛋糕

你是不是有话对我讲？

选择题

选择困难症？

拉帷幕

上汽通用别克与陕西大剧院开启战略合作

与普通左右滑动露出底图的创意相比，VOGUE这篇推送的一个优势在于前景与背景的遮挡比例。此前我们交付的图文，通常是前景滑动图层对背景100%遮挡，通过文字提示、箭头提示的方式引导用户执行滑动操作。而本文利用PNG图片的透明属性，将前景带子与背景壁纸的遮挡比例控制在61.8%左右，滑动前会露出一部分底图。这种前景和背景共存的状态，巧妙地构成了一个隐含的「意符」 ，用户无需明显提示就会主动尝试拨开带子，使整篇文章交互体验非常流畅，顺其自然。