Share Web front end 10 classic jquery effects preview and source download

1. Pure CSS3 for ultra-cool tape animations

We want to use pure CSS3 to achieve a cool tape animation effect. First with pure CSS3 to draw a tape appearance, or quite lifelike, and then with the CSS3 animation properties to achieve the rotation of the tape, as in playing songs, if with HTML5 audio playback function, and that tape player almost.

Online Demo

SOURCE download

2.HTML5 Imitation Apple Watch clock animation

Shortly after Apple Watch was released, a foreign Daniel had imitated its clock-and-watch interface with HTML5, and the HTML5 imitation of Apple Watch was dynamic, and the pointer data could be updated in real time based on local time. The interface of the clock is very gorgeous, it does have Apple's style, and HTML5 is very powerful indeed.

Online Demo

SOURCE download

3. Pure CSS3 and SVG mouse slide over bulb glow effect

This time to share a use of pure CSS3 and SVG to achieve the light bulb glow effect, we just need to slide the mouse over the bulb, the entire bulb will appear shiny animated effects, the effect is quite realistic. The use of CSS3, let the light bulb periphery has a layer of faint halo. It also has a fade-out effect when the light is lit and turned off.

Online Demo

SOURCE download

4.FancyBox-the classic jQuery Lightbox plugin

FancyBox is a very good pop-up window plugin that provides an elegant popup zoom for images, HTML content, and other tasks for multimedia content. As one of the most popular Lightbox plugins, adaptive functionality can be achieved through Fittoview.

Main Features:

The ability to display the contents of pictures, HTML elements, SWF movies, iframe frames, and AJAX requests

You can customize the look and functionality with configuration and CSS

A set of content can be navigated

Supports scrolling event-driven browsing

There's a nice projection underneath the zoomed-in project.

Online Demo

SOURCE download

Full-screen switching effect with 5.jquery implementation

Today to bring you a full-screen switch implemented by jquery, the right side has a circular small mark, each point a switch one screen. Of course, you can also scroll the mouse to toggle the page.

Online Demo

SOURCE download

6. How to use HTML5 Canvas to make water ripple effect

Today, we continue to share examples of the effects of JavaScript implementations, and this article describes the use of JavaScript for water ripple effects. The water wave effect takes the picture as the background, the click image anywhere will trigger. Sometimes, we can create a very interesting solution using normal Javascript.

Online Demo

SOURCE download

7.HTML5 Canvas realizes the Dream 3D Hedgehog Ball

Today to bring you a HTML5 canvas to achieve the dream of 3D hedgehog ball. The page is fantastic.

Online Demo

SOURCE download

8.HTML5 canvas for picture glass fragment effects

Today to bring you a HTML5 canvas implementation of the picture glass fragment effect. The picture appears in the form of a glass fragment to the interface, and then the effect of the broken glass is gradually message.

Online Demo

SOURCE download

9.CSS3 implementation of mouse through button effects

Today for each netizen to bring a CSS implementation of the mouse through the button effect. When the button is initially, the border is a broken button, and the animation changes to a closed border when the mouse passes over the button.

Online Demo

SOURCE download

10.CSS3 Transitions Properties Create animated Download button effects

A website's download button should try to attract readers ' attention. This means that the Web designer should attach great importance to the download interface of the file. A page so many files, slices, videos and plugins can be shared via direct HTTP download. Many free websites even publish icon sets and PSD files for users to download for free. In these elements a lot of page download buttons are very important. Here is an animated download button for everyone.

Online Demo

SOURCE download

Share Web front end 10 classic jquery effects preview and source download