Skip to content

Instantly share code, notes, and snippets.

@bfred-it bfred-it/slideshow.scss
Last active Aug 29, 2015

Embed
What would you like to do?
Automatic SCSS slideshow used on masseriagialli.it's homepage
$images-count: 4;
$slideshow-duration: 6;
$slideshow-percentage-per-slide: 100/$images-count;
$slideshow-slides-overlap: $slideshow-duration/($images-count+1)+1;
.slideshow {
overflow: hidden;
position: relative;
height: 400px;
z-index: 0;
background-color: $color-golden;
}
.slideshow__image {
position: absolute;
top: 0;
left: 0;
animation: slide-off #{$images-count*$slideshow-duration}s linear infinite backwards;
}
@for $i from 0 through $images-count - 1 {
.slideshow__image--#{$i+1} {
animation-delay: #{($i*$slideshow-duration) - $slideshow-slides-overlap}s;
z-index: $images-count - $i;
}
}
@keyframes slide-off {
5%, #{$slideshow-percentage-per-slide + "%"} {//5%, 25%
opacity: 1;
}
#{$slideshow-percentage-per-slide + 5 + "%"} {//30%
transform: translateY(-40px);
-moz-transform: translateY(-40px) rotate(0.1deg);
opacity: 0;
}
0%, 100% {
opacity: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.