A large collection of 10 ultra-practical jQuery plug-ins for web Front-end, and 10 jquery

A large collection of 10 ultra-practical jQuery plug-ins for web Front-end, and 10 jquery

1. Drag and Drop images using the HTML5 Function

It is widely used in common computer applications, including developers and general users. The HTML5 application introduced today helps you extract your Avatar before uploading it. You only need to drag and drop the image to select the part to be captured, HTML5 automatically generates a new image to save the selected image. In addition, the HTML5 application also supports holding down the shift key to achieve proportional scaling of images.

Online Demo

Source code download

2. 5 beautiful styles with pure CSS3 animation buttons

This time, we will share a very good CSS3 button animation. There are five types of CSS3 buttons, each of which is a mouse slide animation, although these animation buttons are not very gorgeous, the small Editor feels that they are not as difficult to expand as other buttons. We can modify CSS code to change our favorite color styles at will.

Online Demo

Source code download

3. Use SVG to create single-choice and multi-choice box animations

Using JavaScript to implement SVG path animation, we can do a lot of fancy things. Today, we will introduce you to some check boxes and radio button effects. The main idea of implementation is to hide the native input box and use pseudo elements to create more attractive styles. When the input box is selected, execute SVG animation.

Online Demo

Source code download

4. Use CSS3 pseudo elements to stack photos

The pseudo elements introduced in CSS3 allow Web developers to produce complex visual effects without adding HTML tags. For example, the two CSS3 pseudo elements before and after can help you achieve a lot of interesting results. This tutorial will show you how to use CSS3 to create a set of beautiful image stacks for elements.

Online Demo

Source code download

5. jquery-based mouse passing through image list Effects

Today I would like to recommend a jquery-based mouse-over image list special effect. When you move the mouse over the list of images, the image is enlarged and a translucent mask layer moves accordingly.

Online Demo

Source code download

6. Filter and sort plug-ins Based on CSS3 & jQuery

MixItUp is a lightweight but powerful jQuery plug-in that provides beautiful animation filtering and sorting functions for classified and ordered content. It is particularly suitable for portfolio websites, galleries, image blogs, and any classified or ordered content. How does it work? MixItUp determines which content is hidden, displayed, or located based on your filtering conditions, and then applies the CSS3 transitions smooth animation to the new position. This is a very effective method, with the help of modern browser rendering capabilities, and avoid using jQuery too much for DOM operations.

Online Demo

Source code download

7. Implement image shape masks and animation Amplification

Today, we will share with you how Quess achieves the shape masks and zoomed animation effects of images. In many portfolio websites, we often see such styles and effects. Personally, I don't think we can use HTML5 or CSS3 Technology in projects because the old browser does not support it. We should "reward" users who use modern browsers to give them a better user experience.

Online Demo

Source code download

8. CSS3 Animation Cheat Sheet: A Practical CSS3 Animation library

CSS3 Animation Cheat Sheet is a set of Preset Animation libraries that add various dazzling animations to your Web project. All you need to do is add a style sheet to your website. You just need to apply the premade CSS class to the elements you want to add an animation effect.

Online Demo

Source code download

9. parallax effect plug-in for adaptive smart devices

Parallax. js is a simple and lightweight Parallax engine that can respond to the direction of smart devices. When no gyroscope or motion detection hardware is available, use the cursor position instead. With a lot of behavior, you can set it to any given parallax instance. These actions can be called either through the data attribute specified in the tag or through the constructor and JavaScript API.

Online Demo

Source code download

10. Powerful gadgets for managing CSS animations

Animo. js is a powerful tool for managing CSS animations. Its features include stack animation, cross-browser blur, and callback for animation completion. Animo also includes the amazing animate.css, which provides you with nearly 60 beautiful animations and some auxiliary animations to the library.

Online Demo

Source code download