Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,974 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
- Examining the Spry framework
- Finding information on customizing Spry assets
- Defining page structure
- Modifying presentation through CSS
Skill Level Intermediate
If you remember previewing the finished project back in the first movie, you might recall how the content of the panel seem to blur while animating. A nice subtle effect that can make your Spry assets just that much better than what we get by default. By browsing the Spry assets CSS file, and I'm going to flip over to that because we have our SprySlidingpanels.CSS, you'll come across a few empty class styles that aren't used by default widgets. So I'm going to scroll down and as you get all the way down to the bottom here, I can see that we have SlidingPanelsAnimating, SlidingPanelsCurrentPanel and SlidingPanelsFocused.
So these classes are dynamically assigned as your panel widget is activating. Now the only one that's got content on it currently is the SlidingPanelsAnimating and notice it says overflow hidden and it gives that a rank of important so that no matter what's going on, whatever's animating inside that, if there's any overflow, it will be hidden and that allows the viewport to continue to crop all the content without any of it flowing outside of it. Note the wild card. So that's telling you that anything, any element that's animating, is going have the style applied to.
We're going to take advantage of that. We're going to take advantage of the SlidingPanelsAnimating class to change the styling of our content while it's animating. We won't do that here inside of our SlidingPanels.CSS. We're going to have to use a more specific selector and since we might not want to change the default behavior of our Sliding Panels, we'll do it locally in our embedded styles. So I'm going to close this file, make no changes to it whatsoever. And I'll go back into the details_start.htm, which is found in the Chapter 10 directory. So I'm going to switch over to Code View, and once again we'll go up to our embedded styles and I'n just going to collapse my panel so I can see this a little bit better.
So we're going to type in #mainContent, space, .Sliding, capital S, Panels, capital A, Animating, space h2. We're first going to style the heading as it animates. We're going to open up a curly brace for it and assign a different color to it and the color we're going to give it will be the #999, which is sort of a medium gray color. And don't forget your semicolon and then close your curly brace. So that's the first one. That's pretty easy, right? So let's go down and we'll do our second one, which is #mainContent.SlidingPanelsAnimating, space, p.
So now we're going to target the paragraph inside of that, and we're going to type in color and guess what? We're going to go ahead and do a #999 to that too. So if you're wondering, "Hey, can I have a group of those selectors together?" Yep. You certainly could have. Now if you're tired of typing in the first part of this, you could just copy the #mainContent.SlidingPanelsAnimating. And if you typed it in correctly the first time, that way you don't worry about making mistakes from there on. So that's what I'm going to do. I'm going to copy it, go down to the next line and paste it. And then I'm going to add to the descendent selector span.price.
So again we're going to be styling the span.price. And here we pass along the same color to it #999. So if you want to group all the selectors together, feel free. That's fine. I just want to separate them so you can see what each one of those is doing. So we're done with that and what we need to do now is work on all the individual panels themselves. So I'm going to hit Enter to go down to the next line. I'll go ahead and start that by using the copied #mainContent.SlidingPanelsAnimating and then inside that, I'm going to type in #panel0, panel zero. If you remember that is the first panel.
So here I'm driving that functionality through CSS instead, which is a lot easier to do. Remember that we have to say no-repeat and we're going to do 10 pixels for our horizontal placement, 5 pixels for vertical placement and don't forget to close out the curly brace. Once again, if you don't feel like typing this all over again, I don't blame you. So I'm going to copy this and I will paste it. And I'm going to change the panel to panel one instead of panel zero. Everything else remains the same, just the name of the graphic is going to change. So instead of hoody_blur, the second one is going to get tshirt_blur.jpg.
I'll paste that for the third one. Scroll down to give us a little bit more room here. And again the third one needs to change to panel two and instead of hoody_blur, my third one's going to be bag_blur and we'll finish out our backgrounds by changing it to panel three and changing it from hoody_blur to longt_blur and this time we did blur and not blurs. What we've done is for our animated content, we've taken all the text and changed it to a lighter gray so it's going to appear to fade and maybe even look a little blurred itself. Then the images we swapped out our normal background graphic with a blurred version of the same graphic. So if I save the file, and we preview this in our browser...
now when I click on the thumbnails, you can see the blurred graphic is coming in, the text is getting lighter so it gives it the illusion of blurring as well. That looks really good. Now the one thing that we haven't talked about yet is customizing the animation itself and you might think that this is too slow. Or you might think it's too fast, so let's talk about how we can change our animation properties by changing the parameters that are passed into the constructor function. Let's go back into our file and let's go find our constructor function. It's on about line 85 by now, so somewhere around in there.
Actually mine's on line 91. So somewere around down there you'll see the constructor function, it's the script tag we did earlier. So currently the only thing we're passing into the constructor function is the name of the widget itself, which in this case is detailSlide1. Well after detailSlide1, I can type in a comma and then my options have to be passed in as an array. So I'll open up a curly brace. Take a look at some of the options here. We have defaultPanel, duration and enableAnimation, which is true or false. It's a Boolean value. enableKeyboardNavigation, frames per second, so there's a lot of things that we can change here. I'm going to pass in duration.
And I'm going to type in a duration of 500. Now that would be milliseconds so by saying 500, I'm saying let's animate to that position in half of a second. So duration has a colon and then the property follows it. Next we'll use a comma and we'll use FPS, which is frames per second and I'm going type in 80 frames per second. Now the higher the value of the frames per second, the smoother the animation will render, but it has its limits. If you go too far up, it's simply going to not be able to render it and performance will suffer. So you want to test this value pretty thoroughly. Sometimes a higher frames per second is not going to work over certain connection speeds so you might want to test that over as a wide array of connections as you can. So let's save that.