It's really good! A group of dynamic pages to load animation Effects

If you have visited the excellent design websites of Nicolas Zezuka and Active Theory, you may have noticed that animations are loaded on pages before new content is displayed. This style of animation is very popular recently, so this article will give you some inspiration.

The core of this effect is to make a shape animated in the page window and display the activity instructions. When the new content is loaded, the shape is animated and the displayed page is returned. We will useSnap. svgThe animation library allows us to create complex shapes and interesting transformation effects.

 

Online Demo

It should be noted that the example here only provides an idea, and dynamic content loading is simulated. In addition, animation and pseudo elements may not work properly in Some browsers.

Tip:

The way we display the mask is to define an SVG path Animation:

<div id="loader" class="pageload-overlay" data-opening="M 0,0 80,-10 80,60 0,70 0,0" data-closing="M 0,-10 80,-20 80,-10 0,0 0,-10">    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="none">        <path d="M 0,70 80,60 80,80 0,80 0,70"/>    </svg></div><!-- /pageload-overlay -->

The initial path we defined is invisible on the page. The start and result paths are defined in the data-opening and data-closing attributes respectively. As you can see, we use a small viewBox, But we stretch the width and height of the drawing window to 100% instead of maintaining the aspect ratio. If we do not define a closed path, we will return the animation to the initial path.

Please note that we can also add multiple paths (separated by semicolons), which allowSVGDraw Step wise animations that you will see in the first demonstration. We set a fixed position to overwrite the entire page, and load the prompt effect by adding a style to the: before AND: after pseudo elements.

.pageload-overlay {    position: fixed;    width: 100%;    height: 100%;    top: 0;    left: 0;    visibility: hidden;} .pageload-overlay.show {    visibility: visible;} .pageload-overlay svg {    position: absolute;    top: 0;    left: 0;} .pageload-overlay svg path {    fill: #fff;}

Visibility is used here, because these fixed style positioning and pointers are used as well.SVGThe event may have some problems on the Mobile End, so we can position and manipulate the parent DIV instead. You may have noticed that circular animation is also implemented from one path to another (of course there are other implementation methods, such as scaling ), however, we use the following values to determine that the circle is a response (Rseponsive:

width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="xMidYMid slice" 

UseSliceThe aspect ratio is maintained, but the display area of the entire page can be overwritten by viewBox. Our example creates 13 effects, but as you can see, the possibilities are endless. We really hope you will be inspired.

 

 

Articles you may be interested in

• Have you ever seen it? 9 superb check box Effects
• Codrops Tutorial: full-screen webpage transition effect based on CSS3
• Codrops Tutorial: exquisite mode window effect based on CSS3
• Debuggex-Excellent visual debugging tool for Regular Expression
• Zepto. js-a lightweight JavaScript library for modern browsers

 

Link to this article: It's really a good thing! Loading animation effects on 13 pages via Codrops

Source: Dream sky ◆ focus on front-end development technology ◆ share web design resources

Source of this article [http://www.cnblogs.com/lhb25 /]