jQuery

Spectacular Menu With jQuery Plugin MobilyBlocks

blocks

There are already some articles have spoken of the importance of presenting elements / effects in different and interesting sites. Now, with literally millions of similar sites, the positive differences and details make the difference.

I introduce one of these “alternatives” to do something innovative sites that provide lists is not ordered so completely different from what you’ve seen using the plugin for jQuery MobilyBlocks.

The MobilyBlocks allows you to display unordered list circulated through an animation. Your guests will think you will find more of it, but it will be very surprised to come across this amazing effect!

Using MobilyBlocks

The first thing is to download MobilyBlocks . In the archive you will find some folders with files than strictly necessary (since it comes with an example for demonstration and study). In fact, the essential file for running the plugin is only 3, that must be inserted in the pages of your site that contain the effect (of course respect the directory structure of your own design):

The framework for this script to work is merely a simple structure and has a traditional unordered list. The top tip is to use images as list items to further impact the visitor and make the effect even more beautiful (as is also interesting to specify a background image for the element itself <ul>):

After that, just point to the list you want to apply the effect of MobilyBlocks, making a simple call to your startup:

And voila, you do not need anything else! Now you can check out this amazing animation effect ring!

MobilyBlocks Options

The MobilyBlocks has some simple options:

  • trigger (‘click’ or ‘hover.) In which event the effect will happen.
  • direction (‘clockwise’ or ‘counter’). If the animation will move clockwise or counterclockwise.
  • duration. Duration of the animation.
  • zIndex. Z-index value of the list items.
  • widthMultiplier. “Expander” of items in relation to the “base” (the best way to understand is to test different values).

So, for example, if we wanted to apply an effect MobilyBlocks in a class list “special-list” with counter-clockwise and duration of 450ms, we would have the following code:

Conclusion on MobilyBlocks

Using it will make sure that your site has a key differentiator from the competition and, therefore, the MobilyBlocks is highly recommended!

3 Comments

3 Comments

  1. da rocha

    May 14, 2014 at 7:40 pm

    Hi,
    Apparently, this plugin link is broken. Is there somebody who can give us a new and valid url?

  2. alexis

    October 24, 2011 at 6:11 am

    Thanks for such a spectacular post. Not useful for me currently as i am on a blogger.com but definitely going to use in future.
    Thanks a lot. 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

To Top

Get More Stuff Like This
IN YOUR INBOX

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.

This information will never be shared for third part