sliding - HTML部分滑动是如何完成的

Question

我很好奇 http://www.wearebeef.co.uk/ 上的滑动部分如何？完毕？我试过谷歌搜索，但我真的找不到完成方法。

Answer 1

我是 Beef 的首席 Web 开发人员，所以我会尝试向您简要介绍一下我们所做的工作。其中大部分内容您应该能够从源代码中计算出来，因此不会发布太多示例。

每个面板都是一个 <section> , 宽度均为 90% .然后给每个面板一个 fixed 0 的位置和左值5% , 95%等把它们隔开。然后我们在 body 上有一个类，说明哪个面板是打开的，并给其他两个宽度 5%例如:

body.home panel.work,
body.home panel.noise {
 width:5%;
}

等等等等。我们使用 JS 更改适当的类，CSS 转换处理实际的动画。还有一个 Backbone 核心，负责处理将所有内容加载到面板中，然后 jQuery 将它们淡入。我们在 Middleman 中构建它，因此它会输出一个静态 html 版本，因此应该也可以在没有 JS 的情况下工作。

我们在构建它时遇到了很多错误，尤其是让所有响应式的东西正常工作，以及在 iPad 上滚动等等。但是通过源代码仔细看看我们做了什么。

感谢您的关注。任何更多的问题都让我们知道。

干杯!