星巴克、宝格丽都在玩的视差滑动，高级高级高级啊！（拍大腿尖叫）
「蒜鸟蒜鸟，这么高级的排版，窝是不可能yóng有了。」
是什么排版让第一次看见它的小伙伴都直呼高级到不能拥有？
答案就是视差滑动！
啥是视差滑动？我们先看案例感受下就懂了。
今天给大家整理了7个不同类型的视差滑动排版案例，分别来自古茗茶饮、星巴克中国、BVLGARI宝格丽、默沙东招聘、今日头条、 COS官方、Marshall马歇尔公众号，一起看看吧。
PS：点进案例原文，体验更佳~
1. 古茗茶饮
《古茗×天官赐福动画，新年联名活动明日上线！》
交互简述：
这篇来自古茗茶饮的IP联名文章通篇SVG非常精彩，点击首屏切换动画后的一段立体视差滑动，让“纸片人”更加生动出现在眼前，用户通过滑动的方式也更加有操控体验。此类SVG创意形式非常适合“二次元”画面运用，完成指尖动起来的效果。
视差类型：
立体视差上滑
*本案例效果需定制，SVG及设计需求请添加playhudong15
2. 星巴克中国
《联名新品｜来星巴克和史努比快乐贴贴！》
交互简述：
动效元素和横向视差滑动的结合，其中包含视频号这样可跳转的滑动元素，亮点是前景遮罩，飞着的元素在活动的过程中更有穿梭感。
视差类型：
横向视差滑动
3. BVLGARI宝格丽
《探索无垠奇境》
交互简述：
除了常见的横向或纵向的滑动方式，视差滑动也可以使用这种全局自由的滑动，在有限的屏幕内展现更多内容，配合星空感的主题，提供更加沉浸式的视觉体验，并且可以实现点击跳转外联小程序等功能。
视差类型：
自由视差滑动
*本案例效果需定制，SVG及设计需求请添加playhudong15
4. 默沙东招聘
《打工人想要温暖这么难吗？！！！》
交互简述：
默沙东招聘的关于员工福利的文章，首先在创意上就十分出彩，通过场景漫画的形式让打工人狠狠共情，又将场景和温度等碎片结合。阅读的过程中每组元素随着滑动凑到一起，各组中的每个元素滑动时速度各异来控制整体效果，这也是视差的一种经典呈现方式。
视差类型：
差速式视差上滑
5. 今日头条
《一艘开往克里特岛的船｜岛屿开播》
交互简述：
作为节目的官宣，符合调性最为重要，这篇内容在发出后反响非常好，得益于画面内容风格和SVG的完美融合。同样是讲元素拆解进行差速视差滑动，静态与动态图片的结合滑动效果更好，标签拼贴的视觉更是和多层元素十分搭配。
视差类型：
差速式视差上滑
*本案例效果需定制，SVG及设计需求请添加playhudong15
6. COS官方
《出场即高光》
交互简述：
横向视差滑动中有很多通过图片间上下位置错开来让滑动时视差效果更明显，同样可以在图片上放置链接跳转。
视差类型：
横向视差滑动
7. Marshall马歇尔
《领蛇年红包封面，来我们的“伍德斯内克”撒点儿野》
交互简述：
首屏的动画效果已经非常有冲击性，展开后的视差部分进一步提升了视觉。这篇文章的视差元素更加多元化，可跳转的视差元素中甚至有红包封面。跳转元素的玩法脑洞可以更大点，比如配置视频号卡片，都是可以尝试的。
视差类型：
差速式视差上滑
以上就是视差滑动。
简单来讲就是让多层图片以不同的速度或角度移动，形成立体的运动效果，带来非常出色的视觉体验。
因为它的高级与实用性，现在视差滑动已是许多大牌的首选SVG形式。但！它不是大牌的独有，每个公众号运营的小伙伴都能用！
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）