download github

tutorial

settinglast updated 2017-8-01

step1

Please create image data in svg format.

create image data

step2

Please load a jQuery and an Union.js.


1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset=“UTF-8”>
5        <title>setting</title>
6    </head>
7    <body>
8        <div><!— display here —></div>
9        <script src=“jquery.js”></script>
10        <script src=“union.js”></script>
11    </body>
12</html>

step3

Specified the function as the selectors, Please load a svg file.


1    …
2    <body>
3        <div id="union"><!— display here —></div>
4        <script src=“jquery.js”></script>
5        <script src=“union.js”></script>
6        <script>
7                $("#union").union({
8                  "url": "./sample_robot.svg"
9                });
10        </script>
11    </body>
12</html>

optionlast updated 2017-8-01


1        …
2        <script src=“union.js”></script>
3        <script>
4                $("#union").union({
5                  “url”: “./sample_robot.svg”, // path of image file
6                  “duration”: “3s”, // value of transiton time
7                  “easing”: “ease-in-out”, // patarn of transition timing
8                  “setTimeout”: “1500” // value of transition start time
9                });
10        </script>
11    </body>
12</html>
name type initial customize
url string Nan

This property is specifies image file path. You must specify.
duration string 0.5s

This property is specifies transition time.
It becomes slow as the number becomes number larger.
It is the same as "transition-duration" of css3.

  • unit -> seconds
  • Decimal point -> OK
  • Negative value -> NG
easing string ease

This property is specifies transition timing.
Please choose from the following.
It is the same as "transition-timing-function" of css3.

ease linear ease-in ease-out ease-in-out cubic-bezier(x1, y1, x2, y2) steps(number_of_steps, direction)
setTimeout number 1000

This property is specifies transition start time.
It becomes delay as the number becomes number larger.

  • unit -> millisecond
  • Decimal point -> NG
  • Negative value -> NG

supported browserslast updated 2017-8-01

Chrome Safari Firefox Opera IE Android ios Safari
4+ 5.1+ 5+ 12.1+ not supported unchecked 6.1+