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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 3660 天前的主题，其中的信息可能已经有所发展或是发生改变。

http://www.qiniu.com/intro

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

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

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

知识点

原理

网页

11 条回复 • 2014-11-22 14:21:04 +08:00

windirt

2014-11-21 16:32:59 +08:00

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

wolfan

2014-11-21 16:39:45 +08:00 via Android

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

learnshare

2014-11-21 16:46:48 +08:00

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

single-page/视差滚动

thonatos

2014-11-21 17:21:28 +08:00

项目：fullpage.js
地址： https://github.com/alvarotrigo/fullPage.js
结构：
<div class="outerBox">
<div class="innerBox">Vertical</div>
<div class="innerBox">Vertical</div>
<div class="innerBox">

<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.至于动画，不多解释。