10 Web front-end super-functional jquery plug-in collection

1.HTML5 function to drag and drop pictures

It is very extensive in our usual computer applications, including developers and general users. Today, this HTML5 app can help you to capture your avatar before uploading your avatar, you just need to drag and drop the mobile image to select the part you want to intercept, HTML5 will automatically generate a new picture to save the selected picture automatically, thus completing the function. In addition, the HTML5 app also supports holding down the SHIFT key for picture-scale scaling.

Online Demo

SOURCE download

2. Pure CSS3 Animation button effect 5 kinds of beautiful style

This time we are going to share a very good CSS3 button animation, this CSS3 button a total of 5 kinds of animation, each is a mouse slide animation form, although these animation buttons are not very gorgeous, but the small series feel not as difficult as other buttons to expand, We can modify the CSS code to change our favorite color style.

Online Demo

SOURCE download

3. Using SVG to make radio and multi-marquee animations

Using JavaScript to animate SVG paths, we can do a lot of fancy stuff. Today we're going to show you some check boxes and radio button effects. The main idea is to hide the native input box and use pseudo elements to create a more appealing style, and the input box is selected to perform the SVG animation.

Online Demo

SOURCE download

4. Use CSS3 pseudo elements to achieve photo stacking effect

The pseudo-elements introduced in CSS3 allow WEB developers to create complex visuals without the need to add additional HTML tags. For example,: Before and: After this two CSS3 pseudo-elements can help you achieve a lot of interesting results. This tutorial will show you how to use CSS3 to create a nice set of picture stacking effects for your elements.

Online Demo

SOURCE download

5. jquery-based mouse through the picture list effect

Today we would like to recommend a jquery-based mouse through the picture list effect. When the mouse passes through the list picture, the picture zooms in, and a translucent mask layer moves with it.

Online Demo

SOURCE download

6. Filtering and sequencing plugins based on CSS3 & JQuery

Mixitup is a lightweight, yet powerful JQuery plugin that provides beautiful animation filtering and sequencing of categorized and ordered content. Ideal for portfolio sites, galleries, image blogs, and any sort or ordered content. How does it work? Mixitup determines which content is hidden, displayed, or repositioned based on your filtering criteria, and then applies CSS3 transitions smooth animations to the new location. This is a very effective method, with the help of modern browser rendering capabilities, and avoid excessive use of jQuery for DOM operations.

Online Demo

SOURCE download

7. Achieve image shape mask and animation magnification effect

Today, let's share with you how to achieve the shape mask and zoom animation effect of the image from Quess. In many portfolio sites, we can often see the styling and effects. Personally, I don't think we can afford to use HTML5 or CSS3 technology in a project because the old browser doesn't support it. We should "reward" users who use modern browsers and give them a better user experience.

Online Demo

SOURCE download

8.CSS3 Animation Cheat Sheet: A practical CSS3 animation library

CSS3 Animation Cheat Sheet is a set of preset animation libraries that add a variety of awesome animations to your Web project. All you need to do is add the stylesheet to your website and apply the pre-made CSS classes to the elements you want to animate.

Online Demo

SOURCE download

9. The Parallax effect plug-in for adaptive smart device orientation

Parallax.js is a simple, lightweight parallax engine that responds to the direction of smart devices. Use the position of the cursor instead when there is no gyroscope or motion detection hardware available. There are a lot of behaviors that you can set for any given parallax instance. These behaviors can be called either through the data properties specified in the markup or through constructors and JavaScript APIs.

Online Demo

SOURCE download

10. Powerful gadgets for managing CSS animations

Animo.js is a powerful gadget for managing CSS animations. Its features include like stack animations, creating cross-browser blur, setting callbacks for animation completion, and more. Animo also includes amazing animate.css, providing you with nearly 60 beautiful animations, plus some auxiliary animations to the library.

Online Demo

SOURCE download

10 Web front-end super-functional jquery plug-in collection