10 jQuery dynamic effects

sponsored links
Whatever content you have to present, you can present them in a more interactive & more responsive ways. In this article we'd like to present 10 Brilliant techniques using some jQuery magic to grab the attention of your users with a simple, rich user experience that gets them excited about your website.


1. Fluid Navigation - How to create an informative menu-bar with jQuery & CSS


Learn how to create a menu that appears like a standard menu bar in it's default state, but which on rollover pulls down an information area that covers both the original menubar item and has an expanded section containing the text we want to display.

10 jQuery dynamic effects

Taken from the http://addyosmani.com/blog/fluid-navigation-how-to-create-an-informative-menu-bar-with-jquery-in-just-a-few-minutes/


Demo: http://addyosmani.com/resources/fluid-menu/fluid-menu.html

Download: http://addyosmani.com/resources/fluid-menu/fluid-menu.zip


2. Move Elements with Style


Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area. In its simplest configuration, Roundabout works with ordered-and unordered-lists, however after some quick configuration, Roundabout can work with an set of nested elements.

10 jQuery dynamic effects

Demo: http://fredhq.com/projects/roundabout/ # Demo

Download: http://fredhq.com/projects/roundabout/ # Demo


3. Automatic Image Slider w / CSS & jQuery


A simple image slider using HTML / CSS / Javascript. The html based image slider will have its benefits with SEO and will also degrade gracefully for those w / out js.

10 jQuery dynamic effects

Demo: http://www.sohtanaka.com/web-design/examples/image-slider/

Download: http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/


4. JQuery Quicksand Plugin


With Quicksand you can reorder and filter items with a nice shuffling animation. At the very basic level, Quicksand replaces one collection of items with another. All you need to do is provide those two sets of items. You can do it in a couple of ways:

  • 1. Use plain HTML, like an unordered list.
  • 2. Download data by an Ajax call
  • 3. Transform HTML items by JavaScript (for example, sort them differently)

10 jQuery dynamic effects

Demo: http://razorjack.net/quicksand/demos/one-set-clone.html

Download: http://razorjack.net/quicksand/


5. JQuery Magic Line Sliding Style Navigation


The idea is to have a highlight of some kind (a background or an underline) follow you around as you mouse over the different links in the navigation. This will happen with jQuery and it's animation abilities. As such, the "magic line" will only be appended via JavaScript. Once added to the list and styled, as you mouse over the different links, it figures out the left positioning and the width and animates to match.

10 jQuery dynamic effects

Demo: http://css-tricks.com/examples/MagicLine/

Download: http://css-tricks.com/jquery-magicline-navigation/


6. Text with Moving Backgrounds


The idea is to create a container which has a moving background, but only a set of letters will be visible of the background. It will be as if there are holes in your container.

Normally you would create a PNG file containing anti-aliased letters and place it inside some container on top of a background. Here what you need to do is place a full image over a background, covering parts that shouldn't be seen. Just like a mask!

10 jQuery dynamic effects

Demo: http://www.gayadesign.com/scripts/textmovingbg/

Download: http://www.gayadesign.com/diy/text-with-moving-backgrounds-with-jquery/


7. JDiv: A jQuery navigation menu alternative


A drop-down menu that displayed any content you need. Specifically a combination of images and lists, without being limited to only an unordered list. The advantages:

  • More flexibility in design that your usual UL style;
  • The use of the H4 tag and a UL for the hidden content adds some potential SEO but be sure that your header tag choice is in keeping with your copy's layout;
  • As long as your first-level nav item is linked to a page, you still retain accessibility with JS disabled.

10 jQuery dynamic effects

Demo: http://www.skyrocketlabs.com/categories/tutorials/jdiv/demo/index.html

Download: http://www.skyrocketlabs.com/articles/jdiv-a-jquery-navigation-menu-alternative.php


8. Halftone Navigation Menu With jQuery & CSS3


A CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.

10 jQuery dynamic effects

Demo: http://demo.tutorialzine.com/2010/01/halftone-navigation-menu-jquery-css/demo.html #

Download: http://tutorialzine.com/2010/01/halftone-navigation-menu-jquery-css/


9. Animate Panning Slideshow with jQuery


Highly visual websites rely on the ability to showcase imagery automatically. Whether it be a professional photographer or zoo, slideshows pop up so frequently because they work well. In this tutorial we'll have a slideshow that transitions by changing the visible window.

10 jQuery dynamic effects

Demo: http://s3.amazonaws.com/buildinternet/live-tutorials/panning-slideshow/panning-slideshow.htm

Download: http://buildinternet.com/2010/02/animate-panning-slideshow-with-jquery/


10. SlideDeck


SlideDeck is a new way to display content on websites, mobile phones and kiosks. It delivers a better user experience by removing the information overload and providing a fun, quick and beautiful way to interact with digital devices.

10 jQuery dynamic effects



Demo: http://www.slidedeck.com/

Download: http://www.slidedeck.com/



  • del.icio.us
  • StumbleUpon
  • Digg
  • TwitThis
  • Mixx
  • Technorati
  • Facebook
  • NewsVine
  • Reddit
  • Google
  • LinkedIn
  • YahooMyWeb

Related Posts of 10 jQuery dynamic effects

  • js form validation Guinness

    js form validation Guinness 1. Length <script> function test () ( if (document.abvalue.length> 50) ( alert ( "Can not more than 50 characters!"); document.abfocus (); return false; ) ) </ script> <form name=a onsubmit="ret

  • flash chart summary

    pen Flash Chart is an open source Flash chart drawing tool, offers a variety of programming interfaces, including PHP, Ruby, Perl, Python, Java,. Net, AS, JS, etc. to generate a variety of data interfaces, and then Flash to display the function is to ...

  • IBM Ajax Tutorial Series

    Links: http://ibm.csdn.net/ISN_J.aspx?action=JMP&pointid=1550 Part 10: Using JSON for data transmission In the asynchronous application to send and receive information, you can choose to plain text and XML as data format. Ajax grasp of this issue ...

  • jquery ajax example

    1. Check js file $. ajax (( type: "GET", url: "test.js", dataType: "script" )) 2.post data $. ajax (( type: "POST", url: "xxxx", data: "name = zhaoaiqing & age = 25", success: function ( ...

  • Strength of live practice teaching materials, suitable for each person team look - UFIDA Hua Table CTO talk about "out of the software factory"

    A few months ago, on reading "Going the software factory," one book, not yet published at that time, it can be considered the reference of the watch. Although the language rather uneventful, but the contents of people really can not but carry on

  • Workspace run under different Eclipse

    Now do live more and more often required to use eclipse in java and ruby & rails project conducted between the tangential shear from the past, because in the rails project used a coloring Aptana preferences, the results open the java project sour ...

  • Software development sunflower Baodian [reprint]

    Master the ability to reuse code very familiar with the new API's fast. This is because, he once used a lot of the API, have a lot of reusable code. He knows what is available and what is deficient. He has been using Qt, also used by gtk +, also used

  • JS charts extjs implementation tools can be combined

    OpenFlashChart brief introduction by valensoft 2009-1-10 8:29:00 OpenFlashChart is an open source Flash and Javascript to the technical foundation for the free chart, using it to create some very useful analysis of the effect of the statements of the char

  • can not be represented as java.sql.Timestamp

    Development of procedures for the use of hibernate when, some time there is no need to fill in the fields, but after the hibernate query time reported "Java.sql.SQLException: Value'0000-00-00 'can not be represented as java.sql.Timestamp ...

  • Struts2 + hibernate + spring problem user log in

    dao layer services layer action jsp <tr> <td align="center"> <b> user name: </ b> </ td> <td> <s: textfield name = "czyNumber" cssClass = "textstyle" theme = "simple" size = &q

blog comments powered by Disqus
Recent
Recent Entries
Tag Cloud
Random Entries