手机一斜，网页就跟着你动，这库太野了
上周我在Pad上刷一个作品集，不小心把屏幕歪了一下，结果整个页面像被风吹过一样，背景和前景错开滑过去，那种物理感直接把我震住了。我以为是哪个大厂做的炫技Demo，一查才发现，全靠一个叫parallax.js的开源库撑着。nn【陀螺仪一开，网页变立体书】n这个库的玩法特别直白：它利用你智能设备的内置陀螺仪或运动检测硬件，根据设备倾斜角度，自动计算场景里每一层的偏移量。你往左倾，前景层就往右滑，背景层滑得更慢，立体感就这么出来了。如果你在电脑上打开，没有陀螺仪，它就会自动切换成鼠标位置追踪——光标移到哪，视角就跟到哪。官网原话是“Radical”，我觉得挺贴切。nn【轻到离谱，但效果不糊弄】n整个引擎非常轻量，官网描述是“Simple, lightweight Parallax Engine”。你只需要在页面里定义几个层，给每层设一个depth（深度值），数值越大，偏移幅度越大，离用户“越近”。它不依赖任何重型框架，纯JavaScript实现，下载包直接从GitHub拿就行。这个项目是Matthew Wagerfield和Claudio Guglieri合作的，两位设计师在Twitter上分别叫@wagerfield和@claudioguglieri，可以关注看看他们别的作品。nn【怎么玩？拿手机打开官网最爽】n官网自己就是优质的演示——matthew.wagerfield.com/parallax。作者特别建议用iPad或带陀螺仪的移动设备体验，因为倾斜控制比鼠标更直觉。你打开后把设备慢慢转，那些层就像悬浮在屏幕里，有种“透过窗户看微缩世界”的感觉。如果你也在做个人网站或者品牌落地页，想加点不油腻的交互感，这个库值得花一下午试试。你最近有在折腾什么好玩的页面吗？可以丢过来一起研究。
评论
暂无评论