Skip to content

Instantly share code, notes, and snippets.

@krystalcampioni
Created July 15, 2016 11:25
Show Gist options
  • Save krystalcampioni/e5c0cde6029f772c4c5fc24ddcc8a226 to your computer and use it in GitHub Desktop.
Save krystalcampioni/e5c0cde6029f772c4c5fc24ddcc8a226 to your computer and use it in GitHub Desktop.
.cloud {
@for $i from 1 through 3 {
$new-position: 10*$i;
li:nth-of-type(#{$i}) {
background-image: url("http://krystalcampioni.com/talk/clouds.svg");
top: -(#{$new-position})+(vh); // repositioning each cloud on top of each other
animation-duration: (10*$i)+(s); // each layer will have a different speed
opacity: (.25*$i); // clouds close to the camera will be more transparent
background-repeat: repeat-x; // use repeat-x to create an infinite background-scroll
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment