Pure CSS3 Slideshow (Works in Firefox, Safari, and Google Chrome)


Pure CSS3 Slideshow (Works in Firefox, Safari, and Google Chrome)
Documentation

flash is dead

Alright, so we all know by now, Flash is dead… Really who uses it anymore. Whats hot and on the stove cooking right now is jQuery, AJAX, CSS3, and HTML5. So I have been looking into keeping up with all the new recipes in web development and trying to create small little applications that would help m become a great cook in website development.

javascript

Last night I was working on a lockscreen for my jailbroken iPhone and I thought it would be really cool to have a rotating slideshow as the background. I made it in javascript in only a few minutes.

CSS3

I turned around and said, iPhones are really just a glorified web browser, why cant I do this is CSS3? No reason not to try to. So I sat down and started to think about how I am going to do this… Well I am going to have to set up a fade rule so that I can easily call it for each image I want to add, I also wanted the image to appear as if it was zooming in as it was fading, so I made this…

Let’s go …slideshow

Before that lets take a look at the HTML

<div id="CSS3Slideshow">
    <img class="img1" src="1.jpg" alt="" />
    <img class="img2" src="2.jpg" alt="" />
    <img class="img3" src="3.jpg" alt="" />
    <img class="img4" src="4.jpg" alt="" />
</div>
@-webkit-keyframes fade {
	0% { opacity:0; -webkit-transform:translate(180px,60px) scale(2.00); }
	15% { opacity:1; -webkit-transform:translate(80px,160px) scale(1.80); }
	30% { opacity:0.5; -webkit-transform:translate(40px,80px) scale(1.40); }
	40% { opacity:0; -webkit-transform:translate(0px,0px) scale(1.00); }
	100% { opacity:0; }
}
@-moz-keyframes fade {
	0% { opacity:0;-moz-transform:translate(180px,60px) scale(2.00);  }
	15% { opacity:1;-moz-transform:translate(80px,160px) scale(1.80); }
	30% { opacity:0.5;-moz-transform:translate(40px,80px) scale(1.40); }
	40% { opacity:0;-moz-transform:translate(0px,0px) scale(1.00); }
	100% { opacity:0; }
}

So now we have a rule that we can call we want to fade out the images. Now we have to make sure that the images are placed correctly and are not standing side by side…

First we want the slideshow container along with all the images inside the container to be placed on top of each other. So we need to give them the position absolute. After doing that we need to place the container where we want it, since I am using this for my iPhone I want to place the container in the top left most part of the screen and then set the size of it to the size of the screen resolution which is 320px by 480px. Add overflow hidden so that if anything is sliding out from the container it isn’t seen.

#CSS3Slideshow, #CSS3Slideshow img { position:absolute }
#CSS3Slideshow {
overflow:hidden;
top:0px;
left:0px;
width:320px;
height:480px;
}

Alright now we have to tell the images in the container what they are supposed to do. The following will tell all the images in the container to call the rule fade for 24second on an infinite loop, so it never stops playing the slideshow.

#CSS3Slideshow img { opacity:0; -webkit-animation:fade 24s linear infinite; -moz-animation:fade 24s linear infinite; }

Almost done, just one last little snag, how are the images going to fade away if they all do it all at once, so now we have to tell them to delay their animation for so many seconds. I have four images and I told the slideshow it will take 24 seconds for one loop. So I need each image to delay their animation 6 seconds after the last. To do this look at the following CSS

#CSS3Slideshow .img2 { -webkit-animation-delay:6s; -moz-animation-delay:6s;}
#CSS3Slideshow .img3 { -webkit-animation-delay:12s; -moz-animation-delay:12s;}
#CSS3Slideshow .img4 { -webkit-animation-delay:18s; -moz-animation-delay:18s;}

Now serve up your page and enjoy the delicious CSS3…

CSS at a glance

@-webkit-keyframes fade {
	0% { opacity:0; -webkit-transform:translate(180px,60px) scale(2.00); }
	15% { opacity:1; -webkit-transform:translate(80px,160px) scale(1.80); }
	30% { opacity:0.5; -webkit-transform:translate(40px,80px) scale(1.40); }
	40% { opacity:0; -webkit-transform:translate(0px,0px) scale(1.00); }
	100% { opacity:0; }
}
@-moz-keyframes fade {
	0% { opacity:0;-moz-transform:translate(180px,60px) scale(2.00);  }
	15% { opacity:1;-moz-transform:translate(80px,160px) scale(1.80); }
	30% { opacity:0.5;-moz-transform:translate(40px,80px) scale(1.40); }
	40% { opacity:0;-moz-transform:translate(0px,0px) scale(1.00); }
	100% { opacity:0; }
}

#CSS3Slideshow, #CSS3Slideshow img { position:absolute }
#CSS3Slideshow {
overflow:hidden;
top:0px;
left:0px;
width:320px;
height:480px;
}

#CSS3Slideshow img { opacity:0; -webkit-animation:fade 24s linear infinite; -moz-animation:fade 24s linear infinite; }
#CSS3Slideshow .img2 { -webkit-animation-delay:6s; -moz-animation-delay:6s;}
#CSS3Slideshow .img3 { -webkit-animation-delay:12s; -moz-animation-delay:12s;}
#CSS3Slideshow .img4 { -webkit-animation-delay:18s; -moz-animation-delay:18s;}
<div id="CSS3Slideshow">
    <img class="img1" src="1.jpg" alt="" />
    <img class="img2" src="2.jpg" alt="" />
    <img class="img3" src="3.jpg" alt="" />
    <img class="img4" src="4.jpg" alt="" />
</div>

Incoming search terms:


css slideshow code,  pure css slideshow,  css3 slideshow,  pure css3 slideshow,  slideshow css code,  css3 slideshow fade,  html5 css3 slideshow,  css slideshow fade,  pure css image slideshow,  pure html css slideshow,  css code for image slideshow,  css3 slideshow animation,  css slideshow code free,  css fade slideshow,  slideshow css3 html5,  pure css3 image slideshow,  css3 opacity slide show,  css image slideshow code,  
Robert McIntosh

Robert McIntosh

Hello, I am a website developer and computer programmer from Erie, Pa. of the United States. I currently work for The School District of the City of Erie, Pa. and in my free time I am a website developer to help my local community.

I am highly skilled in HTML/HTML5, CSS/CSS3, JavaScript, and PHP. This knownledge of both Client and Server side scripting language allows me to create stunning designs that come with a CMS(Content Management System) to allow clients to update and manage their own site.

If you would like to see how I can help you, I would love to work with you and see what we can accomplish.
Robert McIntosh

Robert McIntosh

Hello, I am a website developer and computer programmer from Erie, Pa. of the United States. I currently work for The School District of the City of Erie, Pa. and in my free time I am a website developer to help my local community. I am highly skilled in HTML/HTML5, CSS/CSS3, JavaScript, and PHP. This knownledge of both Client and Server side scripting language allows me to create stunning designs that come with a CMS(Content Management System) to allow clients to update and manage their own site. If you would like to see how I can help you, I would love to work with you and see what we can accomplish.

  • alex

    Hi. Thanks for sharing knowledge. Just wondering if your codes are free to use at any website. Thanks.

    • Greg

      We don’t have the source codes as downloads yet.. but you can use any code you see on this website.

      There are a few exceptions for commercial use of my slot machine (for example).

      Thx for asking.

      I’ll talk to Robert.. he might add this project as a download.

    • Yes anyone is free to use this code for any reason they make like both personal and commerical. I would advise you updating it to include javascript so that it is more streamlined and less browser intensive depending on your images, if you would like any help on doing this, please feel free to contact me using “[email protected]” and I well get back to you as soon as possible!

  • Prodyot

    Another great tutorial from you duo.
    It is breeze to read your tutorials.
    The presentation style is great too.
    Can you kindly provide the entire code in one place (including the DOCTYPE too) so that lazy and brainless designer like me can simply copy entire thingie at one go and then learn how things have happened?
    Thanks for sharing.

  • Antony

    super it’s working

  • AM

    Really impressive! any ideas on how to do it without knowing how many images you will have. I’m trying to do something similar but for a cms driven thing where there could be 2 or 200 images (conceivably)

    Really helpful article indeed!!!

    • Shady Atef

      This is the role of JS
      let’s say that u will load them first in the img_container div
      so

      $(document).ready(function(){

      var delay =0;

      $(‘#CSS3Slideshow’).children().each(function() {

      delay+=6;

      $(this).prop(“-webkit-animation-delay”,delay); // You can pass array in prop fun to set many properties
      // You may ask why this property only Simply because it’s the variable one 🙂
      })

      // Using This Alert To Check that the delay was implemented

      alert($(“.img1”).prop(“-webkit-animation-delay”))

      });

      Another Solution but i can be kinda Silly you can use Css Preprocessor like less or sass

  • Ronald

    How does this work in Explorer?

  • Lee Powers

    I’m a newer web developer but never added something for a phone yet. How does this get on to my phone or do I put it on to a website and view that page from my phone?

    • pixelass

      The common way would be to either:
      1. Run a local server on your computer
      or
      2. host a test-environment to view it online

      Option 1 allows you to connect through your IP or localhost.
      Option 2 requires some kind of webspace and allows to view the page over the internet.

  • Great Stuff

  • Osvaldo .

    Hello, a great website. I am a student and new in CSS3, and have tried this code and I’ve only added a text box with a . It works perfect but something I’m doing wrong. My problem is that any other content, even within other is affected by the effects of the slideshow. That is, everything vanishes and again seems with each image. I need help, please. Thank you.

    • pixelass

      make sure to prefix your selector. I.e. “#caja img” . best suggestion… post the HTML and your CSS…

      • Osvaldo .

        Ok, here they are; and thank you again.
        index.html and style.css

        • Osvaldo .

          Hello Gregor. As you can proof, the code I sent, don’t work, because de id=”boxtext” it’s been affected bye the slideshow. Why…? I don’t know…. Could you help me please? Thanks…

          • Osvaldo .

            Hi Gregor, I found the error in my code, silly mistake, I changed the name of the id, but what I did wrong. I did not see. Thank you.

  • I have a widget on my website that displays random tips with the fade-in/out effect between texts. it’s at http://www.alwaysspanish.com under the “did you know?” section. However, it uses JQuery and I wish to have a leaner code using CSS3 and completely do away with Java. Is it possible? Here’s the markup:

    #tips, #tips li{

    margin:0;

    padding:0;

    list-style:none;

    border:0px;

    text-shadow: 0px 2px 3px #fff;

    }

    #tips{

    width:100%;

    height:117px;

    font-size:13px;

    line-height:160%;

    overflow:hidden;

    }

    #tips li{

    padding:8px 15px 8px 15px;

    display:none; /* hide the items at first only */

    }

    #tip-title{padding-bottom:5px;display: table-cell;

    vertical-align:middle;}

    #tip-body{

    padding-top:5px;

    width:100%;

    background-color:#cfe2f3;

    background: -moz-linear-gradient(top, #e3eef8 0%, #bbd6ee 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e3eef8), color-stop(100%,#bbd6ee));

    color:#3d717d;

    box-shadow: 5px 5px 5px #888888;

    -webkit-box-shadow: 5px 5px 5px #888888;

    -moz-box-shadow: 5px 5px 5px #888888;

    -moz-border-radius: 6px !important;

    -webkit-border-radius: 6px !important;

    -goog-ms-border-radius: 6px !important;

    border-radius: 6px !important;

    }

    #tip-body:hover {

    -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.5);

    -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.5);

    box-shadow: inset 0px 1px 2px rgba(0,0,0,0.5);

    background: -moz-linear-gradient(top, #bbd6ee 0%, #e3eef8 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbd6ee), color-stop(100%,#e3eef8));

    }

    #tip-body li{color:#2e76b7;}

    Did You Know!

    Lorem ipsum 1

    Lorem ipsum 2

    Lorem ipsum 3

    Lorem ipsum 4

    Lorem ipsum 5

    this.randomtip = function(){

    var pause = 15000; // define the pause for each tip (in milliseconds)

    var length = $(“#tips li”).length;

    var temp = -1;

    this.getRan = function(){

    // get the random number

    var ran = Math.floor(Math.random()*length) + 1;

    return ran;

    };

    this.show = function(){

    var ran = getRan();

    // to avoid repeating

    while (ran == temp){

    ran = getRan();

    };

    temp = ran;

    $(“#tips li”).hide();

    $(“#tips li:nth-child(” + ran + “)”).fadeIn(“slow”);

    };

    show(); setInterval(show,pause);

    };

    $(document).ready(function(){

    randomtip();

    });

  • Ananta

    Special thanks…for this good code, working in moz and chrome too 🙂

  • Scott Godin

    a dash of Lea Verou’s -prefixfree script and your css would work everywhere without having to have ANY vendor prefixes.. and the best thing is, when it starts working naturally in the browser.. oh look, that is the right css … I would highly recommend rewriting/revisiting this article with prefixfree.js in mind 🙂 (even though yes that does add a little js to the mix)