同时左右滑动div

Question

当我点击显示的作品时，我发现这个网站的效果非常酷。 2 个叠加的“div”，信息从左右滑动到屏幕的“中间”。

关于如何重新创建它的任何想法？ 这是网站：http://www.helloimcody.com

Answer 1

这很简单。我将只关注正确的 div，但这同样适用于两者，只是名称和值不同。右侧容器的 CSS 如下：

#info-container {
  z-index: 5000;
  position: absolute;    /* important */
  top: 0px;
  right: -2000px;        /* important */
  width: 280px;
  padding: 75px;
  background: #fff;
  overflow: hidden;
  height: 100%;
}

正如您可能假设的那样，正确的容器具有 info-container 的 id。当您单击页面上的链接打开信息时，脚本将内容添加到容器后，将应用 info-in 类。然后在样式表中：

.info-in {
  right: 0px !important;
  transition: ease .47s all .83s;
  -webkit-transition: ease .47s all .83s;
  -moz-transition: ease .47s all .83s;
}

（注意为另一个容器添加了类似的类和类似的样式）

这会移动容器并添加一个过渡效果，以允许容器平滑地移动到距离右侧 0px 的位置，还添加了一个小延迟，可能是为了让两个容器中的内容完全加载。

我假设您对 javascript/jquery 的了解足以执行交换内容和从元素中添加/删除类的任务，所以我不会详细介绍。如果您需要我，我也可以编写脚本和 HTML 以配合该代码。