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

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

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

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

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

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

Tips：

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

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

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

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

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

       Tips：所有浏览器都支持。