10 Web front-end based on jquery and CSS3 animation plugin and source code

1.jQuery Transverse accordion Picture Display plugin

Today we are going to introduce a very cool jquery plugin, it is a horizontal accordion picture display switch plug-in, each picture is initially stacked horizontally together, click the picture can switch to the next, and in the picture when the movement of horizontal motion animation effects. In addition you can define any number of images to be used in this accordion image plugin.

Online Demo

SOURCE download

2. Mouse through button effect of pure CSS3

Today to bring you a pure CSS3 implementation of the mouse button effect. This button is very simple, but the effect is very good, very beautiful.

Online Demo

SOURCE download

3.FreeIconMaker-Create free and stylish icons online

When designing a Web site or Web application, you can't deny the importance of web design tools that help streamline your tasks and complete your project. Freeiconmaker.com is a free online icon maker, you can also create your own templates and share them with others.

Online Demo

SOURCE download

4.jQuery Transverse accordion Picture slider plugin

This time we are going to share a very nice jquery horizontal accordion picture slider plugin, first it was developed based on jquery, so it will be compatible with most browsers, and secondly, this jquery image slider plugin can be played automatically, or the mouse can be toggled is a very good effect of the jquery accordion picture plugin.

Online Demo

SOURCE download

5.jQuery Full-screen scrolling plugin fullpage.js demo

Today we often see full-screen websites, especially foreign websites. These sites with a few large pictures or color blocks to do the background, and then add some simple content, appear exceptionally high-end atmosphere of the grade. such as the introduction of the IPhone 5C page (view), the official website of the QQ browser. If you also want your website can design perfect screen, appear more on the grade, you can try Fullpage.js. Fullpage.js is a jQuery-based plug-in, it can be very convenient and easy to make a full-screen website, the main features are: Support mouse scrolling, support forward and backward and keyboard control, multiple callback functions, support mobile phone, tablet touch events, support CSS3 Animation, Support window zoom, Automatically adjusts when the window is scaled, sets the scrolling width, background color, scrolling speed, looping options, callbacks, text alignment, and so on

Online Demo

SOURCE download

6.vticker–jquery vertical Scroll Plug-in

The Vticker is a very compact jQuery vertical scrolling plug-in that is only 2KB compressed. Vticker supports custom scrolling time, interval, number of displays, scrolling direction (up/down), container height, and so on, but it is a little "harsh" on the HTML structure-the container can only be UL labeled. But if you just need a vertical scrolling effect, vticker is still a good choice, after all, it's so small and convenient.

Online Demo

SOURCE download

7.sliphover– Create an animated matte layer to display a caption or a description

Sliphover is a jQuery-based plug-in that senses the direction of the mouse movement and displays a mask layer in the corresponding direction (or in the opposite direction) in an animated way to display a title or description, which is a good choice for a slide or photo album. The Sliphover also supports custom matte heights, animation time, font color, background color, text layout, and more. Reasonable collocation, I believe you can make your slides or albums more on the grade.

Online Demo

SOURCE download

8.resizeend– window resizing post-processing event plug-in

Resizeend is a small jQuery plugin that can handle things after the size of the browser window changes. Although it is a very simple plug-in, but think more, it also has chivalrous, such as in response to design.

Online Demo

SOURCE download

9.multiscroll.js–jquery Vertical Reverse Scrolling Plugin

Maybe you already know fullpage.js is a very good plug-in, a lot of good companies are using it, such as pig, NetEase and so on. Today we will introduce another plug-in--multiscroll.js developed by the plugin author. Multiscroll.js and fullpage.js a bit similar, is also the page full-screen scrolling, but fullpage.js is the whole screen scrolling, and multiscroll.js is divided into two panels, vertical reverse rolling together.

Online Demo

SOURCE download

10.onepage-scroll–jquery single page/full screen scrolling plugin

Single page/Full screen scrolling page is more and more common, it is used for product introduction, recruitment and other less content of simple pages. For this effect also appeared a lot of jquery plug-ins, such as the introduction of Fullpage.js and Scrollify, today again introduced a JQuery single page/full-screen scroll plugin--onepage-scroll.

Online Demo

SOURCE download

10 Web front-end based on jquery and CSS3 animation plugin and source code