Code and modules of 10 responsive jQuery UI components, jqueryui

Code and modules of 10 responsive jQuery UI components, jqueryui

1. Hashslider-jQuery content slider with Hash label Function

Hashslider implements Common jQuery slider functions, especially when tags are added to the URL, so you can connect to a part of the slider. The slider content can also be obtained from an external HTML file.

Online Demo

Source code download

2. Smint-jQuery navigation menu plug-in for single-page websites

Smint is a jQuery navigation plug-in used to implement a single-page website. It consists of two parts: the exquisite navigation bar fixed at the top of the page and the menu button that can automatically scroll to the corresponding content when you click it. Smint is very easy to use. Only one parameter is used to set the Page scrolling speed. The default value is 500 milliseconds. You can set it to any value you need.

Online Demo

Source code download

3. CSS 3D Transforms implement book Effects

The Codrops website uses CSS 3D Transforms to implement the Creative Book effect. You can see two types of Book Design: hard‑packed books and hard‑packed books. Both effects can be easily modified using CSS.

Online Demo

Source code download

4. jQuery. swatches-turn Div into a cute palette

JQuery. swatches is an open-source jQuery plug-in that converts a Div into a beautiful palette. You can customize the classes you want and use different classes to generate different color palette. This feature helps designers easily select the color combinations of design items.

Online Demo

Source code download

5. Aristochart-flexible HTML5 Canvas line chart

Aristochart is a line chart function library based on HTML5 Canvas and features high customization and flexibility. Aristochart helps you process graphic display and enables you to focus on business logic processing.

Online Demo

Source code download

6. full-screen webpage transition effects based on CSS3

I would like to share with you a full-screen webpage transition special effect based on CSS3 implemented by Codrops. The initial layout of the page is four boxes. Clicking one of them will expand to full screen, and the others will fade out and hide. When the current view is closed, it will be restored to the initial state.

Online Demo

Source code download

7. Transit-ultra-smooth CSS transition and transform animation effect plugin

Transit is a jQuery plug-in used to achieve ultra-smooth CSS 3 transition and transform animation effects. With this plug-in, you can easily implement many effects such as translate, rotate, scale, and skew.

Online Demo

Source code download

8. animation buttons implemented by pure css3

Today we will share with you an animation button that is implemented in pure css3. The buttons in the first row are switched to the background color animation after the mouse goes through, the icons fly in from the right, and the buttons in the second row are switched to the border animation when the mouse goes through, and the icons fly in on the right. The effect is very good.

Online Demo

Source code download

9. Responsive second-level navigation menu based on jquery and css3

Today we will share with you a responsive level-2 navigation menu based on jquery and css3. This navigation is a traditional top-based navigation menu that displays level-2 navigation when the mouse passes, the popular responsive design is also adopted.

Online Demo

Source code download

10. Use HTML5 Canvas to draw amazing water drops

HTML5 officially became a recommendation standard not long ago, marking the arrival of a brand new Web era. Among the many HTML5 features, the Canvas element is used to draw images on webpages. The element tag is powerful in that it can directly perform graphic operations on HTML, which has great application value. Here is a stunning Canvas water drop effect. You can double-click it to separate the Water Drop; drag it together to combine it; shake the browser to let the water drop beat; and switch the left and right keys on the keyboard to the skin; up/down keys can change the size.

Online Demo

Source code download