1
windirt 2014-11-21 16:32:59 +08:00
压根没前端经验的人听说adobe muse可以无脑做这种样子的
|
3
learnshare 2014-11-21 16:46:48 +08:00
原理不仅仅是 CSS3,JS 检测页面的滚动也比较重要,CSS 动画是 JS 触发的
single-page/视差滚动 |
4
thonatos 2014-11-21 17:21:28 +08:00 1
项目: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.至于动画,不多解释。 |
6
icinessz 2014-11-21 17:42:32 +08:00
|
7
thonatos 2014-11-21 17:58:49 +08:00
|
9
AthensBird 2014-11-21 23:58:13 +08:00
@learnshare 试用了vxplo.com,这个工具的目的是用来做动画展示用的,而非给前端工程师做动画。要用它来做CSS动画,做好以后移植到网页里里面恐怕还要费一番工夫。
|
10
learnshare 2014-11-22 10:44:47 +08:00 1
@AthensBird Adobe Edge Animate
|
11
AthensBird 2014-11-22 14:21:04 +08:00
@learnshare 收到:)
|