CSS3 fullscreen background image slideshow – a tutorial

Here we present a great solution of fullscreen background image slideshow with CSS3, described well in a related tutorial.

CSS3 fullscreen background image slideshow – a tutorial

In this tutorial described how to create a CSS-only fullscreen background image slideshow. Create different image transitions and also make a title appear using CSS animations.

An example of CSS3 fullscreen background image slideshow
An example of CSS3 fullscreen background image slideshow

The Markup simply will be an unordered list, and a span for each image and a division with a heading:

<ul class="cb-slideshow">
  <li>
    <span>Image 01</span>
    <div>
      <h3>lorem·ipsum</h3>
    </div>
  </li>
  <li><!--...--></li>
  <li><!--...--></li>
</ul>
.cb-slideshow,
.cb-slideshow:after { 
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0; 
}

.cb-slideshow:after { 
    content: '';
    background: transparent url(../images/pattern.png) 
      repeat top left; 
}

And so on. There are media queries and modernizr used.

And here is an example of animation (CSS):

@keyframes imageAnimation { 
  0% {
    opacity: 0;
    animation-timing-function: ease-in;
  }
  8% {
    opacity: 1;
    transform: scale(1.05);
    animation-timing-function: ease-out;
  }
  17% {
    opacity: 1;
    transform: scale(1.1) rotate(3deg);
  }
  25% {
    opacity: 0;
    transform: scale(1.1) rotate(3deg);
  }
  100% { opacity: 0 }
}

See more in the full tutorial, or just download working code.

Demo:

http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/index.html

Full tutorial and download:

http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3

See also:

jq-tiles Slideshow – a plugin with cool transition effects

Fit images in container with jQuery – imgLiquid plugin

Enjoy!

Share:Share on Facebook1Share on Google+0Tweet about this on TwitterShare on LinkedIn0Pin on Pinterest0