Share 10 animated effects on the Web front end based on jquery and CSS3

1. Responsive Circular Animation navigation menu

Responsive mobile navigation bar, I now find a new technique (about HTML5) that can be used without JavaScript to make a responsive menu. This menu can be automatically arranged to the left, middle, or right). Unlike previous tutorials that need to click on a "switch" to show or hide a menu, now simply move your mouse over the menu button and the menu list will appear (and you will be prompted for the current navigation position).

Online Demo

SOURCE download

2.Canvas Example: 4 kinds of super-cool website animation background effect

Today, we want to share some inspiration for animated backgrounds. Full screen background image of the website head is the latest trend in web design, has lasted for some time. Recently people have been turning to animations to add more visual interest to their site, where we would like to share with you several animated examples of creating different headers using JavaScript and Canvas.

Online Demo

SOURCE download

3.JQuery Animation plugin velocity.js Six kinds of list loading effects

Share six kinds of list loading effects for jquery animation plugin velocity.js. In this example, six different list loading effects are given. Fly in from the top, fly from the right, fly in from the left, and fade, respectively.

Online Demo

SOURCE download

4. Pure CSS3 Realization of robot reading animation effect

Today we will introduce a pure CSS3 realization of the robot reading animation effect. The entire picture is drawn entirely by the CSS3, without using any picture elements. The robot's eyes use animated elements.

Online Demo

SOURCE download

5.7 jquery-based animation search box

Whether it's an e-commerce site, a media network, or a personal blog, each site has its own personalized search box. Today's mini-series brings you 7 animated search boxes based on jquery. Each search box is animated, so take a look.

Online Demo

SOURCE download

6. The pure CSS3 realizes the picture triangle arrangement

Today is a picture-reading era. Most Web pages will use images more or less. Especially the pages with more pictures. The layout and typography of the pictures is very important. Today we are going to bring a pure CSS3 to the uppercase to achieve a triangular arrangement of images. Suitable for a range of pictures.

Online Demo

SOURCE download

7. Share 5 styles of jQuery page effects

Jpaginate is a very refined page plug-in, provides five different styles of paging effect, support mouse hover page, fast paging function. The plugin also offers a wide range of configuration options that you can set as needed.

Online Demo

SOURCE download

8.sweetalert– to replace alert with a nice hint effect

Sweet Alert is an alternative to the traditional JavaScript alert's beautiful cue effect. Sweetalert Auto-center alignment in the center of the page, whether you're using a desktop computer, your phone or tablet looks great. In addition, a wealth of custom configuration options are available for flexible control.

Online Demo

SOURCE download

9.midnight.js– for a wonderfully fixed head switch effect

Midnight.js is a jQuery plugin that allows you to switch between multiple head designs when scrolling through a page, so you always have a header with the content underneath it that looks good. The midnight.js allows you to easily implement the effect of this toggle-fixed head.

Online Demo

SOURCE download

10.arctext.js-Text bending effect based on CSS3 & JQuery

Arctext.js is a lettering.js-based text rotation plug-in that accurately calculates the rotational radian of each letter and distributes it evenly, based on the set rotation radius. Although CSS3 can also achieve the character rotation effect, it is easy to combine the arctext.js to make the arrangement of each letter along the curved path quite complex.

Online Demo

SOURCE download

Share 10 animated effects on the Web front end based on jquery and CSS3