摘要：昨天我们剖析了一下翻阅体验的实现。今天要剖析另外一个很有意思的效果——视频拼图。网站中第一部分第二页《月熊的标志》是月熊志中互动性较强的一页，页面上会随机分布9块视频碎片，用户可以通过鼠标或者触控移动碎片完成拼图。在这个Demo中，我们需要引用2个JavaScript库，jQuery和Hammer.js。Hammer.js 是一个手势触控JS库，能够为网页加入Tap、Swipe、Drag等事件，并且同时支持鼠标和触控输入，免去自己监听事件和判断浏览器兼容等问题。建立九宫格首先，我们在页面中建立一个九宫格： 1 HTML: 2 3 4 … 5 6 7 8 CSS... 阅读全文

摘要：最近坐地铁发现“亚洲动物基金”在地铁上做了很多公益广告，比较吸引人的是一个月熊的广告。做的很可爱。回去就搜了一下，发现这个网站是HTML5做的，非常炫。所以想学习一下，方法就是传统的学习办法，模仿、剖析，看看人家是怎么做的。这个网站提供的是了一个沉浸式的翻阅体验，用户可以在页面切换时体验到真实的3D翻书效果，非常的酷炫。而要实现这个效果，需要用到CSS3 3D transform和JavaScript，同时为了实现跨浏览器和跨设备的统一体验，用到hammer.js库去处理滑动操作。就是下面这个样子的，非常漂亮：示例效果：查看代码发现，网页的结构十分简单，整个杂志是一个ID为magazine的d 阅读全文