轩枫阁

前言

视差滚动，大家也许并不陌生。但是对于视差方向移动，你是否有见过效果呢？看官请进来瞧瞧~

demo

轩枫阁404页面：http://xuanfengge.com/demo/201406/404/

github 404页面：https://github.com/404

说明：轩枫阁的404页面灵感来自于Github 404页面效果，并增强了交互。同时轩枫阁的第一个404页面效果是腾讯公益404寻找孩子页面，现在的版本是二次改版，增强了交互，即进入404页面后，需要在当前页面中充当福尔摩斯角色，通过线索寻找到返回首页的入口。

视差滚动

简介：视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。

示例（最后一个专题）：http://www.xuanfengge.com/funny/

视差方向移动

简介：这个名称是博主自己起的→_→。即多个元素跟随鼠标移动方向，以不同的速度和距离，在同一个方向上进行移动的交互。

插件：使用的是shake.js这个jQuery插件。首先要先加载jQuery才会生效。

下载：shake.js 查看全文

前言

最近百度再次升级新首页，UI大赞，连新首页的介绍页也显得高大上，使用单页滑动OnePage效果。如果你使用账号登陆百度首页，会陆续收到升级的通知。然后在引导页，发现了一个用户体验上的创意，就是结合CSS3实现晃动的引导箭头。

Demo

预览：http://xuanfengge.com/demo/201406/guide/

效果图：

查看全文

序言

一只手掌，两根手指，一个创意的世界~

配图

查看全文

前言

也许你有注意到本站的logo，点击之后，会产生一个纸飞机飞翔的过程，是一个3D动画效果，目前仅支持webkit内核浏览器预览效果。

demo地址

http://xuanfengge.com/demo/201402/plane

实现原理

整个动画过程包括

消息面板翻转、飞机两翼折叠、飞机平放预备飞行、飞机后退助跑、飞机向前飞翔、整个过程的背景颜色过渡。

简单解析

主要的动画效果（步骤分解状态）使用CSS3的变形(transform)、转换(transition)、动画(animation)、视图距离(perspective)等等新属性实现，并结合js的setTimeout控制动画时间，通过增减css的class来实现整个过程动画。 查看全文