Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
making sandwich layers and animation delays
// ---- assign z-index to layers ----
.layerZIndex(12);
#vegetable {
.layer-13 { // top bun needs to be behind
z-index: 0;
}
// each layer needs the distance tweaked between the next
.layer-11 {
margin-top: -10%;
}
.layer-7 {
margin-top: -4%;
}
.layer-6 {
margin-top: -3%;
}
.layer-5 {
margin-top: -6%;
}
.layer-4 {
margin-top: -7%;
}
.layer-3 {
margin-top: -7%;
}
.layer-2 {
margin-top: -4%;
}
.layer-1 {
margin-top: -10%;
}
.layerDelay (13);
}
// ---- CUSTOM MIXINS ----
// ---- make default z-index ----
.layerZIndex (@index) when (@index > 1) {
.layer-@{index} {
z-index: @index;
}
.layerZIndex(@index - 1);
}
.layerZIndex (0) {}
// ---- create cascading animation delays ----
.layerDelay (@index) when (@index > 0) {
.falling.layer-@{index} {
-moz-animation-delay: (.15s * @index);
-webkit-animation-delay: (.15s * @index);
}
.layerDelay(@index - 1);
}
.layerDelay (0) {}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment