基于开源共享精神的SVG交互图文搜索引擎·无偿使用·公益助力疫情下数字经济复苏
热门
伸长
模版
横屏
游戏
编辑器
本篇技术部分的视觉设计与交互开发由我们 JZ 完成,呈现出了包括动态镜头控制播放、触摸屏幕文字碎裂等视觉效果。
若要评选一篇年度最佳的滑动式排版,非 Apple 的本文莫属。该作发布后,不少运营人对其原理丈二和尚摸不着头脑。实际上,苹果利用的是透明 PNG 上双色隐藏方法,白色前景内容在白色背景区域时不可见,在黑色背景区域时可见,而黑色前景内容则正相反。目前该效果可以在 SVG 黑科技编辑器(https://www.e2.cool/)中通过「等分容器滑动」实现。
CSS 滑动+SVG 触发,Vogue 本期的一图流融合了最顶尖的两种黑科技互动技术,无缝绘制了一条上海滩潮人众生相。本文 SVG 交互技术由我们 JZ 支持。
SVG 其实在前端领域中,常被用于数据可视化项目,但在新媒体领域尤其图文范畴内,鲜有得力大作。本月,我们 JZ 的赵阳主导了一篇 InfoGraphic 的互动式图文技术,将数据报告通过 SVG 交互动画可视化展现。
谷粒多在十一月通过一则典型的互动长卷发布新品奶昔,前期由 GL 测算了互动代码量,荒村完成开发工作,讲述了一只社畜奔忙上班的历程。
网易正在努力进入 SVG 交互图文领域。虽然目前技术、设计都还略显稚嫩,但本月的互图文依然有所进步。本作掷骰子的互动游戏十分出彩,尽管通篇主要牵涉的是动画,但骰子游戏的执行逻辑让图文变得妙趣横生。
长按-松开对应可见性的作品许久未见,而极客公园就采用了该互动模型,制作了一组前沿思考论坛的预热海报,交互部分由振铭操刀。
尽管我们一再强调,位图标签作为互动元素,会在不少机型上翻车——如过低版本安卓、刷机苹果等。但依然有不少定制互动图文的品牌主宁可放弃这类用户,强制使用位图进行互动。本作便是荒村苦口婆心劝阻甲方无效,而以位图方式实现的随机娃娃机交互。如果不考虑适配性问题,可以说位图在视觉呈现上确实比矢量图更精致,但我们依然不建议品牌在近阶段尝试位图互动。而如果确实有其必要,则一般会在背景图参数中预置一张 GIF,让无法看见前景互动的用户直接观看背景图的动态变化。
CoolSITE360 提供 UI/UX 支持 Copyright © 2013-2023 iSVG投稿/定制/培训:微信公众号、小红书「iSVG」