Skip to content

Commit 692334b

Browse files
yama-devyama-dev
authored
Merge pull request #2 from yama-dev/v0.1.0
modify:
2 parents c43cc7f + 483dcd2 commit 692334b

File tree

4 files changed

+38
-73
lines changed

4 files changed

+38
-73
lines changed

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

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

‎sample/index.html‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,9 @@
1212
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
1313
<link rel="stylesheet" href="./scroll-effect-module.css">
1414
<script src="../dist/js-scroll-effect-module.js"></script>
15-
<script src="/ga.js"></script>
1615
</head>
1716
<body>
18-
<div class="container-fluid">
17+
<div class="container-fluid" style="overflow:hidden;">
1918

2019
<div class="row mt10">
2120
<div class="col-md-1"></div>
@@ -59,35 +58,42 @@ <h3></h3>
5958
<div class="col-md-1"></div>
6059
</div>
6160

62-
<div class="row mt10 scroll-effect-module">
61+
<div class="row mt10">
6362
<div class="col-md-1"></div>
6463
<div class="col-md-10">
6564
<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>
65+
<h2>EffectType : fadein basic</h2>
66+
<p>EffectClassname : .effect__fadein-basic</p>
7167
</div>
7268
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
7369
<div class="effect_item effect__fadein-top">
74-
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
70+
<h2>EffectType : fadein top</h2>
71+
<p>EffectClassname : .effect__fadein-top</p>
7572
</div>
7673
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
7774
<div class="effect_item effect__fadein-bottom">
78-
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
75+
<h2>EffectType : fadein bottom</h2>
76+
<p>EffectClassname : .effect__fadein-bottom</p>
7977
</div>
8078
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
8179
<div class="effect_item effect__fadein-left">
82-
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
80+
<h2>EffectType : fadein left</h2>
81+
<p>EffectClassname : .effect__fadein-left</p>
8382
</div>
8483
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
8584
<div class="effect_item effect__fadein-right">
86-
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
85+
<h2>EffectType : fadein right</h2>
86+
<p>EffectClassname : .effect__fadein-right</p>
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__fadein-zoomin">
90+
<h2>EffectType : fadein zoomin</h2>
91+
<p>EffectClassname : .effect__fadein-zoomin</p>
8792
</div>
8893
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
8994
<div class="effect_item effect__spinin">
90-
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
95+
<h2>EffectType : spinin</h2>
96+
<p>EffectClassname : .effect__spinin</p>
9197
</div>
9298
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
9399
</div>

‎sample/scroll-effect-module.css‎

Lines changed: 19 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
* https://github.com/yama-dev/js-scroll-effect-module
44
* Copyright yama-dev
55
* Licensed under the MIT license.
6-
* Date: 2018-04-24
76
*/
87
/*!
98
* Setings
@@ -20,32 +19,28 @@
2019
/*!
2120
* Set Effects
2221
* -> effect__fadein-basic
23-
* -> effect__fadein-zoomin
2422
* -> effect__fadein-top
2523
* -> effect__fadein-bottom
2624
* -> effect__fadein-left
2725
* -> effect__fadein-right
26+
* -> effect__fadein-zoomin
2827
* -> effect__spinin
2928
*/
30-
.scroll-effect-module .effect__fadein-basic {
29+
.effect__fadein-basic {
3130
opacity: 0;
32-
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
3331
-webkit-transition: opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
3432
transition: opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
3533
}
3634

37-
.scroll-effect-module .effect__fadein-basic.is-active {
35+
.effect__fadein-basic.is-active {
3836
opacity: 1;
39-
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
4037
-webkit-transition: opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
4138
transition: opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
4239
}
4340

44-
.scroll-effect-module .effect__fadein-zoomin {
41+
.effect__fadein-zoomin {
4542
opacity: 0;
46-
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
4743
-webkit-transform: scale(0.99);
48-
-ms-transform: scale(0.99);
4944
transform: scale(0.99);
5045
-webkit-transform-style: preserve-3d;
5146
transform-style: preserve-3d;
@@ -55,11 +50,9 @@
5550
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
5651
}
5752

58-
.scroll-effect-module .effect__fadein-zoomin.is-active {
53+
.effect__fadein-zoomin.is-active {
5954
opacity: 1;
60-
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
6155
-webkit-transform: scale(1);
62-
-ms-transform: scale(1);
6356
transform: scale(1);
6457
-webkit-transform-style: preserve-3d;
6558
transform-style: preserve-3d;
@@ -69,12 +62,10 @@
6962
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
7063
}
7164

72-
.scroll-effect-module .effect__fadein-top {
65+
.effect__fadein-top {
7366
opacity: 0;
74-
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
75-
-webkit-transform: translate(0, -30%);
76-
-ms-transform: translate(0, -30%);
77-
transform: translate(0, -30%);
67+
-webkit-transform: translate(0, -30px);
68+
transform: translate(0, -30px);
7869
-webkit-transform-style: preserve-3d;
7970
transform-style: preserve-3d;
8071
-webkit-backface-visibility: hidden;
@@ -83,11 +74,9 @@
8374
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
8475
}
8576

86-
.scroll-effect-module .effect__fadein-top.is-active {
77+
.effect__fadein-top.is-active {
8778
opacity: 1;
88-
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
8979
-webkit-transform: translate(0, 0);
90-
-ms-transform: translate(0, 0);
9180
transform: translate(0, 0);
9281
-webkit-transform-style: preserve-3d;
9382
transform-style: preserve-3d;
@@ -97,12 +86,10 @@
9786
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
9887
}
9988

100-
.scroll-effect-module .effect__fadein-bottom {
89+
.effect__fadein-bottom {
10190
opacity: 0;
102-
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
103-
-webkit-transform: translate(0, 30%);
104-
-ms-transform: translate(0, 30%);
105-
transform: translate(0, 30%);
91+
-webkit-transform: translate(0, 30px);
92+
transform: translate(0, 30px);
10693
-webkit-transform-style: preserve-3d;
10794
transform-style: preserve-3d;
10895
-webkit-backface-visibility: hidden;
@@ -111,11 +98,9 @@
11198
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
11299
}
113100

114-
.scroll-effect-module .effect__fadein-bottom.is-active {
101+
.effect__fadein-bottom.is-active {
115102
opacity: 1;
116-
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
117103
-webkit-transform: translate(0, 0);
118-
-ms-transform: translate(0, 0);
119104
transform: translate(0, 0);
120105
-webkit-transform-style: preserve-3d;
121106
transform-style: preserve-3d;
@@ -125,11 +110,9 @@
125110
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
126111
}
127112

128-
.scroll-effect-module .effect__fadein-left {
113+
.effect__fadein-left {
129114
opacity: 0;
130-
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
131115
-webkit-transform: translate(-80%, 0);
132-
-ms-transform: translate(-80%, 0);
133116
transform: translate(-80%, 0);
134117
-webkit-transform-style: preserve-3d;
135118
transform-style: preserve-3d;
@@ -139,11 +122,9 @@
139122
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
140123
}
141124

142-
.scroll-effect-module .effect__fadein-left.is-active {
125+
.effect__fadein-left.is-active {
143126
opacity: 1;
144-
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
145127
-webkit-transform: translate(0, 0);
146-
-ms-transform: translate(0, 0);
147128
transform: translate(0, 0);
148129
-webkit-transform-style: preserve-3d;
149130
transform-style: preserve-3d;
@@ -153,11 +134,9 @@
153134
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
154135
}
155136

156-
.scroll-effect-module .effect__fadein-right {
137+
.effect__fadein-right {
157138
opacity: 0;
158-
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
159139
-webkit-transform: translate(80%, 0);
160-
-ms-transform: translate(80%, 0);
161140
transform: translate(80%, 0);
162141
-webkit-transform-style: preserve-3d;
163142
transform-style: preserve-3d;
@@ -167,11 +146,9 @@
167146
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
168147
}
169148

170-
.scroll-effect-module .effect__fadein-right.is-active {
149+
.effect__fadein-right.is-active {
171150
opacity: 1;
172-
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
173151
-webkit-transform: translate(0, 0);
174-
-ms-transform: translate(0, 0);
175152
transform: translate(0, 0);
176153
-webkit-transform-style: preserve-3d;
177154
transform-style: preserve-3d;
@@ -181,9 +158,8 @@
181158
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
182159
}
183160

184-
.scroll-effect-module .effect__spinin {
161+
.effect__spinin {
185162
opacity: 0;
186-
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
187163
-webkit-transform: translate(0, 0) rotate3d(1, 0, 1, -720deg);
188164
transform: translate(0, 0) rotate3d(1, 0, 1, -720deg);
189165
-webkit-transform-style: preserve-3d;
@@ -194,9 +170,8 @@
194170
transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
195171
}
196172

197-
.scroll-effect-module .effect__spinin.is-active {
173+
.effect__spinin.is-active {
198174
opacity: 1;
199-
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
200175
-webkit-transform: translate(0, 0) rotate3d(1, 0, 1, 0);
201176
transform: translate(0, 0) rotate3d(1, 0, 1, 0);
202177
-webkit-transform-style: preserve-3d;

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

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,10 @@
11
/*!
2-
* @license
3-
*
42
* JS SCROLL EFFECT MODULE (JavaScript Library)
53
* js-scroll-effect-module
6-
*
74
* versoin 0.1.0
85
* Repository https://github.com/yama-dev/js-scroll-effect-module
96
* Copyright yama-dev
107
* Licensed under the MIT license.
11-
* Release 2018-04-24
12-
*
13-
* Instance
14-
* new SCROLL_EFFECT_MODULE({ options });
15-
*
168
*/
179

1810
Element.prototype.hasClass = function(className){

0 commit comments

Comments
 (0)