滾動時從下往上滑動元素

我知道已經有很多這類問題，但我想要使用完全不同的動畫。滾動時從下往上滑動元素

見例如：http://tympanus.net/Blueprints/OnScrollEffectLayout/

我想用簡單的東西，一切我想有是代替元素從左邊或右邊來了，他們會從下往上滑動。

最近的教程，我想要的是一個，但我想用它在4，3和2行框。而那個只是爲2行設計的。

2014-01-07 DeanDeey

即動畫是通過正在添加CSS：'.come式：第n個孩子（奇數）{ 動畫持續時間：0.6秒; }'如果你想用響應式設計來達到這種效果，我認爲你必須在測量可用寬度後追加模塊，然後將該動畫與每個模塊的索引成比例地添加，可能包裹在每行的父div中。 – Sergio

隨着上海社會科學院魔法一點點，那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

來源

2014-01-07 23:54:29

滾動時從下往上滑動元素

回答

相關問題