Skip to content

Commit 433539c

Browse files
technote-spacetechnote-space
authored
Merge pull request #68 from technote-space/feature/#25
feat: add english README (#25)
2 parents f6a4a6d + b4c26b9 commit 433539c

File tree

2 files changed

+156
-36
lines changed

2 files changed

+156
-36
lines changed

‎README.ja.md‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
# jQuery Marker Animation
2+
3+
[![npm version](https://badge.fury.io/js/jquery.marker-animation.svg)](https://badge.fury.io/js/jquery.marker-animation)
4+
[![Build Status](https://travis-ci.com/technote-space/jquery.marker-animation.svg?branch=master)](https://travis-ci.com/technote-space/jquery.marker-animation)
5+
[![Coverage Status](https://coveralls.io/repos/github/technote-space/jquery.marker-animation/badge.svg?branch=master)](https://coveralls.io/github/technote-space/jquery.marker-animation?branch=master)
6+
[![CodeFactor](https://www.codefactor.io/repository/github/technote-space/jquery.marker-animation/badge)](https://www.codefactor.io/repository/github/technote-space/jquery.marker-animation)
7+
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/technote-space/jquery.marker-animation/blob/master/LICENSE)
8+
9+
*Read this in other languages: [English](README.md), [日本語](README.ja.md).*
10+
11+
蛍光ペンで塗るようなアニメーションを表示するjQueryプラグイン
12+
13+
![動作](https://raw.githubusercontent.com/technote-space/jquery.marker-animation/images/marker-animation.gif)
14+
15+
## Installation
16+
### ダウンロードして利用
17+
[リリースバージョン](https://github.com/technote-space/jquery.marker-animation/releases/latest/download/jquery.marker-animation.min.js)をダウンロードして
18+
```html
19+
<script type="text/javascript" src="/assets/jquery.marker-animation.min.js"></script>
20+
```
21+
のように読み込む
22+
### npmから利用
23+
https://www.npmjs.com/package/jquery.marker-animation
24+
25+
```bash
26+
npm install --save jquery.marker-animation
27+
```
28+
29+
### WordPressで利用
30+
プラグインとして利用できるようにしました。
31+
32+
[WordPress](https://ja.wordpress.org/plugins/marker-animation/)
33+
34+
[GitHub](https://github.com/technote-space/marker-animation)
35+
36+
## 基本的な使用方法
37+
```html
38+
文章文章文章<span class="marker-animation">強調したい文字</span>文章文章文章文章
39+
```
40+
41+
```html
42+
<script>
43+
$('.marker-animation').markerAnimation();
44+
</script>
45+
```
46+
47+
## オプション
48+
### color
49+
マーカーの色を指定
50+
```javascript
51+
$('.marker-animation').markerAnimation({
52+
color: '#fe9'
53+
});
54+
```
55+
### thickness
56+
マーカーの太さを指定
57+
```javascript
58+
$('.marker-animation').markerAnimation({
59+
thickness: '.6em'
60+
});
61+
```
62+
### duration
63+
マーカーを塗るのを完了するまでの時間を指定
64+
```javascript
65+
$('.marker-animation').markerAnimation({
66+
duration: '2s'
67+
});
68+
```
69+
### delay
70+
マーカーを塗るのを開始するまでの時間を指定
71+
```javascript
72+
$('.marker-animation').markerAnimation({
73+
duration: '.1s'
74+
});
75+
```
76+
### font_weight
77+
文字の太さを指定
78+
```javascript
79+
$('.marker-animation').markerAnimation({
80+
font_weight: 'bold'
81+
});
82+
```
83+
デフォルトは太字です。
84+
太字にしない場合はnullを設定してください。
85+
### repeat
86+
アニメーションを繰り返すかどうかを指定
87+
```javascript
88+
$('.marker-animation').markerAnimation({
89+
repeat: false
90+
});
91+
```
92+
trueにすると一度画面から外れて再び表示された際に再度アニメーションが実行されます。
93+
### stripe
94+
ストライプデザインにするかどうかを指定
95+
```javascript
96+
$('.marker-animation').markerAnimation({
97+
stripe: false
98+
});
99+
```
100+
これが `true` の場合はアニメーションなしの動作になります。
101+
![stripe](https://raw.githubusercontent.com/technote-space/jquery.marker-animation/images/stripe.png)
102+
103+
## 個別に値を指定する方法
104+
`data-ma_[オプション名]` の形式で個別にオプションを指定することが可能です。
105+
### 例1: 色の変更
106+
```html
107+
文章文章文章<span class="marker-animation" data-ma_color="red">強調したい文字</span>文章文章文章文章
108+
```
109+
この例ではマーカーの色が赤色になります。
110+
### 例2: 複数設定
111+
```html
112+
文章文章文章<span class="marker-animation" data-ma_repeat="true" data-ma_font_weight="null" data-ma_delay="2s">強調したい文字</span>文章文章文章文章
113+
```
114+
この例では
115+
* 画面から外れるごとにアニメーションが実行
116+
* 太文字ではない
117+
* ２秒遅れてアニメーション開始
118+
119+
が設定されます。

‎README.md‎

Lines changed: 37 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -6,34 +6,33 @@
66
[![CodeFactor](https://www.codefactor.io/repository/github/technote-space/jquery.marker-animation/badge)](https://www.codefactor.io/repository/github/technote-space/jquery.marker-animation)
77
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/technote-space/jquery.marker-animation/blob/master/LICENSE)
88

9-
蛍光ペンで塗るようなアニメーションを表示するjQueryプラグイン
9+
*Read this in other languages: [English](README.md), [日本語](README.ja.md).*
1010

11-
![動作](https://raw.githubusercontent.com/technote-space/jquery.marker-animation/images/marker-animation.gif)
11+
jQuery plugin to add under line animation like highlighter.
12+
13+
![Behavior](https://raw.githubusercontent.com/technote-space/jquery.marker-animation/images/marker-animation.gif)
1214

1315
## Installation
14-
### ダウンロードして利用
15-
[リリースバージョン](https://github.com/technote-space/jquery.marker-animation/releases/latest/download/jquery.marker-animation.min.js)をダウンロードして
16+
### Use from download
17+
Download [Release version](https://github.com/technote-space/jquery.marker-animation/releases/latest/download/jquery.marker-animation.min.js) and enqueue script.
1618
```html
1719
<script type="text/javascript" src="/assets/jquery.marker-animation.min.js"></script>
1820
```
19-
のように読み込み
20-
### npmから利用
21+
### Use from npm
2122
https://www.npmjs.com/package/jquery.marker-animation
2223

2324
```bash
2425
npm install --save jquery.marker-animation
2526
```
2627

27-
### WordPressで利用
28-
プラグインとして利用できるようにしました。
29-
28+
### for WordPress
3029
[WordPress](https://ja.wordpress.org/plugins/marker-animation/)
3130

3231
[GitHub](https://github.com/technote-space/marker-animation)
3332

34-
## 基本的な使用方法
33+
## Usage
3534
```html
36-
文章文章文章<span class="marker-animation">強調したい文字</span>文章文章文章文章
35+
Hello, Dolly <span class="marker-animation">Well, hello, Dolly</span> Hello, Dolly
3736
```
3837

3938
```html
@@ -42,76 +41,78 @@ npm install --save jquery.marker-animation
4241
</script>
4342
```
4443

45-
## オプション
44+
## Options
4645
### color
47-
マーカーの色を指定
46+
Set the color of line
4847
```javascript
4948
$('.marker-animation').markerAnimation({
5049
color: '#fe9'
5150
});
5251
```
5352
### thickness
54-
マーカーの太さを指定
53+
Set the thickness of line
5554
```javascript
5655
$('.marker-animation').markerAnimation({
5756
thickness: '.6em'
5857
});
5958
```
6059
### duration
61-
マーカーを塗るのを完了するまでの時間を指定
60+
Set the time to complete drawing a line
6261
```javascript
6362
$('.marker-animation').markerAnimation({
6463
duration: '2s'
6564
});
6665
```
6766
### delay
68-
マーカーを塗るのを開始するまでの時間を指定
67+
Set the time to start drawing a line
6968
```javascript
7069
$('.marker-animation').markerAnimation({
7170
duration: '.1s'
7271
});
7372
```
7473
### font_weight
75-
文字の太さを指定
74+
Set the thickness of characters
7675
```javascript
7776
$('.marker-animation').markerAnimation({
7877
font_weight: 'bold'
7978
});
8079
```
81-
デフォルトは太字です。
82-
太字にしない場合はnullを設定してください。
80+
\[default = `bold`]
81+
If you do not want to make it bold, please set `null`.
8382
### repeat
84-
アニメーションを繰り返すかどうかを指定
83+
Set whether to repeat the animation
8584
```javascript
8685
$('.marker-animation').markerAnimation({
8786
repeat: false
8887
});
8988
```
90-
trueにすると一度画面から外れて再び表示された際に再度アニメーションが実行されます。
89+
If this set to true, the animation will be executed again when it is off screen and displayed again.
9190
### stripe
92-
ストライプデザインにするかどうかを指定
91+
Set whether to make it stripe design
9392
```javascript
9493
$('.marker-animation').markerAnimation({
9594
stripe: false
9695
});
9796
```
98-
これが `true` の場合はアニメーションなしの動作になります。
97+
If this set to true, the animation will not be executed.
98+
9999
![stripe](https://raw.githubusercontent.com/technote-space/jquery.marker-animation/images/stripe.png)
100100

101-
## 個別に値を指定する方法
102-
`data-ma_[オプション名]` の形式で個別にオプションを指定することが可能です。
103-
### 例1: 色の変更
101+
## How to set the value for each
102+
You can set options in the following format.
103+
```
104+
data-ma_[option name]
105+
```
106+
### e.g. Change color
104107
```html
105-
文章文章文章<span class="marker-animation" data-ma_color="red">強調したい文字</span>文章文章文章文章
108+
Hello, Dolly <span class="marker-animation" data-ma_color="red">Well, hello, Dolly</span> Hello, Dolly
106109
```
107-
この例ではマーカーの色が赤色になります。
108-
### 例2: 複数設定
110+
In this example, the color of the line is red.
111+
### e.g Multiple options
109112
```html
110-
文章文章文章<span class="marker-animation" data-ma_repeat="true" data-ma_font_weight="null" data-ma_delay="2s">強調したい文字</span>文章文章文章文章
113+
Hello, Dolly <span class="marker-animation" data-ma_repeat="true" data-ma_font_weight="null" data-ma_delay="2s">Well, hello, Dolly</span> Hello, Dolly
111114
```
112-
この例では
113-
* 画面から外れるごとにアニメーションが実行
114-
* 太文字ではない
115-
* ２秒遅れてアニメーション開始
116-
117-
が設定されます。
115+
In this example, the options below are set.
116+
* Repeat animation
117+
* Not bold
118+
* 2sec delay animation

0 commit comments

Comments
 (0)