/* */

jQuery quickie: Slot machine navigation

Navigation is one of the things you’ll see on every website. I wanted to give this part a little bit extra life, and when I saw a movie yesterday that included slot machines, it suddenly hit me. Using jQuery and some basic CSS and HTML, we could add some sweet slot machine style animation to a normally boring kind of navigation. So, for today, we’ll be creating a slot machine style navigation that you could use on your website.

Since it’s not such an advanced technique, this is also a jQuery quickie. These relatively simple tutorials will also give you a good understanding of jQuery. Simply check out the demo or download the source to see what we’re going to make.

Already wondering how it works? Check out how you can create this slot machine yourself. Of course, this could easily be transported to be used with social media buttons (instead of the main navigation of your site).

HTML

As usual, we want to keep our HTML as short and clean as possible. We’ll simply use an unordered list that’ll contain links. We’ll style it later on with CSS.


<ul id="jquerynav" class="navigation">
   <li><a href="#" class="marcofolio">Marcofolio.net</a></li>
   <li><a href="#" class="rss">RSS</a></li>
   <li><a href="#" class="twitter">Twitter</a></li>
   <li><a href="#" class="jquery">jQuery</a></li>
</ul>

Take note of the different class and id attributes we need to use. All the links have a different class, since we’ll need to reference it from the CSS.

This is all the HTML we need to make this example work. Now to add some style using CSS.

CSS

Although the CSS isn’t very spectacular, there is something that is the actual key to make this technique work. Let’s take a look at the first part.


.navigation { list-style:none; width:800px; height:75px; }
.navigation li { display:inline; text-indent:-9999px; }
.navigation li a { display:block; float:left; width:200px; height:75px;
   background-image:url("../images/buttons.png"); }

Nothing really much going on over here. Just some links that are placed in a horizontal row with a fixed with and height. But it’s the last line that is very important: The background-image is set.

Since we didn’t set the background-repeat or background-position properties, the bottons.png image will be placed on a 0, 0 (top left) position and will be repeated all over. We’ll be using CSS sprites for this technique.

CSS Sprites

Now you’ll see why all the links have different classes. We need to set the background-position property, to show the correct button.


.navigation li a.marcofolio { background-position:0 0; }
.navigation li a.rss { background-position:-200px 0;  }
.navigation li a.twitter { background-position:-400px 0; }
.navigation li a.jquery { background-position:-600px 0; }

We now have the base of what we need to make the slot machine work. All the links are in place, and the background-position is all correct. Now to make some magic happen with jQuery.

jQuery

First things first: We need the Background-Position Animations plugin, since we need to animate the background-position property (by default, jQuery can’t do this). We’ll also use the jQuery Easing Plugin to use some custom animation. Ofcourse, we’ll need the jQuery core to make this all work.

Before we handle the hover() function, we’ll need to do some preperation. We need to capture the original X position of the button, since we’ll need to animate back to that value later on. We’ll also set the default Y position to 0 (top), which will be increased by the hover() action later on.


$("#jquerynav li a").each(function(){
   // Returns "##px" and "##px"
   var backgroundPositions = $(this).css('background-position').split(" ");
   
   // Retrieve the original X position
   $(this).data("originalXpos", backgroundPositions[0].slice(0, -2));
   
   // Set the new Y position to 0
   $(this).data("newYpos", 0);
});

Now that we have all that, we can finally go on with the core of this technique: the hover() event.


$("#jquerynav li a").hover(function(){
      $(this)
         .data("newYpos", $(this).data("newYpos") + 1)
         .stop()
         .animate({
            backgroundPosition: $(this).data("originalXpos") +
               "px " + $(this).data("newYpos") * 75 + "px"
         }, 600, "easeOutCirc");
   }, function(){
      $(this)
         .data("newYpos", $(this).data("newYpos") + 1)
         .stop()
         .animate({
            backgroundPosition: $(this).data("originalXpos") +
               "px " + $(this).data("newYpos") * 75 + "px"
         }, 400, "easeInCirc");
   });

Let’s break it down a little bit. The newYpos value from the element is increased by one. By doing this (and using it later on with the animate function), we ensure the button will slide down forever, giving it the slot machine effect. Since the background image is repeated, we’ll always see a copy of the same image over and over. We’ll use the originalXpos to maintain the same character, so it will not look odd.

The onMouseOver (first function) is slightly faster than the onMouseOut (second function), but you can change that if you want. This also counts for the easing effect, which is now set to easeInCirc and easeOutCirc (both from the easing plugin).

That’s about it! All the code your need to create a nifty looking slot machine navigation.

Conclusion and Download

Although it might look a little bit weird at first, it does give the site another dimension. I know my design isn’t that strong, but maybe others can take it to another level. Also, this is just another example on what jQuery can do with just a couple of lines of code. Of course, you could make the animation slide down even further (just to make it look even more like a real slot machine), but that might annoy the user.

The download also includes the PSD for the buttons. And what do you think? Do you see this used on websites? Or do you have and comments on the code? I wanted to port this to CSS3 animations too, would it be worth it? Feel free to share!

Leave a reply:

Your email address will not be published.

Site Footer