Question

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

Answer 1

我是Beef的首席网络开发人员，因此我会尝试让您了解我们的工作。大多数情况下你应该能够从源代码中解决，所以不要发布太多的例子。

每个面板都是<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只是让我们知道。

干杯！

Answer 2

嗯，如果您检查了网站的源代码，那么会有一个名为application.js的脚本文件，它包含一个名为cycleImages的函数。当我搜索它时，它引导我进入这个网站：

- 它与网站中的不同，但我认为它的功能相同。

您还可以查看代码中的application.css，您将能够看到该网站实现了CSS3属性：transition

你可以从css-tricks网站或w3schools看到演示，或者......在这里

可能还有其他技巧，但你只需要在网站上彻底查看它是如何完成的。