V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
444683462
V2EX  ›  问与答

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

  •  
  •   444683462 · 2014-11-21 16:04:44 +08:00 · 3165 次点击
    这是一个创建于 3654 天前的主题,其中的信息可能已经有所发展或是发生改变。
    http://www.qiniu.com/intro

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

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

    能就一个简单的页面 写一下简单的原理代码吗
    11 条回复    2014-11-22 14:21:04 +08:00
    windirt
        1
    windirt  
       2014-11-21 16:32:59 +08:00
    压根没前端经验的人听说adobe muse可以无脑做这种样子的
    wolfan
        2
    wolfan  
       2014-11-21 16:39:45 +08:00 via Android
    发那啥,vxplo.com
    在线造,好像是企鹅帝家里的。
    learnshare
        3
    learnshare  
       2014-11-21 16:46:48 +08:00
    原理不仅仅是 CSS3,JS 检测页面的滚动也比较重要,CSS 动画是 JS 触发的

    single-page/视差滚动
    thonatos
        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.至于动画,不多解释。
    444683462
        5
    444683462  
    OP
       2014-11-21 17:39:10 +08:00
    @thonatos 我主要就是来问动画效果的。这个滚动插件网上很多。。。
    icinessz
        6
    icinessz  
       2014-11-21 17:42:32 +08:00
    thonatos
        7
    thonatos  
       2014-11-21 17:58:49 +08:00
    @444683462

    呵呵呵,写的太清楚了。

    1.transform:translate3d(x,y,z);
    2.至于其他的那些,基本也可以用这个实现,参考timefunction
    AthensBird
        9
    AthensBird  
       2014-11-21 23:58:13 +08:00
    @learnshare 试用了vxplo.com,这个工具的目的是用来做动画展示用的,而非给前端工程师做动画。要用它来做CSS动画,做好以后移植到网页里里面恐怕还要费一番工夫。
    learnshare
        10
    learnshare  
       2014-11-22 10:44:47 +08:00   ❤️ 1
    @AthensBird Adobe Edge Animate
    AthensBird
        11
    AthensBird  
       2014-11-22 14:21:04 +08:00
    @learnshare 收到:)
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2799 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 14:13 · PVG 22:13 · LAX 06:13 · JFK 09:13
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.