Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The Spry UI widgets and form validation widgets are not the only form of Spry integration in Dreamweaver. Dreamweaver gives us a full set of Spry effects that can enhance your site's content through user interactions or controls. The reason that so many people don't know about Spry effects is because they're kind of hidden away in the Behaviors panel. So most people don't associate them with Spry or realize how they can enhance their sites content. In this movie, we'll finish our photo gallery by adding a subtle fade effect when the larger image is load.
Well, we're going to do the Appear/Fade. What I want to do is I want to target the current selection again. Notice that we can target any element on the page with this effect, which is really cool. So you have div tags that fade in and out, or images, really whatever you'd like. Well, the first thing I'm going to do is set the effect of the duration. I want that to occur for 1500 milliseconds, so about one and half seconds. I wanted to Appear and not Fade and I wanted to Appear from 30% to 100%. That's interesting. Why not go from 0 to 100%? Well, I found that going below say 30 or 20% opacity tends to make the image look like its flickering.
Now if you're trying to give the impression of maybe a camera snapping a photo or something like that, it's a really good effect, but as it is, I want a nice sort of subtle effect. So I'm going to stick with the 30%. Now we could also toggle this effect. What that means is maybe the first time it fades out, the next time it fade back in. So if you have something where you want something to toggle based on user interactivity, it's a nice thing to do. I'm going to go ahead and click OK. I notice that this one has a default trigger action as well. In this case, it's onClick. I don't want onClick. I want my images to fade in every single time they load.
So I'm going to change that from onClick to onLoad. I'm going to go ahead and save everything. Now as soon as I do that, Dreamweaver is going to say hey, wait a second, you also need this SpryEffects.js. Is that cool? In this case, certainly is. I'm going to click OK. I'm going to preview that in my browser. If I scroll down, every time I click on one of the thumbnails now, I can see there is a little fade in every single time an image loads. Cool! So Spry effects offer us another way to add richer user experiences to our sites.
They're easy to use and just like behaviors, they are easy to update or modify at any time. I encourage you to experiment with these effects to see how they can improve your site's usability, and provide the subtle touches to separate good sites from the truly engaging ones.
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 65699 Viewers
61 Video lessons · 96451 Viewers
56 Video lessons · 110203 Viewers
82 Video lessons · 105087 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.