Skip to content

Commit c43cc7f

Browse files
yama-devyama-dev
authored
Merge pull request #1 from yama-dev/develop
Develop
2 parents 144446a + f5a6c3d commit c43cc7f

File tree

6 files changed

+677
-0
lines changed

6 files changed

+677
-0
lines changed

‎README.md‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
# SCROLL EFFECT MODULE
2+
3+
<br>
4+
5+
## Feature
6+
7+
Grant of class in accordance with the scroll.
8+
9+
<br>
10+
11+
## Installation,Download
12+
13+
- npm -> []()
14+
15+
- Standalone(CDN) -> []()
16+
17+
- Zip -> [yama-dev/js-scroll-effect-module](https://github.com/yama-dev/js-scroll-effect-module/releases/latest)
18+
19+
<br>
20+
21+
## Using
22+
23+
### NPM Usage
24+
25+
``` bash
26+
# install npm.
27+
npm install --save-dev js-scroll-effect-module
28+
```
29+
30+
``` javascript.
31+
// import.
32+
import SCROLL_EFFECT_MODULE from 'js-scroll-effect-module';
33+
```
34+
35+
### Basic Standalone Usage
36+
37+
``` html
38+
<script src="./js-scroll-effect-module"></script>
39+
<script>
40+
var ScrollEffectModule = new SCROLL_EFFECT_MODULE({ elem : '.effect_item' });
41+
</script>
42+
```
43+
44+
<br>
45+
46+
## API
47+
48+
<br>
49+
50+
51+
## Browser support
52+
53+
| Browser | OS、version |
54+
| --- | --- |
55+
| Internet Explorer | 11+ |
56+
| Chrome | 最新 |
57+
| Firefox | 最新 |
58+
| Safari | 最新 |
59+
| Android | 4.4+ Chrome |
60+
| iOS | 8.0+ safari |
61+
62+
<br>
63+
64+
## Dependencies
65+
66+
none
67+
68+
<br><br><br>
69+
70+
___
71+
72+
**For Developer**
73+
74+
## Contribution
75+
76+
1. Fork it ( https://github.com/yama-dev/js-scroll-effect-module/fork )
77+
2. Create your feature branch (git checkout -b my-new-feature)
78+
3. Commit your changes (git commit -am 'Add some feature')
79+
4. Push to the branch (git push origin my-new-feature)
80+
5. Create new Pull Request
81+
82+
<br>
83+
84+
## Develop
85+
86+
### at Development
87+
88+
Install node modules.
89+
90+
``` bash
91+
$ npm install
92+
```
93+
94+
Run npm script 'develop'
95+
96+
``` bash
97+
$ npm run develop
98+
```
99+
100+
<br>
101+
102+
## Licence
103+
104+
[MIT](https://github.com/yama-dev/js-scroll-effect-module/blob/master/LICENSE)
105+
106+
<br>
107+
108+
## Author
109+
110+
[yama-dev](https://github.com/yama-dev)
111+

‎dist/js-scroll-effect-module.js‎

Lines changed: 18 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@
2525
"type": "git",
2626
"url": "https://github.com/yama-dev/js-scroll-effect-module"
2727
},
28+
"bugs": {
29+
"url" : "https://github.com/yama-dev/js-scroll-effect-module/issues",
30+
"email" : "tatsuya.yamamoto69@gmail.com"
31+
},
2832
"devDependencies": {
2933
"babel-cli": "^6.26.0",
3034
"babel-core": "^6.26.0",

‎sample/index.html‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, user-scalable=no">
6+
<title>js-scroll-effect-module | yama-dev</title>
7+
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
8+
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
9+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
10+
<script src="https://code.jquery.com/jquery-3.1.1.min.js" charset="UTF-8"></script>
11+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
12+
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
13+
<link rel="stylesheet" href="./scroll-effect-module.css">
14+
<script src="../dist/js-scroll-effect-module.js"></script>
15+
<script src="/ga.js"></script>
16+
</head>
17+
<body>
18+
<div class="container-fluid">
19+
20+
<div class="row mt10">
21+
<div class="col-md-1"></div>
22+
<div class="col-md-10">
23+
<h2>js-scroll-effect-module v0.1.0</h2>
24+
25+
<hr>
26+
27+
<h3></h3>
28+
<div id="brightcovePlayer1">
29+
<script>
30+
var ScrollEffectModule = new SCROLL_EFFECT_MODULE({
31+
elem : '.effect_item',
32+
displayRatio : 0.8,
33+
displayReverse : true,
34+
firstElem : '.effect_item--first',
35+
firstElemDelayTime : 300,
36+
firstDelayTime : 500,
37+
loadDelayTime : 0
38+
});
39+
</script>
40+
<pre class="prettyprint lang-html">
41+
<code>
42+
&lt;script&gt;
43+
var ScrollEffectModule = new SCROLL_EFFECT_MODULE({
44+
elem : &#039;.effect_item&#039;,
45+
displayRatio : 0.8,
46+
displayReverse : true,
47+
firstElem : &#039;.effect_item--first&#039;,
48+
firstElemDelayTime : 300,
49+
firstDelayTime : 500,
50+
loadDelayTime : 0
51+
});
52+
&lt;/script&gt;</code>
53+
</pre>
54+
</div>
55+
56+
<hr>
57+
58+
</div>
59+
<div class="col-md-1"></div>
60+
</div>
61+
62+
<div class="row mt10 scroll-effect-module">
63+
<div class="col-md-1"></div>
64+
<div class="col-md-10">
65+
<div class="effect_item effect_item--first-none effect__fadein-basic">
66+
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
67+
</div>
68+
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
69+
<div class="effect_item effect__fadein-zoomin">
70+
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
71+
</div>
72+
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
73+
<div class="effect_item effect__fadein-top">
74+
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
75+
</div>
76+
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
77+
<div class="effect_item effect__fadein-bottom">
78+
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
79+
</div>
80+
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
81+
<div class="effect_item effect__fadein-left">
82+
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
83+
</div>
84+
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
85+
<div class="effect_item effect__fadein-right">
86+
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
87+
</div>
88+
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
89+
<div class="effect_item effect__spinin">
90+
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
91+
</div>
92+
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
93+
</div>
94+
<div class="col-md-1"></div>
95+
</div>
96+
97+
</div>
98+
99+
<a href="https://github.com/yama-dev/js-scroll-effect-module" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
100+
101+
</body>
102+
</html>

0 commit comments

Comments
 (0)