Code and modules for the 10 responsive jQuery UI component

1.hashslider– jQuery content slider with Hash tag function

Hashslider implements the functionality of the common JQuery slider, in particular because the URL is tagged so that you can connect to a block of content on the slider. The contents of the slider can also be obtained from an external HTML file.

Online Demo

SOURCE download

2.smint– jQuery navigation Menu plugin for single-page site production

Smint is a jQuery navigation plug-in that implements a single-page style site, with two parts: a beautiful navigation bar pinned to the top of the page and a menu button that automatically scrolls to the corresponding content when you click. Smint use is very simple, only one parameter is used to set the speed of page scrolling, the default is 500 milliseconds, you can set any value you want.

Online Demo

SOURCE download

3.CSS 3D Transforms Achieve book effect

This use of CSS 3D Transforms to achieve creative book effect from the Codrops website. You can see two types of book designs: Hardcover books and peace-loaded books. Both of these effects can be easily modified by using CSS.

Online Demo

SOURCE download

4.jquery.swatches– the Div into a lovely palette

Jquery.swatches is an open-source JQuery plugin that transforms a Div into a beautiful palette. You can customize the classes you want, using different classes to generate different palettes. This feature can help designers to easily select the color combination of the design project.

Online Demo

SOURCE download

5.aristochart– Flexible HTML5 Canvas Line chart

Aristochart is a line Graph feature library based on HTML5 Canvas with high customization and flexibility. Aristochart will help you with graphical display, allowing you to focus on business logic processing.

Online Demo

SOURCE download

6. CSS3-based Full screen web transition effect

Share a full-screen Web page transition effect from codrops based on the CSS3 implementation. The initial layout of the page is four boxes, click on one of them will expand to full screen, the others will fade out of the hidden, close the current view and return to the original state.

Online Demo

SOURCE download

7.transit– ultra-smooth CSS transitions and transform animation effects plugin

Transit is a jQuery plugin for ultra-smooth CSS3 transitions and transform animations. With this plugin, you can easily achieve many effects such as translate, rotate, scale, and skew.

Online Demo

SOURCE download

8. Animated buttons for pure CSS3

Today to share a pure CSS3 implementation of the animation button. The first row of buttons when the mouse through the background color animation switch, the icon from the right to fly in, the second row of buttons when the mouse through the border animation switch, the right side of the icon to fly in, the effect is very good.

Online Demo

SOURCE download

9. jquery-based and CSS3-responsive two-level navigation menu

Today, we share a responsive two-level navigation menu based on jquery and CSS3, which is traditionally based on the top, with a two-level navigation when the mouse passes through, and a popular responsive design.

Online Demo

SOURCE download

10. Use HTML5 Canvas to draw a stunning drop effect

HTML5 has formally become a recommended standard recently, marking the advent of a new Web era. Among the many HTML5 features, the Canvas element is used to draw a graphic on a Web page, which is powerful in that it can be graphically manipulated directly on HTML and has great application value. Here to share a stunning Canvas drop effect, double-click can separate the water droplets, drag and drop together can be combined, shaking the browser can let the water drop, keyboard keys can switch the skin, up and down can change the size of the key.

Online Demo

SOURCE download

Code and modules for the 10 responsive jQuery UI component