Web development in a very practical 10 effects "with Source download"

At work, we may use a variety of interactive effects. And these effects in the ordinary look at the article when the encounter a lot, but 1:30 will not think of where, so the habit of knowledge collation is very necessary. This article recommended 10 useful results in Web development, remember the collection:)

Super-Cool page Toggle animation effect

Today we would like to share with you a set of creative page toggle Bear Effects collection. We've listed a set of animations in the example that can be applied to the page transitions to create interesting navigation effects.

Download the online demo now

Beauty! The application of parallax scrolling in picture slider

Parallax Scrolling (Parallax scrolling) has been widely used in web design, which allows the Web interface of the original plane to produce dynamic stereoscopic effects. Beautiful, pretty eye-candy:)

SOURCE Download Online Demo

Web Sidebar Transitions Animation

Show some hidden sidebar in a subtle transition animation, and the rest of the content is. Usually the sidebar slides in and pushes the rest of the content aside. There are many subtle and exotic effects that can be added to this process.

Download the online demo now

Three styles of full-screen slideshow effects

This slide effect is made up of four separate movements of the area, divided by the screen and displaying new images. The 3D conversion, transition, and animation features of the CSS3 are required here.

SOURCE Download Online Demo

Using CSS3 to achieve the 3D picture slider effect

Using the CSS3 3D transformation feature, we can achieve some novel effects by allowing elements to be transformed in three-dimensional space. This article shares the jQuery stereoscopic image slider plugin, which utilizes 3D transforms (transform) properties to achieve a variety of effects.

SOURCE Download Online Demo

CSS loading progress hint effect of single element implementation

The previous article has shared various types of loading effects (Loading effects), and here we dedicate a set of CSS loading animations based on a single element implementation. These loading effects are implemented based on a DIV element and are very powerful.

SOURCE Download Online Demo

Dynamic page Loading animation effect

The core of this effect is to animate a shape in the page window and show the activity. When the new content is loaded, the shape returns to the displayed page in animated display. We will use the snap.svg Animation library, because this library allows us to create complex shapes and interesting transformation effects.

Download the online demo now

Peculiar grid loading effect

Shows you how to use the masonry mesh Masonry plug-in to reproduce this effect with CSS animations. In addition here, we also use the Colorfinder to get the most prominent color of the image to be used as the initial loading background color.

　　

Download the online demo now

Animating a mesh with CSS3

Today we want to share a little animation concept with you. This fantastic effect was found in the Marcus Ecter prototype application??。 The basic idea is to rotate the grid project 3D, expand the screen, and present the content.

Download the online demo now

Super-cool check box (checkbox) Effect

check boxes (checkboxes) do not work in different browsers, so many Web developers will redesign their own set of interface and user-experience-better check box features.

SOURCE Download Online Demo