10 Web front-end animation effects based on jquery

1.jQuery transverse accordion picture Toggle Animation

We've previously shared many of the accordion menus and accordion focus graph plugins based on jquery and CSS3, such as the CSS3 responsive vertical accordion menu and the jquery horizontal accordion picture Display plugin. Today is also a jquery based on the horizontal accordion picture switch animation, the mouse slide over the picture can be expanded, and the picture above the text title, very practical.

Online Demo

SOURCE download

2.JQUERY/CSS3 Gradient Color Picker

We've previously shared a very powerful jquery color picker that supports the selection of transparency. Today to introduce the same is a jquery-based color selection plug-in, the difference is that this color picker function more powerful, support the insertion of multiple colors, forming a gradient of color selection.

Online Demo

SOURCE download

3.jQuery World National Cities multi-level linkage support keyword search

We have previously shared several cities in China, such as the provincial and municipal linkage dropdown box, such as jquery multi-level beautification version of the Select drop-down box. Today, the jquery City multi-level linkage function is more powerful, not only supports the multi-level linkage of cities all over the world, and each level supports keyword search, can quickly locate the countries and cities that need to choose.

Online Demo

SOURCE download

4.HTML5 Canvas Circular Progress bar displays the percentage of numbers

Remember before for everyone to share a lot of different styles of progress bar plug-ins, there are based on jquery, but also based on HTML5 and CSS3. This time we are going to introduce another circular progress bar application based on the HTML5 canvas, where the white progress bar is particularly visible in the black background, and the circular center shows real-time percentage of the current progress, which is very useful.

Online Demo

SOURCE download

5.CSS3 achieve 3D cartoon text effect

Before we introduced a lot of jquery and CSS3-based text animation effects, such as HTML5/CSS3 light text can be customized text color is very cool. Today to share is a based on the CSS3 3D cartoon text effect, the text is rendered 3D stereoscopic visual effect, the mouse slide over the text will appear shaking animation effect.

Online Demo

SOURCE download

6.jQuery Multi-Animation dialog window and Cue box plugin

We've previously shared a number of jquery dialogs and cue box plugins that look and function differently, such as the jquery Pop-up dialog that looks elegant with masks and css3/jquery custom pop-up windows. This time to share is also a jquery dialog plug-in, it is characterized by the pop-up dialog has a lot of animation effect, each button in the presentation is an animated effect. In addition, the plugin also provides a variety of cue box animation plug-in, the function is very powerful.

Online Demo

SOURCE download

7.jQuery Cascade picture Switch Focus Graph plugin

Before we shared a jquery content cascade scrolling Switch Animation plug-in, mainly for the text cascade switch. Today to introduce is also a cascade switch plug-in, but it is a jquery focus diagram application, in addition to the current picture, we can see all the image part, after switching to display the next picture, toggle animation is cascading effect.

Online Demo

SOURCE download

8.jQuery page scrolling element showing hidden animation plugin

Today to introduce a super cool jquery animation plug-in, this plug-in implementation of the function is when the page scroll down, the page of the specified elements will be displayed in a variety of animations, when the page scroll up, the elements will be animated in various ways to hide. This means that the page elements will show hidden animations as the visual range changes.

Online Demo

SOURCE download

9.HTML5 Canvas Random Color beam explosion animation effect

Today we are going to share a very cool HTML5 canvas beam explosion animation effect, it is like a light-speed explosion opened, the animation is very beautiful. When you click the mouse, you can randomly switch the speed of light color, of course you can also put a few buttons on the page, by clicking the button to specify a certain color of the beam.

Online Demo

SOURCE download

10.jQuery drag-and-drop elastic share button Menu

Today we are going to introduce a very special sharing button that is similar to the HTML5/CSS3 social sharing button and is presented as a small icon. The difference is that this share button can be expanded to expand the small icon, and the drag button every small icon will follow the mouse movement, the effect is very cool.

Online Demo

SOURCE download

• This article fixed link: http://www.i7758.com/archives/2629.html

10 Web front-end animation effects based on jquery