视差相册左滑效果,居然能玩出数码相机变焦大片的质感?
迈凯伦的城市超跑推文,用一个「数码相机变焦」的创意脑洞,叠加左滑推镜的交互逻辑,让画面随着焦距拉近切换,质感拉满!
滑动感受一下:
*素材来自迈凯伦摩登锋格,城市律动
组件:视差相册-左滑(自动对齐)
编号:11844(组件)
原本略显单调的滑动动作,有了「变焦环」概念的加持,瞬间就和常规滑动效果拉开了差距。
当然,像宝诗龙这样把下方滑动图做成工艺流程递进呈现的玩法,也同样很有亮点:
*素材来自Boucheron宝诗龙宝诗龙Quatre工厂
组件:视差相册-左滑(自动对齐)
编号:11844(组件)
视差相册滑动更多创意玩法戳:“小红书的这种视差相册滑动,怎么做的?”
下面我们以迈凯伦的模拟数码相机变焦玩法为例,一起看下如何实现这个效果吧。
详细教程:
工具:i排版SVG编辑器,网址:SVG.iPaiban.com
组件:视差相册-左滑(自动对齐)
编号:11844 (组件)
第1步:选择组件
登录i排版SVG编辑器后,点击编辑器左侧「组件」按钮,在「滑动」-「视差滑动」分类中找到「视差相册-左滑(自动对齐)」组件,或者直接搜索组件编号11844,点击选择。
第2步:准备好图片素材并上传
准备好背景图、上方滑动图、下方滑动图,所有图片尺寸保持一致,上下方滑动图数量保持一致。
无论上方滑动图还是下方滑动图,滑动图的内容最好设计在图片左右居中位置。如下所示:
第3步:选择图片跳转
该效果可以选择为滑动图添加超链接或小程序跳转。本文的演示案例没有跳转,保持默认「无」即可。
第4步:预览并导入公众号后台
点击页面最右侧「预览草稿」可随时预览效果,尽量使用手机扫码预览。效果满意后点击「同步至微信后台」同步到自己的公众号就可以了。
新用户在「新手礼包」可领取3天企业标准版会员免费商用,以及22个常用必备组件的大礼包(1年)。随礼包附赠千元优惠券,每单最高立降500元。
























