同样为新品发布,开发者小杨交付至红米的此篇采用了多段伸长逐级显示信息,配合横版视差滑动,将精致做到了极致。最值得一提的是错层滑动结构的巧妙应用,CSS 结构打造 4 层错层效果,使用渐变蒙版让其过渡自然不生硬,信息游刃有余的穿梭其中,生动形象地展示了产品的关键卖点。目前该效果可以在 SVG 黑科技编辑器(https://www.e2.cool/)中通过「等分容器滑动」、「置顶图片」等实现。
新品发布自然少不了高级炫酷的 SVG 交互来作加持,大疆此次发布运动相机 Action 2 采用了全自动动画加载,开屏图片快闪,切换流畅的序列帧动画,继而自动伸长伸展出产品介绍,产品恰时的淡入淡出增加了几分高级感,全文行云流水一气呵成,由 yutu studio 操刀开发。
本文是典型的二叉树逻辑测试题,由 GL 制作开发。通过严密嵌套的编组行为实现每一个选项都参与了最终结果的选择,在此模型的基础上,还可推衍出「伪无限选择器」,或是「多选项测试题」等模型,如生成专属测试题结果、剧本杀等。
翻牌游戏、限时点击的射击游戏、逻辑嵌套的找不同游戏等,开发者小杨为我们展示了游戏类 SVG 的更多创新玩法。为了追求更高精度的画面,利用序列帧动画替换 GIF 动画,保证画面清晰度的统一性,体现了开发者精益求精的态度。
鱿鱼游戏风靡全球,无疑是新媒体的一大热点,将其数字化的游戏也是层出不穷,且来看看 JZ 是如何打造指尖版鱿鱼游戏的。还原度最高也最出彩的莫过于第一关「一二三木头人」,计老师灵活地组合限时触发和双序列帧结构,守门人在时间的控制下自动旋转,参与者通过手动点击控制序列帧瞬发。
一镜到底技术由 JZ 的计老师首创开发,并发布于艺术家张赢系列画作《● 一 ● 镜 ● 到 ● 底 ●》。本次在 GQ 实验室中首次商业应用,配合位移、旋转等多组动画复合而成,更需要开发者对空间和时间的精准把控。
由意符文化为施耐德电气打造的此篇图文最大的亮点在于运用了滑动初始位置居中这一交互技术,结合生动活泼的立体插画,用趣味的方式展现了每件产品的适用场景。目前该效果可以在 SVG 黑科技编辑器(https://www.e2.cool/)中通过「等分容器滑动」、「等分容器滑动(逆向)」实现。
CoolSITE360 提供 UI/UX 支持 Copyright © 2013-2023 iSVG
投稿/定制/培训:微信公众号、小红书「iSVG」