3.3 Slide Backgrounds, Transitions, and Fragments

Apart from setting the various options when you initialize the framework, and by doing that, you're setting those options globally, you can change the slide transitions and slide backgrounds individually for each slide and that's very useful for when you don't want all your slides to look the same or animate in the same way. So, let's go ahead and see how you can change those. I have a very simple example here. I have two slides. Let's go ahead and, for example a background color to this first slide. To do that you would go to the section and you would say data, background color and you would put in the color that you want and by doing that, here it is. We have only this slide with the new color and the other one with its default color, and notice the subtle fade effect between the slide backgrounds. So, when we were changing slides with reveal, we have two transitions basically. We have the transition between slides, which in our case here is slide. And we have the transition between the slide backgrounds which is fade. And of course, we can control these individually as well. Now apart from solid colors, you can also add background images. So let's do that on slide number two here. You would say data background image, and you would paste in the URL to an image. Now I have this uploaded to code pen and you can find the link to this particular image in the lesson notes, all right, so here it is an image as a slide background. Now here, we also have a couple of options we can set the background size. So data background size, you can set it as contain, it can set it as cover basically all the values that are valid in CSS for background size, you can use them here. So if I set this to cover, I'm gonna get this, but if I set this to contain. We're gonna get this bit. In my case I think hover works best. You can also set the background opacity, right? So maybe you don't want that image to be 100% opacity. So you would say data-background-opacity. And you can set this either in percentages or unit less values like .2 which means 20%, just like you would do with CSS. And now we have a background image that has a 20% opacity. Now, apart from images, you can also add videos. All right? So let's go ahead and copy this section. And I'm gonna say data background video, and I'm gonna paste the link to a video I uploaded to code pen. Let's change this description, and for video you can use some of the same properties like the background size do you want to cover or maybe do you want it contained. Let's contained here. You can also set in a opacity and for a video especially you can set a loop, so data-background-video loop. By default it's false, but you can set it to true, and the video will just keep looping in the background. And you can also mute it. So you can say data-background-video-muted, set this to true. So now on the third slide, we're gonna have a video. That as you can see runs in the background, no problem I can still go ahead and select any text or any element in my slide with the video in the background. That is super cool. Now we can also use iframes. And, [LAUGH] This is something really interesting. We can use iframes to load a website basically as a slide background. So, in this section here, I'm gonna say data-background- iframe, and you would put in the address for the website, so let's say, for example httpenvato.com all right, and that would give us an iframe that has the website in the background and notice this is entirely clickable and you can interact with it. No problem. It just, it loads in the background. Now, there is an option here that you can use to disable the interactivity but from my testing, it doesn't work, maybe it's a bug in this version of the framework. Maybe it will be fixed essentially, by default the interactivity is turned off. But if you want to turn on he would say data-background-interapted, all right? So that would allow you to, interact with this. So it should be turned off by default, but it's not even without this attribute, it's still allows me to interact with the slide background. We'll, see if it gets fixed maybe we can submit a bug report to the to the repository. Now with the iframes just like with the other background, types we can set an opacity if you want. So data background opacity .2 and that's going to display that webpage with a 20% opacity. Now let's talk about background transitions. Because, as I mentioned, in the beginning, the backgrounds will fade in between slides, right? But it can change this behavior. And you can change it for each slide individually. Now, to change the background transition, I can either do it globally here using the background transition property, or I can do it individually for each slide. So let's say that I want this second slide to have a background transition of, I don't know, zoom or slide, or whatever, something that's different from the default value. So I can say Data, background transition oops, add to a fade, or actually sorry, let's do a slide. Okay? So now, We can see the transition between the first and the second is still fade but from the second to the third is slide And between the third and the fourth, is actually fade all right, so we have different transitions for different slides. And to be more specific, we have different background transitions for different slides, because a slide has two transitions, the transition for the slide itself and the transition for the background. Now, how do we change the transition for the slide itself? Well, it's actually very easy. Let's actually delete this, and we're gonna change using data transition. So say let's zoom right? So on the second slide, you can see the zoom effect on the slide content. While the others just have the normal slide all right? So I can go for example on maybe this last one and I can say data transition equals I don't know, convex. All right, so we have slide on the first, zoom on the second. Slide here, and on the last one, we have the convex effect. And you can use these to add a little bit more visual interest to your slides, instead of having all of them just going one after the other or just fading and just make them a little bit more interesting. You can also choose to set a different transition or different slight transition duration for each individual slide, you can do that with the property, data, transition, speeding, you can choose between default, slow and fast. So if we put fast, you'll notice that the last transition here is fast compared to the others. All right, so that's about it for slide backgrounds and slide transitions. Now, before we wrap up this lesson, there's something I want to show you. And this is fragments. And fragments are basically elements in your slide which you can cycle through. So if you have a bunch of fragments the presentation will not move to the next slide until all the fragments from the current slide are being displayed. And that's very useful, for example, when you want to showcase a list or a bullet point list. You start your presentation and you start showing bullet point 1, 2, 3, 4 and so on. And when all of the bullet points are displayed, and you went through all of them, then you can move to the next slide. So let me quickly show you how you can you use fragments. Let's create another section here. I'm gonna say fragments. And this can be anything you want really. They can be individual elements like paragraphs or they can be list items. It really doesn't matter. So I'm gonna choose paragraphs. The important thing here is that you use the class of fragments on each element. So I have three fragments. Let's move on to the final slides. So there it is fragments and if I hit the arrow key again it's gonna display the first line and then the second, then the third, and then it moves on to the next slide if I have one. Let's actually create another slide here so you can see what I'm talking about. So there it is fragment 1,2,3. Notice the progress bar here also changes according to how many fragments we have. And then we move on to the final slide. You can also do something very interesting and that is to highlight these fragments and you can use a special class this called highlights. And there are some additional subclasses to this, so go ahead and check out the GitHub documentation. Essentially, with this, you can do the following. When using the highlighting class all of the elements are displayed initially, but when you cycle through them, they will be highlighted like this. And once the final element is highlighted, you can move on to the final slide. So that's a quick look at how you can use fragments. Now, let's move on and talk a little bit about how to theme or how to customize the appearance of your presentation and that's coming up in the next lesson.