Hover animations and a sliding highlight

I said I would do a follow-up post on the Cycle plugin, and I will probably do that next. First, I want to explain how to do a graphical gimmick that I've used several times in conjunction with the Cycle plugin, as well as on its own. In the process, I'll try to show you how to do simple animations with jQuery.

Basically, I'll be showing you how to create a sliding highlight, like this example or the one on the navigation of my personal site. In either one, hover over the links to see the animation. Neat, huh? More interesting than just making the links change color or become underlined when you hover over them, and not too difficult to implement (or at least, it shouldn't be once you've gone through this tutorial).

Starting simple: a basic slideshow

A slideshow is a very common feature on web pages, and one that isn't hard to implement. For someone who's just starting out in the wonderful world of web design, though, trying to add something like this to your new site's home page could be daunting. Googling "web page slideshow" or something like that will return a massive number of results. There are probably hundreds of different ways to accomplish this goal, using a variety of different technologies. I'm going to show you one of the easiest.

A bit about me and this blog

"Give a man a fish, and you feed him for a day. Teach him to fish, and you feed him for life."

Hi, my name is Aaron Sherbeck. I'm an MK (missionary kid) who grew up in Pakistan and the Middle East, and I'm now a senior at Taylor University, majoring in Media Communication with an emphasis on the web.

I've always enjoyed working on creative graphical projects of one kind or another. In the past, videos and various 2D and 3D graphics held my interest—if you'd like to see some of my past projects, you can check out my website. More recently, my tastes have become more focused on web design, especially in the past few years.

The part of web design I find most enjoyable is coding and implementing various graphical gimmicks—for example, if you follow the link to my site above and hover over the items in the navigation bar, you should see the little "highlight" bar marking the current page change color and slide to align with the item you're hovering over (unless you have JavaScript disabled). I've also found that I enjoy showing and teaching others how to accomplish these visual tricks almost as much as figuring them out in the first place, and I've been told I do a good job of explaining them.

So that's what this blog is all about. I'll be posting examples of various visual tricks for websites that are fairly easy to implement and can give your website a bit of flair. However, I'll also try to take this one step further. On a lot of blogs of this sort, I've found that the bloggers tend to hand their readers a piece of code that creates some cool graphical gimmick, but with very little explanation of how or why it works, leaving that up to the readers to figure out. So if the readers don't already know CSS, JavaScript/jQuery, or whatever other web languages the examples may use, they are left incapable of modifying or customizing the example to fit it into the design scheme of their own site.

In these blog posts, I hope to avoid this problem. I'll show you how to create a variety of graphical gimmicks using CSS, jQuery, and a variety of useful jQuery plugins. However, I'll go one step further and try to explain a little about why I write the code the way I do, and how it works. I'll provide links to resources on other sites where appropriate, and try to make it possible for you to not only add some interesting bit of design to your site, but to further your understanding of web design in the process, so that some day you won't have to look up how to do this or that on a blog like this, because you'll be able to figure it out yourself.

If you've got any suggestions for graphical gimmicks that you'd like me to demonstrate and explain in future blog posts, comment and let me know!