Cycling Slider with CSS3

AZ is a highly reputable developer / designer for a user’s front end experience. I’ve enjoyed several of his tutorials, but this one in particular lays out how to do a vertical scrolling experience using only CSS3 for the transitions. I believe this was also featured on smashing magazine back in 2012. The technique isn’t new, but the functionality often gets overlooked for a more traditional horizontal slider.

pure slider css 3

In the last tutorial I had a great line at the bottom that I am going to steal for this post as well. The accordion slider here won’t be useful on most websites. You’ll need a specific purpose such as displaying a set of equal level products or setting up a comparison of products. If you end up using it, please leave a comment with a link. I’d love to check it out!

HTML Markup

  • Cougar

    Cougar

  • Lions

    Lions

  • Snowalker

    Snowalker

  • Howling

    Howling

  • Sunbathing

    Sunbathing

The HTML is a little intense for someone just starting out, but utilizing basic tags and leveraging nested classes and ids we can create a nice slider in a simple format. The next step is adding a style to our wonderful html framework.

Capture

CSS 3 Styling


@import url("reset.css") screen;
@import url("animation.css") screen;

/* Common */
html, body {
background:#eaeaea url(../img/bg.png) repeat;
font-size:12px;
font-family:"Open Sans", serif;
min-width:960px;
margin:0;
padding:0;
color:#aaa;
}

.content h1 {
font-size:48px;
color:#000;
text-shadow:0px 1px 1px #f4f4f4;
text-align:center;
padding:60px 0 30px;
}

/* LAYOUT */
.container {
margin:0 auto;
overflow:hidden;
width:960px;
}

/* CONTENT SLIDER */
#content-slider {
width:100%;
height:360px;
margin:10px auto 0;
}
/* SLIDER */
#slider {
background:#000;
border:5px solid #eaeaea;
box-shadow:1px 1px 5px rgba(0,0,0,0.7);
height:320px;
width:680px;
margin:40px auto 0;
overflow:visible;
position:relative;
}
#mask {
overflow:hidden;
height:320px;
}
#slider ul {
margin:0;
padding:0;
position:relative;
}
#slider li {
width:680px;
height:320px;
position:absolute;
top:-325px;
list-style:none;
}

#slider li.firstanimation {
-moz-animation:cycle 25s linear infinite;
-webkit-animation:cycle 25s linear infinite;
}
#slider li.secondanimation {
-moz-animation:cycletwo 25s linear infinite;
-webkit-animation:cycletwo 25s linear infinite;
}
#slider li.thirdanimation {
-moz-animation:cyclethree 25s linear infinite;
-webkit-animation:cyclethree 25s linear infinite;
}
#slider li.fourthanimation {
-moz-animation:cyclefour 25s linear infinite;
-webkit-animation:cyclefour 25s linear infinite;
}
#slider li.fifthanimation {
-moz-animation:cyclefive 25s linear infinite;
-webkit-animation:cyclefive 25s linear infinite;
}

#slider .tooltip {
background:rgba(0,0,0,0.7);
width:300px;
height:60px;
position:relative;
bottom:75px;
left:-320px;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}
#slider .tooltip h1 {
color:#fff;
font-size:24px;
font-weight:300;
line-height:60px;
padding:0 0 0 20px;
}
#slider li#first:hover .tooltip,
#slider li#second:hover .tooltip,
#slider li#third:hover .tooltip,
#slider li#fourth:hover .tooltip,
#slider li#fifth:hover .tooltip {
left:0px;
}
#slider:hover li,
#slider:hover .progress-bar {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}

By now, I think you’ll be able to figure out how the slider is working, but if you are feeling a little lost do a crtl + f (find) and look for where the code has ‘paused’ and ‘cycle’ is used. Remember animation is action, but not necessarily movement. :)

-moz-animation:cycle 25s linear infinite;

-webkit-animation-play-state:paused;

Capture

One thing that will drive me crazy when going to a website is to have no idea when or if the image will change. Including a progress bar is common courtesy and can be achieved in a fairly simple fashion. The code for it is below.

Our Progress Bar


/* PROGRESS BAR */
.progress-bar {
position:relative;
top:-5px;
width:680px;
height:5px;
background:#000;
-moz-animation:fullexpand 25s ease-out infinite;
-webkit-animation:fullexpand 25s ease-out infinite;
}

Hopefully you feel like you’ve learned a little bit here. I know the slider in a word can be extremely intimidating, but after this tutorial you should have a much better understanding of how animation works with moz and webkit, as well as different control mechanism / states you can utilize like paused.