Can the page's dynamic effect save flat design?

Source: Internet
Author: User
Tags jquery library

The dynamic effect is now flattened around the red people, where there is its figure, whether the dynamic effect for the flattening of the credit? What tool does the designer have to draw the dynamic effect? Yesterday found a good article, about the two aspects have real dry goods to share, suggest the students to make a decision, first turn after praise, especially to remember to see.

As a web designer, we need to work hard to keep our technology and skills abreast of the times. We don't have to follow every trend of the times (like long projections), but we do need to learn and improve our skills as the web grows and matures.

One of the latest hot developments in the web design industry has been dynamic, with more and more companies putting their apps and web sites in motion to please users, stand out from competitors and improve product availability.

Another reason for the high demand for activity is the flattening of the Web page. Flat design is pretty good on the whole, and it makes people look for new ways to improve one of its few problems.

Some small problems in flat design

Nowadays, more and more companies accept the minimal "flat design" aesthetics. There's a lack of branding differences between sites that look pretty much the same. This allows designers to start looking for other ways to make the site fascinating or exciting for users.

At this time the dynamic effect of the debut. Action is like salt to french fries; without it, they are a little cold and devoid of flavor. By letting the different elements of your design move, you can add a few exciting elements, or you can entertain the user with creative and helpful activity.

Another problem with flat design is that when users interact with a Web site or application, they may lose the concept of where they are located. When the button doesn't look like a button, something else seems to converge, and users start to wonder what happens when they click on those elements.

We can solve this problem by designing different animation effects for different states (such as hover or click), such as Colin Garven's submit button:

Finally, I would like to elaborate on how to tell the user that a change has taken place. Today, many modern Web applications use powerful tools such as Angularjs and node.js to build a "single page, real-time update" application. Think about Gmail: You can get new emails without refreshing the page, and when someone sends you a new email, it bounces out.

This can be problematic if the page changes or loads new content, and the user does not get those notifications or explicit reminders. If the page has been saved, then we need to see something to tell us that the application is working and that it has saved our work in the background.

Dynamic is the perfect way to alert users when different events occur.

For example, you have a list of registered parties or meetings. Whenever a newcomer registers, you use Node.js to add it to the list in real time so they don't have to refresh the page. Well, this is very helpful to the user. But how do people know that a new person is registered?

All we need is a little action to get people to see someone and sign up. Drop a small notice envelope from the top of the page how about this? or let the newcomer's name fade into the list and highlight his name to distinguish him from the new registration?

All of these are subtle effects, but it's really the difference between a decent product and a product that really makes the user happy.

The web is maturing.

Remember IE6 and Netscape (Netscape)? Remember that we have to worry about whether everyone is starting JavaScript, and how to use a table to layout the page?

We've come a long way, we've got powerful HTML 5 support, CSS 3, and responsive design, and their combination can provide amazing choices for moving pages.

CSS3 Dynamic Effect

All the mainstream browsers now support the standard CSS 3 features recommended by most and even all of the web. As a designer, this gives us great potential to create simple and compelling effects that allow the breath of life into the static page.


CSS transitions give you the ability to create a simple transition between two different states. For example, if you have a simple button that you want to change color and make it a little bit lower while hovering over it, then using CSS to transition is the perfect choice.

Keyframe Dynamic Effect

KeyFrames are a powerful feature of the CSS 3 feature that allows you to create custom dynamic sequences. It allows you to control start time, transition mode, duration, latency, how many times in the duration, the direction of action, and so on. You can even use multiple dynamic effects in the same page element.

SVG images

One of the new features of the "Mature network" is the SVG image. We finally have images that can be scaled freely in different sizes and resolution screens. Not only that, SVG is more powerful than PNG images, because you can use CSS and JS to make it interactive. This allows us to create impressive dynamic effects that we used to do with GIF or flash.

Look at this animated GIF that has been rebuilt using CSS and SVG:

Dynamic Address: Http://

The real useful thing about SVG is to create movable tables and graphs, and to scale to any size. Take a look at this simple example of using Jsfiddle:

View Address:

The possibilities of SVG are almost endless!

HTML 5 canvas (Canvas)

Another exciting technique is the HTML 5 canvas that all browsers have been supporting for a long time. Canvas elements are used to draw graphics on the page.

It's similar to SVG, but there are a few differences. First, it's a bitmap rather than a vector graph. This means that it performs better when performing complex drawings and animations, but does not scale well on high-resolution screens.

Another big drawback of the canvas is that it has no DOM elements to manipulate. This means that when you want to change or add a dynamic effect to it, you need to redraw the whole picture.

Despite such or such flaws, the canvas is still a great tool for rendering complex dynamic effects and images.

Java Script Dynamic Library

Although CSS 3 animations are becoming more powerful, there are still a few things that need to be used in Java script action.

There are more and more libraries popping up, giving us amazing dynamic effects, and using them is only one out of 10,000 of the resources we've spent on Java script activity.


Snap.svg is a tool that lets you manipulate SVG resources as easily as using jquery to manipulate the DOM. It has a super rich dynamic library with a lot of simple events to get your SVG files moving.

Greensock GSAP

Gsap.js is a set of professional tools for scripting High-performance HTML 5 animations that work on all major browsers. It's animated 20 times times as much as jquery, and in some cases even faster than CSS3. 60fps We're coming!


Transit.js is a jquery library that replaces the animation module in jquery with a hyper-smooth CSS transition and transform effect. The beauty of it is that it also uses jquery's $ (' ... '). Animate syntax.


Velocity.js is similar to transit and is the same syntax for jquery, all you need to do is to introduce the library and then replace the jquery animation with the. Velocity ().


Scrollreveal is an open source JS library, when page elements enter the viewport, it can help you create and maintain this element.


Bounce.js is a new tool for generating exciting CSS 3 key-frame animations.

Hardware improvements for mobile devices

The main reason for the real take-off of animation is that today's equipment is becoming more and more powerful.

iphone 5s, for example, has a super power A7 chip.

Extreme Tech said: "The CPU is not only the gradual evolution of its predecessor, it is a completely different beast, more similar to the Intel or AMD CPU's" big core "rather than" small core "CPU. ”

In addition, with the release of IOS8, Apple will release metal, which is a very powerful 3D rendering engine that allows you to create desktop-like games on your mobile device.

Some Android phone companies have built as much memory into their devices as the LG G3 has built up to 3GB of RAM. I have a laptop computer a few years ago, and I have almost as much memory.

All of this shows that we can not only run smooth animations on desktop computers, but also on mobile phones, tablets and other mobile devices.

Animations are helpful to users

Animations can really make your products, applications or websites easier to use and easy for users to accept. This is because:

It gives an environment for what happens;

It allows people to participate;

It makes your company stand out from the crowd;

People like them.

Kickstarter believes that a good video activity can lead to a very successful event, and may also be unknown. The best activities use well-designed stories to bring an exciting feeling and generate momentum for your own products or activities. The same thing that animations do on a website or application. It allows people to discuss your application and let other applications sleep in the application graveyard.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.