Hello, I am art director Sato.

the website has a modest movement
more intuitively, more eye-catching
You can produce images such as refinement and fun.

even if you don't need flashy movements
for example, in the main visual or tagline
by adding modest animations like fade-in and slide motion
You can also focus on the elements you want to convey more.

Nowadays, we can call it web design, including those animations.
I feel that animation is becoming an essential element,
and this time, i'm going to talk about some of the basic animation patterns
I would like to see it.

basic pattern of commonly used animation

Fade

Fade in, fade out.

fade + slide

Combine the slide action with a fade.

For example, if you combine a fade with vertical slides
You can create a fluffy performance.

Scale (scaling/shrinking)

Expand and shrink the element.

rotation

Rotate the element.

flip + fade

Apply the flip movement.
When combined with a fade, the front and back are turned upside down to appear / disappear.

implementation method

jQuery and CSS3 animations,
The basic idea is to change the value of CSS properties.

set up an animation on the CSS side
by giving a class name at any given time in jQuery
The way to run an animation is also easy to use.

In this case,
Each value of a property in the start and end classes
you set up animations (time, idling)
In jQuery, you will set when to run the animation.

Also: Transit If you use the jQuery plugin,
It is very convenient to set up animations with easier code.

timing of an animation

The timing of the animation
It can be thought when displaying a page or when the user manipulates something.

by setting delays, we can make time differences
and start animations depending on how much scrolling you do, or where you're currently showing up.
It is often done.

For example, the so-called "Lazy Load" that fades in elements as they scroll.
the parallax that gives parallax effect
It changes its transparency and position according to the scrolling volume.

Summary

a seemingly complex animation that looks like the basic pattern
You can make it by shifting the start timing or starting according to user's operation.

When you think about animation,
So if you break it down into basic motions like this,you can help with ideas
The implementation method is easy to grasp.

by setting up effective animations on a website
I hope to create a site that is even more impressive.