Slow Transitioning CSS3 FullScreen Slider Tutorial

After spending weeks of compiling resources and tutorials. I wanted to take some time and experiment on my own tutorials. The beauty with CSS3 is that you can take something that would usually take a long time to develop and build it in an instant. Well, in an instant may be overkill, but quicker than you would using other resources such as JavaScript.

I wanted to create a CSS3 FullScreen slider with some simple image transitions. After googling some ideas I decided to put together my own tutorial. I had a look at some of the other tutorials on full screen sliders, and noticed that developers were writing code that was far too complex for something so simple.

I’m not the best css developer in the world, but I think some of the guys & girls writing these tutorials are so smart, that they forget how difficult it can be for people that are still learning.

They can sometimes add code that isn’t always necessary for what they are teaching, and sometimes over complicates things. So I decided to dumb it down 🙂 . I mean you will have to have some sort of HTML & CSS knowledge for this tutorial, but you could definitely go through it and figure it out yourself if you are a complete beginner.

This tutorial has the goal of helping beginners better understand the code, and at the same time not overwhelm anyone with too much information. This tutorial is for all levels of developers/designers. Feel free to use it on your own projects and share it with your fellow designers.

You’ll learn how to build a CSS3 FullScreen Slider with a slow, scaling transitional effect. Be sure to visit the demo so you can see what it is you will be building. You can also download the source code and experiment with it yourself.

The images are from pexels.com, completely royalty free. I wasn’t sure if I was allowed to include them in the zip file so you’ll have to get your images directly from their website.

Please note: This tutorial and demo will only work in browsers that support CSS3 transitions only. However, most modern day browsers now support CSS3 transitions.

HTML Markup

Ok, so lets get right to it. The first thing we’ll be doing is creating the HTML markup for the fullscreen slider. We will start by creating an unordered list and we will be using the span section for each image.

 
<body id="fullscreen">
<ul class="dev-show">
   <li><span>Image 01</span></li>
   <li><span>Image 02</span></li>
   <li><span>Image 03</span></li>
</ul>
</body> 

It’s very simple markup, and that’s about the only HTML you are going to need. All that does is create an unordered list.

Each of the span sections represent each changing image. I also added the body id to disable the overflow of the slider so the browser doesn’t add scrollbars when the animation is scaling. We will add the background images in CSS further below, and use animations to cycle through the images.

If you don’t fully understand yet, not to worry. It will all make sense as I go through the tutorial, and I explain each individual element. The next part, we will be creating the CSS.

The CSS

We will start by positioning the viewport. The idea is to stretch this area over the screen. We use “position:fixed” to keep this class in the same place even if the page is scrolled, and the width and height to position the height and width 100% across the screen.

.dev-show,
.dev-show:after; {
position: fixed; 
width: 100%; 
height: 100%; 
top: 0px; 
left: 0px; 
z-index: 0; 
overflow :hidden; 
} 

Now we’ll create the CSS for the main slider image area. This will cover the entire screen. The code below basically stretches the image across the screen and is set to an opacity of 0, we will then turn this opacity to 1 using our css3 animation. By turning the opacity to 1 it will show the image. We’ve also named our animation “fullScreenAni” and set the total animation time to 30seconds, and to loop infinitely.

ul {
list-style: none; 
}

.dev-show li span {
width: 100%; 
height: 100%; 
position: absolute;
top: 0px; 
left: 0px; 
color: transparent; 
background-size: cover; 
background-position: 50% 50%; 
opacity: 0;
z-index: 0;
animation: fullScreenAni 30s linear infinite 0s;  
}

We created the ul class above to hide the default bullet point list display. Then we’ve created the css class for the li and span sections that were represented in the HTML markup above.

We’ve used the background-size element to “cover” the screen. Then the positioning to position the images directly in the middle of the screen. As mentioned above we’ve used opacity: 0 to hide the image, but it only hides the image temporarily because below we will be using the CSS animation to set the opacity to 1 which will then show the element, you won’t actually notice that the image is hidden it’s just how we create the transition effect.

Before we conclude by setting up our animation. We need to add our background images and the selectors that will select the child elements of the list.

First we’ve uploaded our images and used the CSS to call on each background image through out the animation. We’ve then used nth-child(1) that selects the first list element in the HTML markup and applies the CSS properties to that. The nth-child(2) does it to second list element, and nth-child(3) to the third.. You could add as many child elements as you like if you wanted to have a larger inventory of images to showcase. We’ve also used an animation-delay of 10 seconds to the 2nd and 3rd classes. Giving each image 10 seconds to display before transitioning out to the next.

.dev-show li:nth-child(1) span {
	background-image: url(../fullscreen-css3/images/wall-e-pex.jpg); 
}

.dev-show li:nth-child(2) span {
	background-image: url(../fullscreen-css3/images/waterfront.jpg);
	animation-delay: 10s; 
}

.dev-show li:nth-child(3) span { 
	background-image: url(../fullscreen-css3/images/green.jpg);
	animation-delay: 20s; 	
}

Then to wrap it up we’ve called on the animation for the transition timing and scaling effect.

@keyframes fullScreenAni { 
    0% { opacity: 0; animation-timing-function: ease-in; }
    11% { opacity: 1; animation-timing-function: ease-out; }
    33% { opacity: 1; transform: scale(1.5); }
    66% { opacity: 0 }
    100% { opacity: 0 }
}

@keyframes calls on the animation name “fullScreenAni“. 100% equals to 10 seconds.

Between 0-100% is where you would apply any transitional or image effects. In this case 0-100% is over the course of 10 seconds which is the full animation time for each image. At 0-11% is where the image transitions in. This is what creates that slow transition. At 11-33% is the time it takes before the image starts to use the scale effect. The scale effect is triggered from the transform css3 property. Then once we are in at 66% the image is beginning to transition out and change to the next image at 100%. The ease-in is what makes the next image transition in slowly.

And there you have it. This tutorial feels really short to me, but it’s so simple that I don’t have anything more to explain. That’s exactly what I want it to be, so simple that I don’t need to explain anything more.

If you enjoyed this consider signing up to our e-newsletter below for more tutorials. If you have any questions about the tutorial please leave a comment.

Author: Jake

Share This Post On

Submit a Comment

Your email address will not be published. Required fields are marked *