节庆与专题 SVG 推荐
点击灰白的上海风景图,可切换为彩色镜头同时播放视频。这里利用的是「假封面」双层触发逻辑,既消除了表层的静态图层又击中了下方视频播放按钮。
为了让人大代表履职信息发布更为出彩,人民网也同样采用了最新三代伸长的 SVG 技术,将横版的 infographic 卷轴徐徐拉开。
本作从海上生明月的代码动画场景开始,以 SVG 交互讲述了钱塘江大潮的地理、人文等方方面面,音画结合,生动有趣,不愧是交互实验室与央视新闻的强强合作。
融合多种潮流而高端的 SVG 特效,却毫无违和地呈现了军队思政主题工作,足以让不少商业品牌汗颜。
裸眼 3D 排版,回顾 96 年的人民子弟兵峥嵘岁月,结合了包括音频嵌套、连续擦除、打印机伸长等交互结构,让传统的图片展示变得生动且整体性强。
依托熟悉的 2.5D 画风,展示了「十三五」以来中国经济社会的变迁。
本作采用 SVG 水墨手账风设计,在记者的日记中将十年中国娓娓道来。视差滑动中承载了十余年的故事,数据可视化部分又强有力地展现出中国力量。
开场以序列帧将绝美视频特效高清载入,衔接巨量的视差分层滑动展现出了恢弘的丝绸之路图景,构成了形如清明上河图般高密度信息表达。
抗美援朝战争胜利70周年纪念交互图文设计,在滑动框架内通过高度坍缩和位移动画实现了画面的全屏更新效果。
采用了得当的手法处理动画播放的过程,保证清晰度的同时,又完美隐藏并衔接了视频组件。
基于知名开发者三千喵的「旋转式切换」SVG 结构,迭代为差速运行的伪无限切换结构,实现了青年人物介绍的创新形式。
将其动态范围共设置为六层,给读者以强烈的画面纵深感,实现了一套令人叹为观止的视差滑动特效。