极简产品,

让交互效果更有质感,「Shiny.js」可为网页元素增加光感反馈效果

xinzhi xinzhi 作者 01/17, 2019 · 1 min read
让交互效果更有质感,「Shiny.js」可为网页元素增加光感反馈效果
分享本文

使用 Apple TV 的遥控器触摸控制,屏幕上的应用方块会显示出不同角度的反馈,伴随光照角度还会有细腻的光泽效果。网页上也有较多场景需要使用拟物化设计,为了显示更真实的效果,还会利用物理设备的特性,比如重力感应。


Shiny.js 是一个 Javascript 动画库,用来实现逼真的物理反馈效果,通过重力感应,给网页元素边角渲染上光照反射效果,使用依赖浏览器对 DeviceMotion 事件的支持。

SHINY 可以应用在文本内容、背景和边框等元素上,用户设备旋转屏幕或轻微挪动设备,网页即可响应呈现出光泽效果,网站 Demo 提供了一个信用卡的示例,就像卡片拿在手中观摩一样。

更多信息和使用文档可以在 GitHub 查看,更多设备兼容性已在研发计划中。

开始订阅
每周发送内容更新汇总到你的邮箱(随时退订),关注微信公众号「团队头条」(ID:teamxtt)获取每日更新。
xinzhi
xinzhi 作者
The best is yet to come. 产品工程师@Workbene, Inc