9 HTML5/jQuery applications with perfect experience, html5jquery

Source: Internet
Author: User
Tags image filter

9 HTML5/jQuery applications with perfect experience, html5jquery

1. jQuery animation Icon menu navigation is similar to the Apple style

This jQuery plug-in to be shared this time is very cool. It is a jQuery menu plug-in with animation buttons. In addition, the menu looks like an Apple menu. When we move the mouse over the menu item, the corresponding image will be suspended above the menu item, the effect is very good jQuery menu.

Online Demo

Source code download

2. jQuery imitation Apple style focus chart plug-in

The jQuery focus chart we want to share this time is very special. It looks very simple, but quite atmospheric. The overall focus chart style is similar to the Apple style. Due to jQuery's use, you only need to click the thumbnail below the image to achieve the focus chart effect of the image switch, this jQuery focus graph plug-in is very suitable for use on the Production page.

Online Demo

Source code download

3. jQuery 3D image slider focus chart plug-in

This is a cool jQuery 3D focus chart plug-in. Unlike the previously shared jQuery focus chart, this focus chart plug-in's picture switching playback style is 3D, images can be tumble up and down like cubes. You can click the switch button between left and right of the focus chart, or click the small button below the image to switch between images.

Online Demo

Source code download

4. CSS3 share button animation Effects

This is a CSS3-based social sharing button, which is very simple and provides sharing to twitter, facebook, youtube, and other large social media sites. Each share button has a Logo icon for a large social network website. When you move the mouse over these buttons, you can use the animation feature of CSS3 to see the sliding animation effect.

Online Demo

Source code download

5. jQuery animation progress bar real-time display progress percentage

This is a jQuery-based progress bar plug-in. This progress bar plug-in has a very good animation effect when displaying the progress bar. In addition, the progress bar shows the progress percentage in real time when updating the progress bar. When the progress bar ends, the completion text is displayed. Because it is based on jQuery, this progress bar is basically compatible with all browsers.

Online Demo

Source code download

6. Responsive UI framework based on Bootstrap and CSS3

Do you still remember the jQuery UI component of Metro flat style we shared before? Does it look very fresh and brilliant? Today we will share a set of responsive UI frameworks based on Bootstrap and CSS3. In this UI framework, including the custom CSS3 button, custom CSS3 check box, single-dataset, custom CSS3 drop-down box, and so on, the appearance is very beautiful.

Online Demo

Source code download

7. HTML5/CSS3 move the mouse over the image filter Animation

Previously, we used the filter attribute of CSS to process images with special effects, such as shadows and blur. Today, we use HTML5 and CSS3 to implement special image effects. When we move the mouse over the image, a very good image animation effect will appear, HTML5 effects such as fade-in and fade-out, zoom-in and zoom-Out, And louddb mask.

Online Demo

Source code download

8. CSS3 vertical progress bar animated digital percentage display

This time we will share a CSS3 progress bar animation, which is placed vertically. when loading the progress bar, a fast moving arrow animation will appear in the background of the progress bar, as the progress bar moves, the percentage of digits is updated in real time until the progress is completed. After the progress bar is finished, the color of the progress bar is in red and green.

Online Demo

Source code download

9. CSS3 logon form animation automatically enters logon information

This is a CSS 3 logon form animation that can automatically enter logon information. This animation simulates the entire process of entering logon information from the form, clicking the logon button, and logging in successfully. The welcome information is displayed, you can play the animation again. CSS3 is indeed very powerful, especially in animation, CSS3 is very good.

Online Demo

Source code download

Fixed Link: http://www.i7758.com/archives/1249.html

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.