回答編集履歴

4

訂正

2020/03/25 03:17

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア36960

test CHANGED
@@ -217,3 +217,35 @@
217
217
  });
218
218
 
219
219
  ```
220
+
221
+
222
+
223
+
224
+
225
+ ### 訂正
226
+
227
+ ```js
228
+
229
+ const trigger = new ScrollTrigger.default({trigger:{
230
+
231
+ once: true, // same functionality as the `once` flag in v0.x
232
+
233
+ offset: {
234
+
235
+ element: {
236
+
237
+ y: 1.0 // note that we pass a float instead of an integer, when the
238
+
239
+ // offset is a float, it takes it as a percentage, in this
240
+
241
+ // case, add 100% of the height of the element, the same
242
+
243
+ // functionality as the `addHeight` flag in v0.x
244
+
245
+ }
246
+
247
+ },
248
+
249
+ }});
250
+
251
+ ```

3

コメントを受けて追記3

2020/03/25 03:17

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア36960

test CHANGED
@@ -97,3 +97,123 @@
97
97
  });
98
98
 
99
99
  ```
100
+
101
+
102
+
103
+ ### コメントを受けて追記3
104
+
105
+
106
+
107
+ ```html
108
+
109
+ <div class="feature_list">
110
+
111
+ <dl>
112
+
113
+ <dt class="animated fast" data-scroll="bounceInDown">
114
+
115
+ <img src="http://placehold.jp/1500x1500.png?text=img/index/top01.png" alt="">
116
+
117
+ </dt>
118
+
119
+ <dd>AA</dd>
120
+
121
+ </dl>
122
+
123
+ <dl>
124
+
125
+ <dt class="animated fast" data-scroll="fadeIn">
126
+
127
+ <img src="http://placehold.jp/1500x1500.png?text=img/index/top02.png" alt="">
128
+
129
+ </dt>
130
+
131
+ <dd>BB</dd>
132
+
133
+ </dl>
134
+
135
+ <dl>
136
+
137
+ <dt class="animated fast" data-scroll="fadeInLeft">
138
+
139
+ <img src="http://placehold.jp/1500x1500.png?text=img/index/top03.png" alt="">
140
+
141
+ </dt>
142
+
143
+ <dd>CC</dd>
144
+
145
+ </dl>
146
+
147
+ </div>
148
+
149
+ ```
150
+
151
+
152
+
153
+ ```js
154
+
155
+ const trigger = new ScrollTrigger.default({
156
+
157
+ once: true, // same functionality as the `once` flag in v0.x
158
+
159
+ offset: {
160
+
161
+ element: {
162
+
163
+ y: 1.0 // note that we pass a float instead of an integer, when the
164
+
165
+ // offset is a float, it takes it as a percentage, in this
166
+
167
+ // case, add 100% of the height of the element, the same
168
+
169
+ // functionality as the `addHeight` flag in v0.x
170
+
171
+ }
172
+
173
+ },
174
+
175
+ });
176
+
177
+ trigger.add('[data-scroll=bounceInDown]', {
178
+
179
+ toggle: {
180
+
181
+ class: {
182
+
183
+ in: 'bounceInDown',
184
+
185
+ }
186
+
187
+ }
188
+
189
+ });
190
+
191
+ trigger.add('[data-scroll=fadeIn]', {
192
+
193
+ toggle: {
194
+
195
+ class: {
196
+
197
+ in: 'fadeIn',
198
+
199
+ }
200
+
201
+ }
202
+
203
+ });
204
+
205
+ trigger.add('[data-scroll=fadeInLeft]', {
206
+
207
+ toggle: {
208
+
209
+ class: {
210
+
211
+ in: 'fadeInLeft',
212
+
213
+ }
214
+
215
+ }
216
+
217
+ });
218
+
219
+ ```

2

コメントを受けて追記2

2020/03/25 01:15

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア36960

test CHANGED
@@ -45,3 +45,55 @@
45
45
 
46
46
 
47
47
  とのことですから、`new ScrollTrigger.default()`とすればいいのではないでしょうか?
48
+
49
+
50
+
51
+ ### コメントを受けて追記2
52
+
53
+
54
+
55
+ [Migrating from 0.x to 1.x | GitHub - terwanerik/ScrollTrigger: Let your page react to scroll changes.](https://github.com/terwanerik/ScrollTrigger#user-content-migrating-from-0x-to-1x)
56
+
57
+ ↑こちらの Another example for setting custom classes per toggle という一節をお読みいただければ、わかるのではないかと。
58
+
59
+
60
+
61
+ 一応念のため、当方で動作したコードも置いておきます。(解決手段に書かれていた変更は元に戻してください)
62
+
63
+ ```js
64
+
65
+ const trigger = new ScrollTrigger.default()
66
+
67
+ trigger.add('[data-scroll]', {
68
+
69
+ once: true, // same functionality as the `once` flag in v0.x
70
+
71
+ offset: {
72
+
73
+ element: {
74
+
75
+ y: 1.0 // note that we pass a float instead of an integer, when the
76
+
77
+ // offset is a float, it takes it as a percentage, in this
78
+
79
+ // case, add 100% of the height of the element, the same
80
+
81
+ // functionality as the `addHeight` flag in v0.x
82
+
83
+ }
84
+
85
+ },
86
+
87
+ toggle: {
88
+
89
+ class: {
90
+
91
+ in: 'bounceInDown',
92
+
93
+ }
94
+
95
+ }
96
+
97
+ });
98
+
99
+ ```

1

コメントを受けて追記

2020/03/24 08:52

投稿

Lhankor_Mhy
Lhankor_Mhy

スコア36960

test CHANGED
@@ -8,7 +8,9 @@
8
8
 
9
9
  最新の公式ドキュメントを読んでみてはいかがですか。
10
10
 
11
+
12
+
11
- > ```js
13
+ ```js
12
14
 
13
15
  // Create a new ScrollTrigger instance with default options
14
16
 
@@ -21,3 +23,25 @@
21
23
  ```
22
24
 
23
25
  [ScrollTrigger - Let your page react to scroll changes](https://terwanerik.github.io/ScrollTrigger/)
26
+
27
+  
28
+
29
+
30
+
31
+ ### コメントを受けて追記
32
+
33
+
34
+
35
+ ```js
36
+
37
+ // Create a new ScrollTrigger instance with default options
38
+
39
+ const trigger = new ScrollTrigger() // When not using npm, create a new instance with 'new ScrollTrigger.default()'
40
+
41
+ ```
42
+
43
+ [GitHub - terwanerik/ScrollTrigger: Let your page react to scroll changes.](https://github.com/terwanerik/ScrollTrigger#how-to-use)
44
+
45
+
46
+
47
+ とのことですから、`new ScrollTrigger.default()`とすればいいのではないでしょうか?