The 10 web Front-ends are based on the jQuery animation plug-in and source code, and the web Front-end jquery source code

The 10 web Front-ends are based on the jQuery animation plug-in and source code, and the web Front-end jquery source code

1. Automatic Display of awesome page loading progress and Ajax navigation Effect

Introducing Pace. js and the CSS file of the selected topic on the page gives your page a nice loading progress and Ajax navigation effect. No code is required to detect progress automatically. You can choose a variety of colors and effects, including simple, flashlight, mac osx, left fill, top fill, counter and bounce, etc.

Online Demo

Source code download

2. ProgressBar. js-beautiful response SVG progress bar

ProgressBar. js is a responsive progress bar with dynamic SVG paths. You can easily create progress bars of any shape using ProgressBar. js. This JavaScript Library provides several built-in shapes such as lines, circles, and squares, but you can use Illustrator or any other vector graphics editor to create your own progress bar effects.

Online Demo

Source code download

3. TogetherJS: a free open-source JavaScript Library

TogetherJS is a free and open-source JavaScript library from the Mozilla lab. It can implement Web-based online collaboration. Add TogetherJS to your website. Your users can help each other in real time! Of course there are many other scenarios that can be used. It is worth a try.

Online Demo

Source code download

4. intelligently switch element styles based on image brightness

BackgroundCheck is a lightweight JavaScript library that can automatically switch the element style based on the brightness of the image following the element. For example, in the image slide function, adjust the color of the navigation arrow Based on the brightness of the image, so that the color of the image and navigation can form a certain contrast and be clearer. For example, you can use a fixed navigation bar to automatically change the color of the text based on the image on the back of the text when you scroll down.

Online Demo

Source code download

5. Javascript-DropKick. js that helps customize the selection box style

When you want to design a page style, nothing is more troublesome than a form. When you design a form style, the most troublesome thing is not the drop-down box <select>. We can use CSS to set a style for <select>. However, if only CSS is used, there will be great limitations here. In general, the only feasible choice is to use JavaScript For the drop-down box style. In this article, we use DropKick-A jQuery plug-in to create a drop-down list. What does it do? DropKick converts the <select> list to a drop-down list composed of Fully customized HTML elements. When you select a drop-down option, the option value corresponding to this option is updated to a part of the form. Now, let's get started!

Online Demo

Source code download

6. FullPage. js: Easy full screen scrolling (single page website)

FullPage. js is a simple and easy-to-use plug-in for creating full-screen scrolling websites (also known as single-page websites ). In addition to creating full-screen scrolling effects, you can also add some horizontal slider effects to the website. The ability to adapt to different screen sizes, including tablets and mobile devices.

Online Demo

Source code download

7. JavaScript library for capturing keyboard input

Keypress is a powerful JavaScript library used to capture keyboard input. This is an input capture library with very special functions. It is easy to master and use and does not rely on third-party libraries. During website development, it is often complicated to handle keyboard input. Now you can use this keyboard input processing library.

Online Demo

Source code download

8. HTML (. js)-the simplest way to operate dom js Libraries

HTML (. js) is a lightweight (after compression ~ 2 kb) JavaScript library, which simplifies the interaction with DOM. The method of this JavaScript library is quite readable and has the ability to search and traverse DOM. Compared with JavaScript libraries such as jQuery, YUI, and MooTools, this framework is not wrapped or hidden, but exposed and enhanced, and is very lightweight.

Online Demo

Source code download

9. jQuery responsive conveyor belt plug-in supporting Touch

Owl usel is a jQuery plug-in that enables us to quickly create responsive conveyor belt slide. This plug-in is touch-friendly and can be used with almost any HTML content. In addition, powerful options support paging/Sliding Speed, enable/disable automatic playback, and display bullet navigation.

Online Demo

Source code download

10. Text bright effects implemented by pure css3

Today, I will share with you a special text brightness effect implemented by pure css3. This special effect text gradually swept the text with a bright light. The results are very beautiful.

Online Demo

Source code download