In this tutorial we are going to create a beautiful navigation that has a background image slide effect. The main idea is to have three list items that contain the same background image but with a different position. The background image for each item will be animated to slide into place in different times, creating a really nice effect. The background image sliding direction from the list item in the middle will depend on which item the user was before: coming from the right, it will slide from the left and vice versa.On top of that we will have sub-menus that appear with their semi-transparent background sliding in. These backgrounds create an awesome effect of actually just being one element that slides into place, changing its color.
We will be using the amazing Background-Position Animation Plugin by Alexander Farkas.
The photos that we will be using are from Pat’s beautiful B&W collection on Flickr.
There will be a little bit of CSS3 involved which absence will almost not be notable when using a browser that does not support its properties (like IE).
We tried to make this one cross-browser compatible and voilà! It works beautifully in Google Chrome, Firefox, Opera, Safari, IE8, IE7 and guess what, it even works respectively in IE6. (We are using an adapted style sheet and you will have to apply some PNG fix if you want the sub-menu backgrounds to be semi-transparent. )
0 comments:
Post a Comment