请大家解释下这个网页的知识点 谢谢

[444683462]

http://www.qiniu.com/intro

原理是CSS3的动画属性控制元素移动。
现在网络上很多类似的网页。

一般是用什么工具来做的吗？
还是有什么框架？

能就一个简单的页面 写一下简单的原理代码吗

[windirt]

压根没前端经验的人听说adobe muse可以无脑做这种样子的

[wolfan]

发那啥，vxplo.com
在线造，好像是企鹅帝家里的。

[learnshare]

原理不仅仅是 CSS3，JS 检测页面的滚动也比较重要，CSS 动画是 JS 触发的

single-page/视差滚动

[thonatos]

项目：fullpage.js
地址： https://github.com/alvarotrigo/fullPage.js
结构：
<div class="outerBox">
<div class="innerBox">Vertical</div>
<div class="innerBox">Vertical</div>
<div class="innerBox">
<!--vertical-->
<div class="slideBox">Herizonal</div>
<div class="slideBox">Herizonal</div>
<div class="slideBox">Herizonal</div>
</div>
<div class="innerBox">Vertical</div>
</div>
原理：
1.外层一个固定宽高的outerBox，设置overflow：hidden；
2.1. 垂直：设置相对位置垂直排列的innerBox
2.2. 水平：原理同上。
3.js库里集成了一个jquery.mousewheel插件进行鼠标监听，库自己（这里不确定）做了键盘按键的监听。
4.检测鼠标动作（up/down），获取当前的index，并设置下一页的next/prev，使用css3属性（开启的话，因为那样比较速度比较好。。），transform:translate3d(x,y,z)，这里注意，不管你的innerBox的index是多少，其实都是转移到next/prev，再判断当前的index和targetIndex，如果没到到达，就继续执行一次slideUP/slideDown函数。
5.至于动画，不多解释。

[444683462]

@thonatos 我主要就是来问动画效果的。这个滚动插件网上很多。。。

[icinessz]

http://www.dowebok.com/120.html

[thonatos]

@444683462

呵呵呵，写的太清楚了。

1.transform:translate3d(x,y,z)；
2.至于其他的那些，基本也可以用这个实现，参考timefunction

[AthensBird]

@learnshare 试用了vxplo.com，这个工具的目的是用来做动画展示用的，而非给前端工程师做动画。要用它来做CSS动画，做好以后移植到网页里里面恐怕还要费一番工夫。

[learnshare]

@AthensBird Adobe Edge Animate

[AthensBird]

@learnshare 收到:)