HTML部分如何滑动完成

Question

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

Answer 1

我是Beef的首席网络开发人员,所以我会尽力让你了解我们的工作.大多数这应该能够从源代码中解决,所以不要发布太多的例子.

每个面板都是a <section>,宽度均为90%.然后,每个面板被赋予一个fixed位置,和左侧的值0 5%,95%等,以空间出来.然后我们在主体上有一个类,说明哪个面板是打开的,并给另外两个宽度5%例如:

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

等等等等.我们使用JS来改变适当的类,CSS转换处理实际的动画.还有一个主干核心处理将所有内容加载到面板中,jQuery将它们淡入.我们在Middleman中构建它,因此它抽出一个静态html版本,因此也应该在没有JS的情况下工作.

我们在构建它时遇到了大量的错误,特别是让所有响应的东西都能正常工作,并在iPad上滚动等等.但是通过源代码可以很好地了解我们所做的事情.

谢谢你的兴趣.更多Q只是让我们知道.

干杯!