【问题标题】:What is this Front End Design Pattern这是什么前端设计模式
【发布时间】:2014-05-04 03:13:26
【问题描述】:

我正在建立一个网站,并且一直在研究各种前端设计。我见过许多具有交互式垂直部分的现代网站。这意味着当您向下滚动页面时,用户会看到新的相关内容。

这个网站有一个我正在查看的设计示例,请忽略我不会在我的网站中使用的内容。当您向下滚动页面时,我将更多地谈论它如何具有各种谨慎的部分。

http://www.elegantthemes.com/gallery/divi/

问题

这个设计有特定的名称吗?我有兴趣了解更多相关信息并找到更好的示例,但很难找到专门用于实现此功能的网站。一个我可以研究更多的设计名称将是完美的,任何关于建立这种风格的资源也将受到欢迎。

最佳答案

在与人交谈时,我认为最好的答案是这是一个滚动网站设计。这似乎有点简单,但它并不完全适合任何更具体的设计。我选择了视差,因为它的结果让我找到了更好的谷歌搜索和我试图指定的示例。我还将分享一些我在搜索中找到的好例子。

编辑

已经做更多的研究,并在使用这种设计模式的特定网站上工作。我找到了更好的答案。这些称为滚动站点,也称为单页站点。还有一些像one 这样的 JS 库,可以帮助您构建自动滚动功能。

有用的滚动 ui 工具:http://janpaepke.github.io/ScrollMagic/
有趣的内容和良好的视差网站:http://kennedyandoswald.com/#!/jfk-bio

【问题讨论】:

标签: javascript html css design-patterns frontend


【解决方案1】:
【解决方案2】:

这叫做“无限滚动”。

相关xkcd:https://xkcd.com/1309/

【讨论】:

  • 嗯,我的兴趣更多是在离散的部分,也许只是样式而不是正式的设计。但是内容会全部在前面加载,并且会像传统网站一样有适当的页脚,但是内容会像无限滚动一样被分成几个部分。我想知道是否有更具体的分区分区?你肯定会因为引用 xkcd 而获得奖励积分。
【解决方案3】:

Bootstrap 的 scrollspy 肯定有一些内置的想法,您可以在其中定义触发其他操作的部分:http://getbootstrap.com/javascript/#scrollspy

虽然他们的事情特别适用于正在更新的菜单,但我确信这些事件也可以用来触发其他事情。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-02-06
    • 1970-01-01
    • 2011-01-16
    • 1970-01-01
    • 2011-01-31
    相关资源
    最近更新 更多