Using Move.js to create an introductory guide to CSS3 animations _javascript

On the Web site, CSS3 transitions and animations are the preferred way to create lightweight animations at the moment. Unfortunately, many developers find their own syntax and complexity and confusion. If this sounds like yourself, for you, maybe move.js is the perfect solution. Move.js is a simple JavaScript library that uses simple functions to create CSS3 animations. This tutorial will explore the basics of move.js and provide an online demo.

Basic knowledge

Move.js provides the simplest JavaScript API for creating CSS3 animations. Let's assume that there is a DIV element with class box, and we want to move the element 100 pixels from the left when the mouse moves to the top of the Div. In this case, our code is shown if:

. box {
 -webkit-transition:margin 1s;
 -moz-transition:margin 1s;
 -o-transition:margin 1s;
 Transition:margin 1s;
box:hover {
 margin-left:100px;
}

Using Move.js we can simply call the set () method to achieve the same result, as follows:

Move ('. Box ')
 . Set (' Margin-left ', m)
 . End ();

Entry

First, visit the Move.js GitHub page and download the latest package, extract and copy move.js files to your working directory. Next, introduce the file into your HTML page. The completed page should read as follows:

<! DOCTYPE html>
 
 

We have defined a div-number with a class box and a link with ID PlayButton for our demo. Let's create a Styles.css file and add the following style. Note that the following styles are not necessary for Move.js:

. box {
 margin:10px;
 width:100px;
 height:100px;
 Background: #7C9DD4;
 box-shadow:5px 5px 0px #D1D1D1;
}
#playButton {
 display:block;
 font-size:20px;
 margin:20px 10px;
 Font-weight:bold;
 Color: #222;
 Text-decoration:none;
}

Our HTML page should look like the following figure:

Now, let's write down the first move.js fragment. We need to attach an OnClick event handler to the Palybutton and move it to the right when clicked. The JavaScript code for the event handler is as follows, and this code adds Transform:translatex (300px) to the box number:

document.getElementById (' PlayButton '). onclick = function (e) {move
 ('. Box ')
 . x (+). End
 ();

The complete code after adding the Move.js code is as follows:

Html

<! DOCTYPE html>
 
 

Css

. box {
 margin-left:10px;
 width:100px;
 height:100px;
 Background: #7C9DD4;
 box-shadow:5px 5px 0px #D1D1D1;
}
#playButton {
 display:block;
 font-size:20px;
 margin:20px 10px;
 Font-weight:bold;
 Color: #222;
 Text-decoration:none;
}

The method of Move.js

In the previous demo, we saw The X () method. Now, let's look at other ways to Move.js.
set (prop, Val)

The set () method is used to set the CSS property of the element, with two parameters: CSS properties and property values. Example usage:

. Set (' Background-color ', ' #CCC ')
. Set (' Margin-left ', +)
. Set (' Color ', ' #222 ')

Add (prop, Val)

The Add () method is used to increase the value of the property that it has set. The method must be numeric in order to be used to increase the value. The method must have two parameters: the property value and its increment:

. Add (' Margin-left ', 200)

After the preceding code fragment is called, it adds 200px to its value.
Sub (prop, Val)

A sub () is an inverse procedure of add () that accepts two identical parameters, but whose value is subtracted from the property value.

. Sub (' Margin-left ', 200)

Rotate (deg)

As the name implies, the method rotates the element by supplying the numeric value as a parameter. When the method is invoked, it is appended to the transform property of the element. The following code rotates the element 90deg:

. Rotate (90)

This code will add the following CSS to the element:

Transform:rotate (90DEG)

Duration (n)

By using this method, you can set the playback time of the animation. For example: The following code, 2 seconds to move the element from the left to the right 200px:

. Set (' Margin-left ')
. Duration (' 2s ')

Another example, the following code. Move.js will modify the margin property of the element within 2 seconds, set the background color, and rotate the element 90 degrees.

. Set (' Margin-left ')
. Set (' Background-color ', ' #CCC ').
rotate.
duration (' 2s ')

Translate (x[, y])

The translate () method modifies the default location of the element, uses the provided coordinates as an argument, and if only one argument is set, as the X-coordinate, if the second argument is provided, the Y coordinate:

. Translate (200, 400)

X () and Y ()

The X () method adjusts the x-coordinate of the element, and the Y () method adjusts the y-coordinate of the element. The parameters of the two methods can be positive or negative, as follows:

. x (+)
. Y (-20)

Skew (x, y)

Skew () is used to adjust an angle relative to the x and Y axes. The method can be divided into skewx (deg) and skewy (deg) two methods:

. Skew (30, 40)

Scale (x, y)

This method is used to magnify or compress the size of the element, and the transform scale method is invoked according to each value provided:

. Scale (3, 3)

Ease (FN)

If you have used CSS3 transitions, you'll understand that the ease function works on the transition property. He specified the act of transition. Each ease function is in, out, in-out, snap, Cubic-bezeir, and so on. These functions can be invoked through the ease () method provided by Move.js. For example:

. Ease (' in '). x
. Ease (' Cubic-bezier (0,1,1,0) '). x (400)

End ()

This method is used to move.js the end of the code fragment, and he identifies the end of the animation. Technically, this method triggers the playback of the animation. This method accepts an optional callback return function. The code is as follows:

Move ('. Box ')
 . Set (' Background-color ', ' Red ').
 Duration (1000)
 . End (function () {
 alert ("Animation Over! ");
 

Delay (N)

As the method implies, the method provides a time value as an animation delay. As follows:

Move ('. Box ')
 . Set (' Background-color ', ' Red ')
 . Delay (1000). end
 ();

Then ()

This method is one of the most important functions in move.js. He used to split the animation into two sets and execute them sequentially. The following animation is divided into two steps, through the then () method to achieve segmentation:

Move ('. Box ')
 . Set (' Background-color ', ' Red ').
 x
 . Then ().
 y
 . Set (' Background-color ', ' green ')
 . end ();

# # Use Move.js to create complex animations #

In this tutorial, we have written a number of basic animations to understand each method. Next, we can easily create complex animations using Move.js. This demo illustrates most of Move.js's content in the demo page

We created a description of the animation, the code is as follows:

Move ('. Square ')
 . to (+).
 rotate (180)
 . Scale (. 5)
 . Set (' Background-color ', ' #FF0551 ')
 . Set (' Border-color ', ' Black ').
 duration (' 3s ').
 skew ( -10)
 . Then ()
 . Set (' opacity ', 0)
 . Duration (' 0.3s ')
 . Scale (0.1).
 pop ()
 . end ();

Conclusion

Hopefully this tutorial will give you a clear understanding of what move.js is and how to create CSS3 animations. Using Movejs can help you organize all the animated code correctly in a place. At any time you want to fix an animation, you'll know where he is.