Hot File

CSS Animations created with Move.js

View: 823    Dowload: 0   Comment: 0   Post by: hanhga  
Author: none   Category: References   Fields: Other

9 point/4 review File has been tested

Currently, CSS3 transitions and animations are creating light effects which are used most beautiful. However, not everyone can understand and use them effectively.

Introduction

Currently, CSS3 transitions and animations are creating light effects which are used most beautiful. However, not everyone can understand and use them effectively. If you are having trouble with how to use them, then we would like to introduce to you an alternative solution, which is used Move.js. Move.js is a javascript library written CSS3 animations available, and you can easily create effects with the declaration of the function and enter the corresponding parameter.

move-js-css3-javascript-animation-framework

So that you understand, we will try to do a single-motion effects by simply CSS3 Assuming we have a div tag with the class box. And we want it to move 100px from the left while moving mouse on it (hover). And in this case, we will create an animation using CSS3 with writing as follows:

1
2
3
4
5
6
7
8
9
.box {
  -webkit-transition: margin 1s;
  -moz-transition: margin 1s;
  -o-transition: margin 1s;
  transition: margin 1s;
}
.box:hover {
  margin-left: 100px;
}

With Move.js we can also create an animation as above using the function set () as follows:

1
2
3
move('.box')
  .set('margin-left', 100)
  .end();

Is very simple and easy to use than many have not you?

Using

To understand how to use, I will work with you to create a demo for the use move.js. First, you visit GitHub Move.js to download the latest version. Then unzip and copy the file to the path move.js of you. Next is insert it into the html file as follows:

01
02
03
04
05
06
07
08
09
10
11
12
<!DOCTYPE html>
<html>
  <head>
    <title>Move.js Demo</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <a href="#" id="playButton">Play</a>
    <div class="box"></div>
    <script type="text/javascript" src="js/move.js"></script>
  </body>
</html>

Next, we insert the following CSS in styles.css file

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
.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;
}

And finally write a paragraph cript to execute as follows:

1
2
3
4
5
6
7
<script type="text/javascript">
      document.getElementById('playButton').onclick = function(e){
        move('.box')
          .x(300)
          .end();
      };
</script>

Move.js Methods

Here are a few functions that can be used to create the effect:

set (prop, val)

function set () is used to assign values for CSS properties. Includes 2 parameters: css properties and its values. Examples are as follows:

1
2
3
.set('background-color', '#CCC')
.set('margin-left', 500)
.set('color', '#222')

add(prop, val)

Function add () to add value to the CSS properties. The following example will increase 200px for properties margin-left:

1
.add('margin-left', 200)

sub(prop, val)

Contrary to the function add () function sub () will subtract values for CSS properties.

1
.sub('margin-left', 200)

rotate(deg)

This function works to the elements will rotate with the level recorded in the parameter, as the following example, it will rotate 90 degrees:

1
.rotate(90)

duration(n)

Using this function, you can specify how long the effect will occur. The following example will move from left 200px less than 2s.

1
2
.set('margin-left', 200)
.duration('2s')

translate(x[, y])

translate() be used to replace the position of the element in the argument is the position on the screen with the x-value and y-Coordinate Coordinate.

1
.translate(200, 400)

x() và y()

Using x () you will move horizontally element with value x-Coordinate. Similarly, the y () is used to move the vertical element y-Coordinate value.

1
2
.x(300)
.y(-20)

skew(x, y)

With this function you can turn a rectangle into a parallelogram with the pull tilted angles.

1
.skew(30, 40)

scale(x, y)

This function will enlarge or shrink the size of the HTML element.

1
.scale(3, 3)

The code above will increase the size of HTML elements 3 times.

ease(fn)

This function is used to determine the type of effects that we would use as in, out, in-out, snap, cubic-bezeir ...

1
2
.ease('in').x(400)
.ease('cubic-bezier(0,1,1,0)').x(400)

List the types of effects that you can use as follows:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
'in':                'ease-in'
'out':               'ease-out'
'in-out':            'ease-in-out'
'snap':              'cubic-bezier(0,1,.5,1)'
'linear':            'cubic-bezier(0.250, 0.250, 0.750, 0.750)'
'ease-in-quad':      'cubic-bezier(0.550, 0.085, 0.680, 0.530)'
'ease-in-cubic':     'cubic-bezier(0.550, 0.055, 0.675, 0.190)'
'ease-in-quart':     'cubic-bezier(0.895, 0.030, 0.685, 0.220)'
'ease-in-quint':     'cubic-bezier(0.755, 0.050, 0.855, 0.060)'
'ease-in-sine':      'cubic-bezier(0.470, 0.000, 0.745, 0.715)'
'ease-in-expo':      'cubic-bezier(0.950, 0.050, 0.795, 0.035)'
'ease-in-circ':      'cubic-bezier(0.600, 0.040, 0.980, 0.335)'
'ease-in-back':      'cubic-bezier(0.600, -0.280, 0.735, 0.045)'
'ease-out-quad':     'cubic-bezier(0.250, 0.460, 0.450, 0.940)'
'ease-out-cubic':    'cubic-bezier(0.215, 0.610, 0.355, 1.000)'
'ease-out-quart':    'cubic-bezier(0.165, 0.840, 0.440, 1.000)'
'ease-out-quint':    'cubic-bezier(0.230, 1.000, 0.320, 1.000)'
'ease-out-sine':     'cubic-bezier(0.390, 0.575, 0.565, 1.000)'
'ease-out-expo':     'cubic-bezier(0.190, 1.000, 0.220, 1.000)'
'ease-out-circ':     'cubic-bezier(0.075, 0.820, 0.165, 1.000)'
'ease-out-back':     'cubic-bezier(0.175, 0.885, 0.320, 1.275)'
'ease-out-quad':     'cubic-bezier(0.455, 0.030, 0.515, 0.955)'
'ease-out-cubic':    'cubic-bezier(0.645, 0.045, 0.355, 1.000)'
'ease-in-out-quart': 'cubic-bezier(0.770, 0.000, 0.175, 1.000)'
'ease-in-out-quint': 'cubic-bezier(0.860, 0.000, 0.070, 1.000)'
'ease-in-out-sine''cubic-bezier(0.445, 0.050, 0.550, 0.950)'
'ease-in-out-expo''cubic-bezier(1.000, 0.000, 0.000, 1.000)'
'ease-in-out-circ''cubic-bezier(0.785, 0.135, 0.150, 0.860)'
'ease-in-out-back''cubic-bezier(0.680, -0.550, 0.265, 1.550)'

delay(n)

This function will set the delay time occurring effects, as the following example will be delayed effect after 1s.

1
2
3
4
move('.box')
  .set('background-color', 'red')
  .delay(1000)
  .end();

then()

This is one of the most important functions of Move.js, it used to split effects into different parts, and then executed in order. As an example, the effect will be divided into 2 parts.

1
2
3
4
5
6
7
move('.box')
  .set('background-color', 'red')
  .x(500)
  .then()
  .y(400)
  .set('background-color', 'green')
  .end();

I hope through this article, you can understand and use effectively Move.js in creating effects. If something is not clear, then you do not hesitate to leave a message in the form of comments offline.

CSS Animations created with Move.js

CSS Animations created with Move.js Posted on 11-08-2015  Currently, CSS3 transitions and animations are creating light effects which are used most beautiful. However, not everyone can understand and use them effectively. 2.25/10 823

Comment:

To comment you must be logged in members.

Files with category

  • Instructions for installing and configuring Windows Live Mail on Windows 10 simple

    View: 2688    Download: 0   Comment: 0   Author: none  

    Instructions for installing and configuring Windows Live Mail on Windows 10 simple

    Category: References
    Fields: Other

    0/3 review
    Windows 10 pre-installed Mail application for managing personal email on the device. The latest version of this application but improved a lot and support other email accounts such as Gmail or Yahoo Mail but users almost no "salty" really with this...

  • Step by step instructions to create social networking buttons with CSS3

    View: 1876    Download: 0   Comment: 0   Author: none  

    Step by step instructions to create social networking buttons with CSS3

    Category: References
    Fields: Other

    0.75/6 review
    CSS3 help web designers have the ability to create buttons (buttons) very nice, today I will share with you two tips decoration for button in your web becomes radiant beauty that no need to use photoshop.

  • You should understand the CSS Box Shadow

    View: 2029    Download: 0   Comment: 0   Author: none  

    You should understand the CSS Box Shadow

    Category: References
    Fields: Other

    1.3181818181818/11 review
    Effects his shadow was introduced in the previous article, however, in this article, I will guide more specific about shadow attributes, you try it with anything. First we try to learn css following paragraph:

  • How to do button movement with beautiful CSS3

    View: 1716    Download: 0   Comment: 0   Author: none  

    How to do button movement with beautiful CSS3

    Category: References
    Fields: Other

    0/4 review
    Previously to create motion effects button, you must draw the button in photoshop, then switched to flash to make it possible to move. But now you need not spend too much time doing it, all because of the emergence of CSS3.

  • Create a dropdown menu with CSS3 effects with beautiful transtions

    View: 1991    Download: 0   Comment: 0   Author: none  

    Create a dropdown menu with CSS3 effects with beautiful transtions

    Category: References
    Fields: Other

    0.45/10 review
    More of the dropdown menu you want to introduce to you, this will have the effect menu transitions (converted background of menu background from pale to dark). This menu works well on browsers like FF, Chrome, Safary, but unfortunately did not work...

  • How to hack css for all browsers you should know

    View: 1625    Download: 0   Comment: 0   Author: none  

    How to hack css for all browsers you should know

    Category: References
    Fields: Other

    1.6875/8 review
    In the process of web design, which makes it the most headaches is how to design web pages that you can run on the browser. Especially when clients use the old as IE6 browser such. However, with this article, you will easily edit interface runs well...

  • Create Accordion with extremely beautiful CSS3

    View: 2025    Download: 0   Comment: 0   Author: none  

    Create Accordion with extremely beautiful CSS3

    Category: References
    Fields: Other

    0.9/5 review
    Accordion is a technique that helps you shortened the content that you want displayed on the website. It is often used for the display of submenus. In addition you can also use it for content, images. Before applying this procedure, you have to use...

  • Create the effect Hovercho images with Webkit and CSS3 is great

    View: 1722    Download: 0   Comment: 0   Author: none  

    Create the effect Hovercho images with Webkit and CSS3 is great

    Category: References
    Fields: Other

    1.125/4 review
    WebKit is one open source application framework provides the necessary components built one for your web browser. Along with CSS3, cả have contributed to very nice effect những previously only using JavaScript or JQuery thực beige.​

 
Newsletter Email

File suggestion for you

File top downloads

logo codetitle
Codetitle.com - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.com Develope by Vinagon .Ltd