Fullscreen CSS Background Image Slideshow

fullscreen-css-background-image-slideshow.markdown

Fullscreen CSS Background Image Slideshow

Taking advantage of Sass with Bourbon, I've refactored the original Codrops demo of a Fullscreen Background Image Slideshow to be a little more compact and efficiently managed.

The markup for the slideshow is an unordered list that houses spans which will function as the elements for the background images of the slideshow.

A variable, $animation-delay, is defined as the duration of each slide. This variable will be used to calculate the slideshow's cycle, and makes adding and removing slides a little more manageable.

The first instance of the variable is found tied to the spans that define the background images for each slide. Here, the variable should be multiplied by the total number of slides in the slideshow to set the full length of the cycle.

Where the background images for each span of the slideshow are defined, the variable is further used to set the delay for each slide and ensure that a continuous cycle is created.

Keyframe steps also need to be calculated based on the total number of slides and slide duration. First, divide slide duration by the total cycle time. The resulting percentage will be the base step, and where in the animation the image will begin to fade. An 'in-between' step is also needed preceding the base step, and is calculated by dividing the base step percentage by 2. This step is where the image will be completely shown. Finally, the step at which the image is to disappear completely will be following the base step, and is calculated by multiplying the base step by 1.5.

For more information, and the original demonstration, visit: http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3

A Pen by Kevin Lesht on CodePen.

License.

index.haml

%ul.slideshow
  %li
    %h3 The Seasons
    <!-- By Keven Law from Los Angeles, USA (Long Hot Summer......) [CC-BY-SA-2.0 (http://creativecommons.org/licenses/by-sa/2.0)], via Wikimedia Commons, http://commons.wikimedia.org/wiki/File%3AFlickr_-_law_keven_-_Long_Hot_Summer.......jpg -->
    %span Summer

  %li
    <!-- By http://www.ForestWander.com [CC-BY-SA-3.0-us (http://creativecommons.org/licenses/by-sa/3.0/us/deed.en)], via Wikimedia Commons, http://commons.wikimedia.org/wiki/File%3ARed-fall-tree-lake_-_West_Virginia_-_ForestWander.png -->
    %span Fall        

  %li
    <!-- By Valerii Tkachenko [CC-BY-2.0 (http://creativecommons.org/licenses/by/2.0)], via Wikimedia Commons, http://commons.wikimedia.org/wiki/File%3AWinter_wonderland_Austria_mountain_landscape_(8290712092).jpg -->
    %span Winter

  %li
    <!-- By Arman7 (Own work) [CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0) or GFDL (http://www.gnu.org/copyleft/fdl.html)], via Wikimedia Commons, http://commons.wikimedia.org/wiki/File%3ABoroujerd_spring.jpg --> 
    %span Spring

style.scss

@import "bourbon";

html {
  min-height: 100%;
}

body {
  height: 100%;
}

// length of each slide in seconds
$animation-delay: 6s;

.slideshow {
  list-style: none;
  z-index: 1;
  li {
    span { 
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      color: transparent;
      background-size: cover;
      background-position: 50% 50%;
      background-repeat: none;
      opacity: 0;
      z-index: 0;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      // multiply slide duration by the total number of slides
      @include animation(imageAnimation $animation-delay * 4 linear infinite 0s);
    }
    h3 {
      position: absolute;
      text-align: center;
      z-index: 2;
      bottom: 150px;
      left: 0;
      right: 0;
      opacity: 0;
      font-size: em(65px);
      font-family: 'Josefin Sans', sans-serif;
      text-transform: uppercase;
      color: #fff;
      // multiply slide duration by the total number of slides
      @include animation(titleAnimation $animation-delay * 4 linear 1 0s);

      @media only screen and (min-width: 768px) {
        bottom: 30px;
        font-size: em(130px);
      }

      @media only screen and (min-width: 1024px) {
        font-size: em(175px);
      }
    }
  }
}

// add and remove new slides here, maintaning the animation-delay format
.slideshow li:nth-child(1) span { 
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/summer-slide.jpg);
}
.slideshow li:nth-child(2) span { 
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/fall-slide.jpg);
  @include animation-delay($animation-delay);
}
.slideshow li:nth-child(3) span { 
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/winter-slide.jpg);
  @include animation-delay($animation-delay * 2);
}
.slideshow li:nth-child(4) span { 
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/spring-slide.jpg);
  @include animation-delay($animation-delay * 3);
}

// animation for the slideshow images
@include keyframes(imageAnimation) {
  0% {
    opacity: 0;
    @include animation-timing-function(ease-in);
  }
  12.5% {
    opacity: 1;
    @include animation-timing-function(ease-out);
  }
  25% {
    opacity: 1;
  }
  37.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

// animation for the title
@include keyframes(titleAnimation) {
  0% {
    opacity: 0;
  }
  12.5% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  37.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

// modernizr is used to show the first slide as a fallback for when css animations are not supported
.no-cssanimations .slideshow li span {
  opacity: 1;
}

styles

<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:700" rel="stylesheet" />