操作栏弹出框动态效果和视差滚动

手机端的交互体验越来越重要，因为好的体验能吸引用户的使用，提高用户的愉悦感；本文主要实现两个交互体验：

底部操作栏和相应弹出框的切换动态效果，切换过程避免单纯的隐藏显示（过渡过程比较生硬），改成上下滑动过程，使整个过程显得流畅；

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

底部操作栏和相应弹出框的切换动态效果

编写静态页面，html代码和css样式如下图，这一块比较简单，可自行查看。

实现原理，点击操作栏的按钮，先往下收起操作栏，等收起完毕再往上显示弹出框列表，收起和显示是一个先后连续动作，下面以素材列表为例子分析：

第一步，由于这个动态效果会被多个地方引用，所以写成一个函数animatePanel；

第二步，素材按钮（meterialButton）点击调用该函数，过程是先收起操作栏（control-button），同时把底部（footer）往下收起（使用animate过渡）；为了使收起和显示先后效果更明显，所以使用了定时器（setTimeout），过了定时器设置的时间才执行往上显示素材列表（meterial-panel），同时把底部（footer）往上显示（使用animate过渡）。

第三步，点击素材列表关闭按钮也是调用函数（animatePanel），过程类似第二步，这里就不多分析。

Tips：

1.过渡效果（slideUp、animate、setTimeout、slideDown）可根据实际情况调节，达到最佳效果；

2.定时器（timer）记得注销，避免性能问题。

视觉滚动

编写静态页面，html代码和css样式如下图，这一块比较简单，可自行查看。

实现原理，现在网上有很多插件可以实现视差滚动，比如Sequence.js、Parallax Slider with jQuery等，百度都可以搜索到；本文主要介绍的是利用css样式实现（background-attachment），该属性属于比较偏僻，里面有一个值fixed，fixed 此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动，从而实现视差滚动。

所以拖动上面例子过程，能看出背景图是对于视口固定不动，滚动只是文字，因为文字没有设置该属性。

Tips：所有浏览器都支持。