10 jQuery dynamic effects

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/

分类:Web 时间:2009-08-18 人气:1203
blog comments powered by Disqus


  • Based on jQuery + CSS to create a multi-level menu, dynamic effects 2010-07-02

    View results Download JQuery + CSS to create a multi-level menu, dynamic effects jQuery + CSS to create dynamic multi-level start menu, with very beautiful colors and animation, animation smooth, support for four to start, I believe you used enough,

  • 38 dynamic menu 38 jQuery And CSS Drop Down Multi Level Menu Solutions 2010-12-11

    See also: http://www.1stwebdesigner.com/freebies/38-jquery-and-css-drop-down-multi-level-menu-solutions/ 38 jQuery And CSS Drop Down Multi Level Menu Solutions Hello again, it's time for comprehensive programming article. Here you'll find 38 mainly j

  • Jquery中CSS选择器用法分析 2013-12-18

    这篇文章主要介绍了Jquery中CSS选择器用法,实例分析了jQuery中常用的5种css选择器的使用技巧,需要的朋友可以参考下 本文实例讲述了Jquery中CSS选择器用法.分享给大家供大家参考.具体如下: jQuery使用了一套css选择器,共有5种,即标签选择器,ID选择器,类选择器,通用选择器和群组选择器,现分述如下: 1. 标签选择器 用于选择HTML页面中已有的标签元素,又称元素选择器,格式:$("element"),如$("div"),同getElem

  • jQuery使用CSS()方法给指定元素同时设置多个样式 2013-12-28

    这篇文章主要介绍了jQuery使用CSS()方法给指定元素同时设置多个样式的方法,实例分析了jQuery中css方法的使用技巧,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了jQuery使用CSS()方法给指定元素同时设置多个样式的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <

  • jquery结合CSS使用validate实现漂亮的验证 2014-03-03

    这篇文章主要介绍了jquery结合CSS使用validate实现漂亮的验证,需要的朋友可以参考下 自己结合了在网上找的验证功能和漂亮的提示同能后做出来的验证 希望大家喜欢 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns="

  • jQuery 改变CSS样式基础代码 2014-03-20

    jQuery提供css()的方法来实现嵌入式改变元素样式,css()方法在使用上具有多样性. 其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开.比如我们要改变链接颜色,我们可以使用下面的代码: $("#61dh a").css('color','#123456'); //这里选择器'$("#61dh a")'表示ID为'#61dh'的元素下的所有链接. //.css('color','#123456');表示把颜色设为'#123456' 如果我们需要改

  • Jquery ui css framework 2014-04-18

    Jquery ui css framework是jquery ui中的一个样式框架,可以利用jquery Theme roller 来生成自己想要的css样式效果.我们可以利用jquery ui的一些框架来开发出基于jquery ui css framework效果的插件来. Jquery ui中两大核心的css文件是ui.core.css和ui.theme.css.这两个css样式贯穿整个基于jquery ui的界面上,并且可以通过jquery ui ThemeRoller来生成自己的样式.

  • jQuery获取css z-index在各种浏览器中的返回值 2014-05-10

    jQuery 取 css z-index 值在各种浏览器中的返回值的代码,需要的朋友可以参考下. 测试代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="GBK" /> <meta http-equiv="Content-Type" content="text/html; charset=gbk" />

  • 用jquery与css打造个性化的单选框和复选框 2014-05-27

    利用jquery和css打造个性化的单选框和复选框,喜欢的朋友可以参考下. 上图是经过css和jquery美化后的效果,怎么样呢?是不是很爽啊!这个是我从另一个脚本库看到的一个效果,觉得挺不错的,然后就用jquery自己实现了一个.供大家鉴赏! 话不多说,直接上代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1

iOS 开发

Android 开发

Python 开发



PHP 开发

Ruby 开发






Javascript 开发

.NET 开发



Copyright (C) codeweblog.com, All Rights Reserved.

CodeWeblog.com 版权所有 黔ICP备15002463号-1

processed in 0.315 (s). 12 q(s)