Question

我知道已经存在很多这类问题，但我想使用完全不同的动画。

参见示例：http://tympanus.net/Blueprints/OnScrollEffectLayout/

我想使用一些简单的东西，我希望拥有的一切就是元素来自左侧或右侧，它们会从下到上滑动。

最接近我想要的教程就是那个，但我想在4行，3行和2行的盒子上使用它。而那个只设计为2行。

Answer 1

有了一点sass魔法，可以修改codepen以允许任意数量的列。我添加了一个$ columns变量，然后将宽度和nth-childs更改为基于变量。

$columns : 4;
* {
  @include box-sizing(border-box); 
}

section {
  background: #eee;
  max-width: 300px * $columns;
  margin: 0 auto;
  padding: 20px;
  overflow: hidden;
}

.module {
  width: 100% / $columns - 2%;
  min-height: 200px;
  background: white;
  position: relative;
  float: left;
  padding: 20px;
  margin-right: 8% / $columns;
  margin-bottom: 4%;
  &:nth-child( #{$columns}n + #{$columns} ) {
    margin-right: 0;
  }
  box-shadow: 0 1px 3px rgba(black, 0.2);
}

body {
  background: url(http://s.cdpn.io/3/blurry-blue.jpg);
  background-size: cover;
  padding: 30px;
}

.come-in {
  transform: translateY(150px);
  animation: come-in 0.8s ease forwards;
}
.come-in:nth-child(#{$columns}n + #{$columns}) {
  animation-duration: 0.6s;
}
.already-visible {
  transform: translateY(0);
  animation: none;
}

@keyframes come-in {
  to { transform: translateY(0); }
}

http://codepen.io/bhlaird/pen/KLGEx

滚动时从下到上滑动元素

1 个答案: