V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Livid
V2EX  ›  设计

关于 Dropbox 首页和 Mac Pro 网站这样的设计

  •  
  •   Livid · 2014-04-22 12:59:03 +08:00 · 8590 次点击
    这是一个创建于 3898 天前的主题,其中的信息可能已经有所发展或是发生改变。
    https://www.dropbox.com/

    http://www.apple.com/mac-pro/

    这种刚好把浏览器的 viewport 占满,然后再往下拉查看更多的设计,是否有什么比较好的介绍文章?
    33 条回复    2014-05-15 09:30:09 +08:00
    Mihuwa
        1
    Mihuwa  
       2014-04-22 13:02:36 +08:00 via iPhone
    之前有在v2ex上看到讨论过。
    Mihuwa
        2
    Mihuwa  
       2014-04-22 13:05:26 +08:00
    视差滚动
    Livid
        3
    Livid  
    MOD
    OP
       2014-04-22 13:06:43 +08:00
    @Mihuwa 我主要是好奇这个首屏的这种设计:刚好占满浏览器的窗口,然后提示你向下滚动查看更多。

    比较好奇这种设计是否有一个业界通用的学名。
    song940
        4
    song940  
       2014-04-22 13:14:18 +08:00   ❤️ 3
    Seita
        5
    Seita  
       2014-04-22 13:14:40 +08:00 via Android
    @Livid 学名应该就是视差滚动。
    disinfeqt
        6
    disinfeqt  
       2014-04-22 13:14:41 +08:00   ❤️ 4
    有,而且是很难听的名字,因为很多设计师都不喜欢 —— 叫 Scroll Hijacking。
    提供几个链接供大家参考:
    http://trentwalton.com/2013/10/23/scroll-hijacking/
    https://news.layervault.com/stories/9138-on-scroll-hijacking
    https://news.layervault.com/stories/12634-the-most-annoying-scroll-hijacking-so-far
    disinfeqt
        7
    disinfeqt  
       2014-04-22 13:16:02 +08:00
    啊,看错了,我说的是 https://www.carousel.comhttp://www.apple.com/mac-pro
    qiayue
        8
    qiayue  
       2014-04-22 13:16:15 +08:00   ❤️ 4
    一个 jQuery 插件可以实现类似功能 http://www.dowebok.com/77.html
    xiao99xiao
        10
    xiao99xiao  
       2014-04-22 13:19:14 +08:00
    @Livid 问的点和Scroll Hijacking一点关系都没有好么,ls几位在看啥。

    说的是让页面的第一部分内容高度刚好匹配到用户浏览器窗口的高度。至于是否要hijack scroll根本和这效果无关啊。

    顺便,这效果是否有名字我也不知道。
    Seita
        11
    Seita  
       2014-04-22 13:22:01 +08:00 via Android
    Parallax Scrolling 和 Scroll Hijacking 的区别好像只有 parallax 的多少…
    yuxhuang
        12
    yuxhuang  
       2014-04-22 13:24:58 +08:00   ❤️ 1
    xiao99xiao
        13
    xiao99xiao  
       2014-04-22 13:26:26 +08:00
    Parallax Scrolling根本是指页面的不同内容随着滚动时移动的位移不同,带来的视差效果。dropbox的网站里连视差都没有,谈何Parallax Scrolling。

    Scroll Hijacking是指对浏览器的滚动行为进行hijack,以实现特殊效果(比如每次都整屏替换,而不是只移动几px)。Mac Pro的页面里确实有这效果,但是这不是 @Livid 问的点。Dropbox主页就没这效果。

    so……
    cameo
        14
    cameo  
       2014-04-22 13:26:46 +08:00
    http://ux.stackexchange.com/questions/40627/what-do-you-call-websites-that-make-heavy-use-of-vertical-scrolling

    有人问了相同的问题,没有特别统一的名称。

    google关键字:vertical scroll to see more design
    cameo
        15
    cameo  
       2014-04-22 13:32:53 +08:00
    搜索时应该意识到我们想找的其实是一种设计的名字,跟怎么实现这个设计无关,所以不应该用viewport这类专业词汇。

    前面有人说的scroll hijacking也只是某种效果的实现方法,而不是设计本身。这两个是不同的,前面已经有人说到了。
    P233
        16
    P233  
       2014-04-22 13:33:29 +08:00 via Android
    fullscreen slide scrolling 或者 full screen scroll jacking 等类似的名字,还谈不上专门的设计名词吧
    POPOEVER
        17
    POPOEVER  
       2014-04-22 13:44:12 +08:00
    为什么我想到视差怪了 =_=
    chaojie
        18
    chaojie  
       2014-04-22 13:44:14 +08:00
    mac pro 那个页面明显设计的不行啊。我这正常的笔记本分辨率用鼠标滚动一直会出错在第一,二页之间,但用下箭头却没有问题。
    已测试多遍。
    qiayue
        19
    qiayue  
       2014-04-22 13:59:23 +08:00
    @chaojie
    pepsin
        20
    pepsin  
       2014-04-22 14:14:34 +08:00
    Stellar.js 可以实现这种吧
    rrfeng
        21
    rrfeng  
       2014-04-22 14:16:33 +08:00
    我的 Chrome 里鼠标滚动有问题,方向键可以。IE 都可以
    why,已经在隐身模式(无插件)测试过了
    dong3580
        22
    dong3580  
       2014-04-22 14:21:52 +08:00
    @qiayue
    这个不错,果断收藏,
    jedicxl
        23
    jedicxl  
       2014-04-22 14:56:46 +08:00 via iPhone
    @POPOEVER 原来我不寂寞^ ^
    s5s5
        24
    s5s5  
       2014-04-22 19:30:51 +08:00
    关注
    isy
        25
    isy  
       2014-04-22 20:44:39 +08:00
    大跌眼镜,楼上的怎么这么多人说是视差滚动,我这个做后端的都知道 Livid 提供的 2 个网站根本不是所谓的视差滚动,是刚好占满首屏的技术。。虽然我也不知道叫什么名字。 但 @qiayue 提供的那个js很切题
    WildCat
        26
    WildCat  
       2014-04-22 21:52:58 +08:00
    http://im.qq.com/macqq/index.shtml

    MacQQ的主页也算吧?
    chairuosen
        27
    chairuosen  
       2014-04-22 22:37:27 +08:00 via iPad
    wezzard
        28
    wezzard  
       2014-04-22 22:56:09 +08:00
    MacPro 的页面我记得是用mp4文件实现的,而且刚刚访问的时候网速太慢了,就fallback成了网页版的,没有任何特效.
    jsonline
        29
    jsonline  
       2014-04-23 02:16:49 +08:00
    哪里有视差?根本不是视差滚动。
    ghbjy1128
        30
    ghbjy1128  
       2014-04-23 21:13:40 +08:00
    @jsonline
    @isy

    视差的,看源代码很明显。
    jsonline
        31
    jsonline  
       2014-04-23 21:48:00 +08:00
    @ghbjy1128 和代码没关系……
    isy
        32
    isy  
       2014-04-23 23:36:56 +08:00
    @ghbjy1128 哪里是视差,难怪不同浏览器显示还不一样了?
    lvwzhen
        33
    lvwzhen  
       2014-05-15 09:30:09 +08:00
    css3 中的100vh也可以满屏显示
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2726 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 15:11 · PVG 23:11 · LAX 07:11 · JFK 10:11
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.